/**
 * wiki-v2.css — BJJ Wiki 統合スタイルシート
 * 全ページのインラインCSS + wiki-components.css を統合
 * テーマバリアント: technique(default) / athlete / index / list
 */

/* ── 1. RESET & BASE ── */
*{box-sizing:border-box;margin:0;padding:0}

/* ── 2. DESIGN TOKENS ── */
:root{
  --bg:#0f172a;
  --card:#18181b;
  --card-hover:#1c1c22;
  --border:rgba(255,255,255,0.10);
  --border-hover:rgba(233,69,96,0.5);
  --text:#e2e8f0;
  --muted:#64748b;
  --accent:#e94560;
  --accent2:#7c3aed;
}

/* Theme: Athlete */
.theme-athlete{--card:#141926;--border:#1e293b;--accent2:#a78bfa}
/* Theme: Index */
.theme-index{--accent:#7c3aed;--accent2:#e94560}
/* Theme: List (athletes grid etc) */
.theme-list{--bg:#080b12;--card:#141926;--border:#1e293b;--accent:#7c6af7;--accent2:#a78bfa}

/* ── 3. BODY & TYPOGRAPHY ── */
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.8}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;font-weight:800;line-height:1.3;margin-bottom:12px;letter-spacing:-0.02em;overflow-wrap:break-word}
h2{font-size:1.2rem;font-weight:700;color:var(--accent);margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
h3{color:var(--accent);margin:20px 0 8px;font-size:1.05rem}
p{color:var(--text);margin-bottom:12px}
ul,ol{padding-left:20px;margin-bottom:14px}
li{margin-bottom:6px;color:var(--text)}

/* ── 4. LAYOUT ── */
.container{max-width:860px;margin:0 auto;padding:20px 16px 80px}
header{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:24px;text-align:left}
header h1{color:var(--accent);font-size:1.6rem;font-weight:800;margin-bottom:6px;letter-spacing:-0.02em;overflow-wrap:break-word}
header p{color:var(--muted);font-size:.95rem}

/* ── 5. LOGO & NAV ── */
.logo{font-size:1.1rem;font-weight:700;color:var(--accent);letter-spacing:-0.02em;text-decoration:none}
.badge-beta{display:inline-block;font-size:.6rem;font-weight:700;background:#7c3aed;color:#fff;border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:middle;letter-spacing:.03em;line-height:1.5}
.lang-nav{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.lang-nav a{color:var(--muted);text-decoration:none;font-size:.85rem;padding:6px 14px;border-radius:4px;border:1px solid var(--border);transition:all .2s}
.lang-nav a.active,.lang-nav a:hover{color:var(--text);border-color:var(--accent)}
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
nav.page-nav{background:var(--card);padding:10px 20px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:.85rem;border-radius:8px;margin-bottom:16px}
nav.page-nav a{color:var(--muted);text-decoration:none}
nav.page-nav a:hover{color:var(--accent)}

/* ── 6. BADGES ── */
.meta-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.badge{font-size:.75rem;padding:3px 10px;border-radius:12px;font-weight:600;border:1px solid var(--border)}
.badge-belt{color:#fff;background:#1d4ed833;border-color:#1d4ed866}
.badge-cat{color:var(--accent);background:rgba(233,69,96,0.1);border-color:rgba(233,69,96,0.3)}
.badge-diff{color:var(--muted)}

/* ── 7. ARTICLE COMPONENTS ── */
.intro{color:var(--muted);font-size:1rem;margin-bottom:24px;padding:14px 16px;background:var(--card);border-left:3px solid var(--accent);border-radius:0 8px 8px 0}
section{margin-bottom:32px;scroll-margin-top:80px}

/* Difficulty bar */
.difficulty-bar{display:flex;align-items:center;gap:12px;margin:12px 0 28px;flex-wrap:wrap}
.diff-belt,.belt-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:0.78rem;font-weight:700;letter-spacing:.05em}
.diff-stars,.stars{font-size:1.1rem;letter-spacing:2px}
.diff-label{font-size:0.8rem;color:#6b7699}

/* Step cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;font-size:.95rem;line-height:1.8}
.card p{margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.step{display:flex;gap:12px;margin-bottom:12px}
.step-num{min-width:28px;height:28px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}

/* Tips / Warning boxes */
.tips-box,.tip-box{background:var(--card);border:1px solid rgba(233,69,96,0.2);border-radius:12px;padding:16px 20px;margin:28px 0}
.tips-box h3,.tip-box h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:12px}
.tips-box ul,.tip-box ul{list-style:none;padding:0}
.tips-box li,.tip-box li{padding:6px 0 6px 20px;position:relative;font-size:.95rem;color:var(--text)}
.tips-box li::before,.tip-box li::before{content:'▸';position:absolute;left:0;color:var(--accent)}

/* ── 8. TOC ── */
.toc{display:none} /* W-2: JS-populated TOC hidden by default */
.toc.has-items{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:28px}
.toc h3,.toc-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.toc ol{padding-left:20px}
.toc li{margin:4px 0}
.toc a{color:var(--accent);text-decoration:none;font-size:.9rem}
.toc a:hover{text-decoration:underline}

/* ── 9. CTA BANNERS ── */
.cta-banner{background:linear-gradient(135deg,rgba(233,69,96,0.15),rgba(124,58,237,0.1));border:1px solid rgba(233,69,96,0.3);border-radius:12px;padding:16px 20px;text-align:center;margin:28px 0}
.cta-banner a{color:var(--accent);text-decoration:none;font-weight:700;font-size:1rem}
.cta-banner a:hover{text-decoration:underline}
.cta-box{background:linear-gradient(135deg,rgba(233,69,96,0.12),rgba(167,139,250,0.08));border:1px solid rgba(233,69,96,0.4);border-radius:16px;padding:24px;text-align:center;margin:28px 0}
.cta-box p{color:var(--muted);margin-bottom:14px}
.cta-btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 28px;border-radius:8px;font-weight:700;text-decoration:none}
.cta-btn:hover{opacity:.9;text-decoration:none}

/* ── 10. SHARE BAR ── */
.share-bar{display:flex;align-items:center;gap:10px;margin-top:32px;padding-top:16px;border-top:1px solid var(--border)}
.share-bar a{color:var(--text);text-decoration:none;font-size:.85rem;padding:6px 14px;border:1px solid var(--border);border-radius:20px;transition:all .2s}
.share-bar a:hover{border-color:var(--accent);color:var(--accent)}

/* ── 11. PROGRESS BAR & BACK TO TOP ── */
.progress-bar{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(to right,var(--accent),var(--accent2));z-index:999;transition:width .1s}
.back-to-top,#back-to-top{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(233,69,96,0.4);z-index:100}

/* ── 12. FOOTER ── */
footer{text-align:center;color:var(--muted);font-size:.8rem;margin-top:48px;padding-top:16px;border-top:1px solid var(--border)}
footer a{color:var(--muted);text-decoration:none}

/* ── 13. MERMAID DIAGRAMS ── */
.mermaid-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:28px 0;overflow-x:auto}
.mermaid-wrap h3{font-size:.85rem;color:var(--muted);margin-bottom:12px}

/* ── 14. VIDEO TIMESTAMPS ── */
.ts-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:28px 0}
.ts-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ts-icon{font-size:1.2rem}
.ts-title{font-weight:700;font-size:.9rem;color:var(--text)}
.ts-video-title{font-size:.85rem;color:var(--accent);margin-bottom:4px;font-weight:600}
.ts-channel{font-size:.75rem;color:var(--muted);margin-bottom:12px}
.ts-list{list-style:none;padding:0;margin:0}
.ts-item{display:flex;gap:10px;padding:4px 0;align-items:baseline}
.ts-time{color:var(--accent);font-family:monospace;font-size:.82rem;min-width:48px;text-decoration:none}
.ts-time:hover{text-decoration:underline}
.ts-label{color:var(--text);font-size:.85rem}

/* ── 15. ATHLETE PAGE COMPONENTS ── */
.theme-athlete a{color:var(--accent2)}
.theme-athlete h2{font-size:.88rem;font-weight:700;color:var(--accent2);text-transform:uppercase;letter-spacing:.07em}
.theme-athlete header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 0;text-align:left}
.hero{background:linear-gradient(135deg,rgba(233,69,96,0.08),rgba(167,139,250,0.06));border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:28px}
.hero h1{font-size:2rem;font-weight:800;margin-bottom:4px}
.hero .nick{color:var(--accent2);font-size:1rem;margin-bottom:14px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.titles-list{list-style:none;padding:0}
.titles-list li{padding:3px 0;color:#f59e0b;font-size:.9rem}
.titles-list li::before{content:"🏆 "}
.tech-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tech-tag{display:inline-block;padding:5px 12px;background:#1e293b;border:1px solid var(--accent2);border-radius:20px;font-size:.8rem;color:var(--accent2);font-weight:600;text-decoration:none}
.tech-tag:hover{background:var(--accent2);color:#0f172a;text-decoration:none}
ul.hl-list,ul.tips-list{padding-left:20px;margin:0}
ul.hl-list li,ul.tips-list li{margin-bottom:10px;font-size:.93rem}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0}
.faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-q{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.faq-a{font-size:.9rem;color:var(--muted);line-height:1.7}

/* Athlete chips (on technique pages) */
.athletes-section{margin:28px 0}
.athlete-chips{display:flex;flex-wrap:wrap;gap:8px}
.athlete-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:border-color .2s}
.athlete-chip:hover{border-color:var(--accent);text-decoration:none}

/* ── 16. INDEX / SEARCH PAGE ── */
.theme-index header{background:rgba(11,15,26,0.95);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);margin-bottom:0}
.theme-index .logo{font-weight:800;font-size:1.2rem;color:#fff}
.theme-index .logo span{color:var(--accent2)}
.hero-index{text-align:center;padding:48px 20px 32px;max-width:680px;margin:0 auto}
.hero-index h1{font-size:2.4rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:10px}
.hero-index h1 span{color:var(--accent2)}
.hero-sub{color:var(--muted);font-size:1rem;margin-bottom:28px}
.search-wrap{position:relative;max-width:560px;margin:0 auto 20px}
#search{width:100%;padding:14px 48px 14px 18px;background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}
#search:focus{border-color:var(--accent)}
#search::placeholder{color:var(--muted)}
.search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cat-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px;padding:0 16px}
.cat-pill{padding:6px 14px;background:var(--card);border:1px solid var(--border);border-radius:20px;font-size:.85rem;cursor:pointer;color:var(--muted);transition:all .15s}
.cat-pill:hover,.cat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;color:var(--muted);font-size:.85rem}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.result-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s,background .2s;cursor:pointer;text-decoration:none}
.result-card:hover{border-color:var(--border-hover);background:var(--card-hover)}
.result-title{font-weight:600;font-size:.95rem;margin-bottom:6px;color:var(--text)}
.result-desc{font-size:.8rem;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.result-meta{display:flex;gap:6px;margin-top:8px}
.no-results{text-align:center;color:var(--muted);padding:60px 20px}
#load-more-wrap{text-align:center;margin-top:24px}
#load-more{padding:10px 28px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;font-size:.9rem;transition:all .15s}
#load-more:hover{border-color:var(--accent)}
.theme-index .cta-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px}

/* ── 17. LIST / GRID PAGES ── */
.athletes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.athlete-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;display:block;transition:border-color .2s}
.athlete-card:hover{border-color:var(--accent);text-decoration:none}
.ac-name{font-weight:700;font-size:1rem;color:var(--text);margin-bottom:4px}
.ac-cta{font-size:.8rem;color:var(--accent)}

/* ── 18. CROSS-LINK BOXES ── */
.belt-guide-box{border-radius:10px;padding:16px;margin:24px 0;background:#0f1420}
.conditioning-box{background:#1a2a1a;border-left:4px solid #4ade80;border-radius:8px;padding:14px 18px;margin:20px 0}
.conditioning-box p{margin:0 0 6px}
.conditioning-box .label{font-weight:700;color:#4ade80}
.conditioning-box .sub{font-size:13px;color:#ccc;margin-bottom:10px}
.conditioning-box a{display:inline-block;background:#4ade80;color:#0a0a1a;padding:6px 14px;border-radius:6px;text-decoration:none;font-weight:700;font-size:13px}
.yoga-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:24px 0}
.yoga-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.yoga-chip{padding:6px 12px;background:#1e293b;border:1px solid var(--border);border-radius:20px;font-size:.82rem;color:var(--accent2);text-decoration:none}
.yoga-chip:hover{border-color:var(--accent2)}

/* ── 19. BEEHIIV / NEWSLETTER ── */
.beehiiv-wrap{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(233,69,96,.06));border:1px solid rgba(124,58,237,.3);border-radius:14px;padding:24px;text-align:center;margin:28px 0}
.beehiiv-wrap h3{color:var(--accent2);margin-bottom:8px}
.beehiiv-wrap p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.beehiiv-btn{display:inline-block;background:var(--accent2);color:#fff;padding:10px 24px;border-radius:8px;font-weight:700;text-decoration:none}
.beehiiv-btn:hover{opacity:.9;text-decoration:none}

/* ── 20. GEAR BOX ── */
.gear-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:24px 0}
.gear-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gear-link{padding:6px 12px;background:#1e293b;border:1px solid var(--border);border-radius:20px;font-size:.82rem;color:var(--accent);text-decoration:none}
.gear-link:hover{border-color:var(--accent)}

/* ── 21. ADSENSE PLACEHOLDER ── */
.gi-shops h2{color:var(--accent)}
.gi-shops h3{color:var(--text)}

/* ── 22. WIKI-COMPONENTS (formerly wiki-components.css) ── */
/* W-1: Related Techniques grid */
.related-section{margin:32px 0 24px}
.related-section h3{color:#e94560;font-size:1.05rem;font-weight:700;margin-bottom:12px}
.related-grid{display:flex;flex-direction:column;gap:6px}
.related-grid a{display:block;padding:10px 14px;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:8px;color:#64b5f6;text-decoration:none;font-size:.9rem;line-height:1.4;transition:background .15s,border-color .15s}
.related-grid a:hover{background:#1e2a3a;border-color:#4a6a8a;text-decoration:none}
/* Tags */
.wc-tag{display:inline-block;margin:4px;padding:6px 14px;background:#141926;border:1px solid #1e293b;border-radius:20px;color:#90caf9;font-size:.8rem;text-decoration:none;transition:all .2s}
.wc-tag:hover{background:#1e293b;border-color:#e94560}
/* PRO badge */
.wc-pro-badge{display:inline-block;font-size:.6rem;font-weight:700;background:#7c3aed;color:#fff;border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle}
/* Footer (wc) */
.wc-footer{margin:40px 0 0;padding:20px 16px;border-top:1px solid #1a2a3a;text-align:center}
.wc-footer-text{color:#546e7a;font-size:.72rem;line-height:1.6;max-width:600px;margin:0 auto}
/* Cards (wc) */
.wc-card-tip{margin-bottom:16px;padding:14px 16px;background:#0a1a0a;border-left:3px solid #16a34a;border-radius:8px}
.wc-card-tip-title{color:#86efac;font-size:0.95rem;font-weight:700;margin-bottom:6px}
.wc-card-warn{margin-bottom:16px;padding:14px 16px;background:#1a0a0a;border-left:3px solid #dc2626;border-radius:8px}
.wc-card-warn-title{color:#fca5a5;font-size:0.95rem;font-weight:700;margin-bottom:6px}
.wc-card-info{margin-bottom:16px;padding:14px 16px;background:#0d1b2a;border:1px solid #1e2a3a;border-radius:8px}
.wc-card-info-title{color:#e2e8f0;font-size:0.95rem;font-weight:700;margin-bottom:6px}
/* Section */
.wc-section-divider{margin:32px 0}
.wc-section-box{margin:32px 0 16px;padding:20px;background:#0c1220;border:1px solid #1e293b;border-radius:16px}
.wc-section-box-title{color:#a5b4fc;font-size:1rem;margin:0 0 12px;font-weight:700}
.wc-section-box-grid{display:flex;flex-wrap:wrap;gap:0}
/* Text utilities */
.wc-muted{color:#9ca3af;font-size:0.9rem;margin:0}
.wc-muted-mb8{color:#9ca3af;font-size:0.9rem;margin-bottom:8px;padding-left:4px}
.wc-muted-mb12{color:#9ca3af;font-size:0.9rem;margin-bottom:12px}
.wc-muted-mb16{color:#9ca3af;font-size:.9rem;margin-bottom:16px}
.wc-heading-section{color:#e2e8f0;font-size:1.2rem;font-weight:800;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #1a2a3a}
.wc-link-muted{color:#9ca3af;text-decoration:none}
.wc-link-blue{color:#64b5f6;text-decoration:none;font-size:.85rem}
.wc-text-tip{font-size:.8rem;color:#c8e6c9;margin:0 0 12px}
.wc-mb16{margin-bottom:16px}
/* CTA (wc) */
.wc-cta-primary{display:block;background:#10B981;color:#fff;padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.85rem;text-align:center;transition:background .2s}
.wc-cta-primary:hover{background:#059669}
/* Floating CTA */
.wc-floating-cta{position:fixed;bottom:20px;right:20px;max-width:280px;background:#0d2010;border:1px solid #2e7d32;border-radius:12px;padding:14px;box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:9999}
.wc-floating-close{position:absolute;top:8px;right:12px;background:none;border:none;color:#546e7a;font-size:1rem;cursor:pointer}
.wc-floating-title{font-weight:700;color:#a5d6a7;margin-bottom:6px;font-size:.9rem}

/* ── 23. BELT TAGS (technique pages) ── */
.belt{display:inline-block;padding:3px 12px;border-radius:4px;font-size:0.8rem;font-weight:700;margin-bottom:16px}
.belt-white{background:#e2e2ee;color:#111}
.belt-blue{background:#2563eb;color:#fff}
.belt-purple{background:#7c3aed;color:#fff}
.belt-brown{background:#92400e;color:#fff}
.belt-black{background:#111;color:#fff;border:1px solid #444}

/* ── 24. PRO TIP ── */
.pro-tip{background:linear-gradient(135deg,#0a1a0a,#0f1f0f);border:1px solid #22c55e;border-radius:12px;padding:20px;margin:24px 0}
.pro-tip-label{color:#22c55e;font-size:0.8rem;font-weight:700;letter-spacing:0.05em;margin-bottom:8px}

/* ── 25. SHARE BUTTONS ── */
.share-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;font-size:0.85rem;font-weight:700;text-decoration:none;transition:opacity .2s}
.share-btn:hover{opacity:.8;text-decoration:none}
.share-btn.x{background:#000;color:#fff}
.share-btn.reddit{background:#ff4500;color:#fff}
.share-btn.copy{background:#2d3748;color:#fff;cursor:pointer;border:none;font-family:inherit}

/* ── 26. YOUTUBE SEARCH BUTTON ── */
.yt-search-btn{display:inline-flex;align-items:center;gap:6px;color:#fff;background:#ff0000;border:none;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600;text-decoration:none;transition:opacity .15s}
.yt-search-btn:hover{opacity:.85}
.yt-search-btn svg{width:14px;height:14px;fill:#fff}

/* ── 27. FAQ (technique pages) ── */
.faq{background:#0d0d1a;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}

/* ── 28. AFFILIATE / CTA BOX (deprecated but kept for compat) ── */
.aff-box{background:linear-gradient(135deg,#0d0a1a,#0d0d1a);border:1px solid var(--accent2);border-radius:12px;padding:20px;margin:32px 0;text-align:center}
.aff-box p{color:var(--muted);font-size:0.9rem;margin-bottom:12px}
.aff-btn{display:inline-block;background:var(--accent2);color:#fff;padding:10px 24px;border-radius:8px;text-decoration:none;font-weight:700;font-size:0.9rem}

/* ── 29. CATEGORY INDEX ── */
.cat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.cat-card h2{font-size:1rem;font-weight:700;color:var(--accent);margin-bottom:12px}
.tech-links{display:flex;flex-wrap:wrap;gap:8px}
.tech-links a{background:#1e1e2e;color:var(--muted);text-decoration:none;padding:4px 12px;border-radius:6px;font-size:0.85rem;border:1px solid var(--border)}
.tech-links a:hover{color:var(--text);border-color:var(--accent)}
.subtitle{color:var(--muted);margin-bottom:32px}

/* ── 30. LANGUAGE SELECTOR (root index) ── */
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.lang-btn{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px 16px;text-decoration:none;color:var(--text);transition:border-color 0.2s}
.lang-btn:hover{border-color:var(--accent)}
.lang-flag{font-size:2.5rem;margin-bottom:8px}
.lang-name{font-size:1.1rem;font-weight:700}
.lang-sub{font-size:0.8rem;color:var(--muted);margin-top:4px}

/* ── 31. TOC LIST (auto-generated) ── */
.toc-list{list-style:none;padding:0;margin:0}
.toc-list li{margin:4px 0}
.toc-list a{color:var(--accent);font-size:.88rem;text-decoration:none}
.toc-list a:hover{text-decoration:underline}

/* ── 32. RESPONSIVE ── */
@media(max-width:600px){
  h1{font-size:1.3rem}
  header h1{font-size:1.3rem}
  .hero h1{font-size:1.5rem}
  .hero-index h1{font-size:1.8rem}
  .theme-index .cta-banner{flex-direction:column;text-align:center}
}