/* Diekstrak dari blok <style> inline duplikat (lihat docs/ROADMAP-KONSOLIDASI.md, item "CSS inline terduplikasi"). Konten tidak diubah saat ekstraksi. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--kyoto-cream,#F8F3E9);color:var(--charcoal,#2D2D2D);min-height:100dvh;display:flex;flex-direction:column}
.page{max-width:960px;margin:0 auto;padding:32px 20px 80px;flex:1}
.page-hero{margin-bottom:32px}
.kicker{display:inline-block;padding:4px 12px;border-radius:16px;background:rgba(107,79,58,.08);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6B4F3A;margin-bottom:10px}
[data-theme="dark"] .kicker{background:rgba(200,155,60,.10);color:#C89B3C}
.page-hero h1{font-family:'Noto Serif JP',serif;font-size:clamp(24px,4vw,36px);font-weight:700;color:#6B4F3A;margin-bottom:8px;line-height:1.25}
[data-theme="dark"] .page-hero h1{color:#C89B3C}
.page-hero p{font-size:14px;color:var(--ink-soft, #6E6E6E);max-width:600px}
/* controls */
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.search-box{flex:1;min-width:200px;padding:10px 14px;border:1.5px solid rgba(107,79,58,.15);border-radius:9px;font-family:inherit;font-size:14px;background:#FEFCF8;color:#2D2D2D;outline:none;transition:border-color 150ms}
[data-theme="dark"] .search-box{background:#1A1A1A;color:#E8E5DF;border-color:rgba(200,155,60,.15)}
.search-box:focus{border-color:#6B4F3A}
.cat-btn{padding:8px 14px;border-radius:18px;border:1.5px solid rgba(107,79,58,.15);background:none;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all 120ms;color:#6B4F3A;white-space:nowrap}
.cat-btn.active,.cat-btn:hover{background:#6B4F3A;color:#FEF;border-color:#6B4F3A}
[data-theme="dark"] .cat-btn{color:#C89B3C;border-color:rgba(200,155,60,.18)}
[data-theme="dark"] .cat-btn.active{background:#C89B3C;color:#1A1209;border-color:#C89B3C}
/* stats */
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.stat{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:9px;padding:8px 14px;text-align:center}
[data-theme="dark"] .stat{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.stat-n{font-size:20px;font-weight:700;color:#6B4F3A;display:block}
[data-theme="dark"] .stat-n{color:#C89B3C}
.stat-l{font-size:10px;color:#A0A0A0;text-transform:uppercase;letter-spacing:.05em}
/* cards */
.card-grid{display:grid;gap:10px}
.g-card{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:12px;padding:16px 18px;cursor:pointer;transition:all 140ms}
[data-theme="dark"] .g-card{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.g-card:hover{border-color:#6B4F3A;box-shadow:0 4px 16px rgba(107,79,58,.09)}
[data-theme="dark"] .g-card:hover{border-color:#C89B3C}
.g-card.open{border-color:#6B4F3A;background:rgba(107,79,58,.03)}
[data-theme="dark"] .g-card.open{border-color:#C89B3C;background:rgba(200,155,60,.05)}
.g-head{display:flex;gap:12px;align-items:center}
.g-jp{font-family:'Noto Serif JP',serif;font-size:17px;font-weight:700;color:#6B4F3A;min-width:100px}
[data-theme="dark"] .g-jp{color:#C89B3C}
.g-id{font-size:13px;color:#4A4A4A;font-weight:600}
[data-theme="dark"] .g-id{color:#C8C5BF}
.g-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(107,79,58,.08);color:#6B4F3A;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;margin-left:auto}
[data-theme="dark"] .g-tag{background:rgba(200,155,60,.10);color:#C89B3C}
.g-body{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(107,79,58,.08)}
[data-theme="dark"] .g-body{border-top-color:rgba(200,155,60,.08)}
.g-card.open .g-body{display:block}
.g-pattern{font-size:13px;font-weight:600;color:#553C2B;margin-bottom:8px}
[data-theme="dark"] .g-pattern{color:#D4AA56}
.g-example{display:flex;flex-direction:column;gap:4px;background:rgba(107,79,58,.04);border-radius:8px;padding:10px 12px}
[data-theme="dark"] .g-example{background:rgba(200,155,60,.05)}
.g-ex-jp{font-family:'Noto Serif JP',serif;font-size:16px;color:#2D2D2D}
[data-theme="dark"] .g-ex-jp{color:#E8E5DF}
.g-ex-id{font-size:13px;color:var(--ink-soft, #6E6E6E);font-style:italic}
.g-audio{background:none;border:1px solid rgba(107,79,58,.15);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;color:#6B4F3A;margin-top:6px;display:inline-flex;align-items:center;gap:4px}
[data-theme="dark"] .g-audio{border-color:rgba(200,155,60,.18);color:#C89B3C}
/* vocab card */
.v-card{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:10px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start;transition:all 130ms}
[data-theme="dark"] .v-card{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.v-card:hover{border-color:#6B4F3A;box-shadow:0 3px 12px rgba(107,79,58,.08)}
[data-theme="dark"] .v-card:hover{border-color:#C89B3C}
.v-num{font-size:11px;color:#C0BDB7;width:28px;flex-shrink:0;margin-top:3px;text-align:right}
.v-jp{font-family:'Noto Serif JP',serif;font-size:18px;font-weight:700;color:#6B4F3A;display:block;line-height:1.2;margin-bottom:2px}
[data-theme="dark"] .v-jp{color:#C89B3C}
.v-read{font-size:12px;color:#8B6E56;margin-bottom:4px;display:block}
[data-theme="dark"] .v-read{color:rgba(200,155,60,.6)}
.v-id{font-size:13px;color:#4A4A4A;line-height:1.5}
[data-theme="dark"] .v-id{color:#C8C5BF}
.v-actions{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.v-btn{background:none;border:1px solid rgba(107,79,58,.14);border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer;color:#6B4F3A;transition:all 120ms;white-space:nowrap}
.v-btn:hover{background:rgba(107,79,58,.07)}
[data-theme="dark"] .v-btn{border-color:rgba(200,155,60,.18);color:#C89B3C}
/* latihan */
.quiz-wrap{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:14px;padding:24px;max-width:600px;margin:0 auto}
[data-theme="dark"] .quiz-wrap{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.quiz-q{font-family:'Noto Serif JP',serif;font-size:26px;font-weight:700;color:#6B4F3A;text-align:center;margin-bottom:8px}
[data-theme="dark"] .quiz-q{color:#C89B3C}
.quiz-hint{font-size:13px;color:var(--ink-soft, #6E6E6E);text-align:center;margin-bottom:20px}
.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
@media(max-width:480px){.quiz-choices{grid-template-columns:1fr}}
.qc-btn{padding:12px 14px;border-radius:9px;border:1.5px solid rgba(107,79,58,.14);background:#FEFCF8;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all 130ms;color:#2D2D2D;text-align:left;line-height:1.4}
[data-theme="dark"] .qc-btn{background:#242424;border-color:rgba(200,155,60,.12);color:#E8E5DF}
.qc-btn:hover:not(:disabled){border-color:#6B4F3A;background:rgba(107,79,58,.05)}
.qc-btn.correct{background:#EAF2E8!important;border-color:#5B7C5B!important;color:#5B7C5B!important}
.qc-btn.wrong{background:#FAEAEA!important;border-color:#A63A3A!important;color:#A63A3A!important}
.quiz-feedback{font-size:13px;line-height:1.65;padding:10px 14px;border-radius:8px;min-height:40px;margin-bottom:12px}
.quiz-feedback.ok{background:#EAF2E8;border-left:4px solid #5B7C5B;color:#3A6A3A}
.quiz-feedback.ng{background:#FAEAEA;border-left:4px solid #A63A3A;color:#7A2A2A}
[data-theme="dark"] .quiz-feedback.ok{background:rgba(91,124,91,.15);color:#8FBF8F}
[data-theme="dark"] .quiz-feedback.ng{background:rgba(166,58,58,.15);color:#E07070}
/* pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap}
.pg-btn{padding:7px 13px;border-radius:8px;border:1px solid rgba(107,79,58,.14);background:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#6B4F3A;transition:all 120ms}
.pg-btn:hover,.pg-btn.active{background:#6B4F3A;color:#FEF;border-color:#6B4F3A}
[data-theme="dark"] .pg-btn{color:#C89B3C;border-color:rgba(200,155,60,.18)}
[data-theme="dark"] .pg-btn.active{background:#C89B3C;color:#1A1209}
.no-result{text-align:center;padding:40px;color:#A0A0A0;font-size:14px}
/* section tabs */
.section-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid rgba(107,79,58,.10);overflow-x:auto}
[data-theme="dark"] .section-tabs{border-bottom-color:rgba(200,155,60,.10)}
.sec-tab{padding:10px 16px;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-soft, #6E6E6E);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all 130ms}
.sec-tab.active{color:#6B4F3A;border-bottom-color:#6B4F3A}
[data-theme="dark"] .sec-tab{color:#9A9890}
[data-theme="dark"] .sec-tab.active{color:#C89B3C;border-bottom-color:#C89B3C}
.sec-panel{display:none}.sec-panel.active{display:block}
/* progress bar */
.prog-bar{height:5px;background:rgba(107,79,58,.08);border-radius:3px;margin-bottom:20px;overflow:hidden}
.prog-fill{height:100%;background:#6B4F3A;border-radius:3px;transition:width 400ms}
[data-theme="dark"] .prog-fill{background:#C89B3C}
/* Back nav:not(.kn-nav) */
.back-nav{display:flex;gap:8px;margin-bottom:20px;font-size:13px;flex-wrap:wrap}
.back-nav a{color:#6B4F3A;text-decoration:none;font-weight:600}
[data-theme="dark"] .back-nav a{color:#C89B3C}
.back-nav a:hover{text-decoration:underline}
.back-sep{color:#A0A0A0}