:root {
  /* ── Pixel Nihon design tokens ── */
  --pn-bg-base:       #0f1117;
  --pn-bg-surface:    #1a1f2e;
  --pn-bg-elevated:   #222839;
  --pn-bg-overlay:    #2a3047;
  --pn-accent:        #e94560;
  --pn-accent-dim:    rgba(233,69,96,0.15);
  --pn-accent-hover:  #ff5577;
  --pn-gold:          #f5a623;
  --pn-gold-dim:      rgba(245,166,35,0.15);
  --pn-correct:       #00c9a7;
  --pn-correct-dim:   rgba(0,201,167,0.15);
  --pn-text-primary:  #e2e8f0;
  --pn-text-secondary:#8892a4;
  --pn-text-tertiary: #4a5568;
  --pn-border:        rgba(255,255,255,0.08);
  --pn-font-pixel:    'Press Start 2P', monospace;

  /* ── Site variable remaps → PN palette ── */
  --ink:    #0f1117;
  --ink2:   #8892a4;
  --ink3:   #4a5568;
  --text:   #e2e8f0;
  --paper:  #1a1f2e;
  --paper2: #222839;
  --paper3: #2a3047;
  --red:    #e94560;
  --red-l:  rgba(233,69,96,0.15);
  --blue:   #7c6fef;
  --blue-l: rgba(124,111,239,0.15);
  --green:  #00c9a7;
  --green-l:rgba(0,201,167,0.15);
  --gold:   #f5a623;
  --gold-l: rgba(245,166,35,0.15);
  --purple: #7c6fef;
  --purple-l:rgba(124,111,239,0.15);
  --teal:   #00c9a7;
  --teal-l: rgba(0,201,167,0.15);
  --border: rgba(255,255,255,0.08);
  --shadow: 0 2px 16px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans JP',sans-serif;background:var(--pn-bg-base);color:var(--pn-text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}
html{overflow-x:hidden}
header{background:var(--pn-bg-surface);color:var(--pn-text-primary);padding:.875rem 2.5rem 0;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:1rem;border-bottom:1px solid var(--pn-border)}
.header-logo-area{display:flex;align-items:center;gap:14px;min-width:0}
.logo-mark{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-logo-icon{width:50px;height:50px;flex-shrink:0}
.header-wordmark{display:flex;flex-direction:column;gap:4px}
.wordmark-pixel{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--pn-text-primary);line-height:1.2}
.wordmark-nihon{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--pn-accent);line-height:1.2}
#pack-selector{display:flex;flex-direction:column;align-items:center;gap:5px}
/* Responsive header */
@media(max-width:840px){
  header{grid-template-columns:auto 1fr auto;padding:.75rem .875rem 0;column-gap:.75rem}
  .header-logo-area{flex-direction:column;align-items:flex-start;gap:5px}
  .header-tagline{font-size:7px;line-height:1.5}
  #pack-label{display:none}
  .badges{display:none !important}
}
@media(max-width:480px){
  header{padding:.6rem .625rem 0;column-gap:.5rem}
  .site-logo-icon{width:38px;height:38px}
  .wordmark-pixel,.wordmark-nihon{font-size:10px}
  .header-tagline{font-size:6px}
  header>.header-progress{display:none}
}
/* Vocab table — scrollable on narrow screens so tick/conjugate don't get clipped */
.vocab-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:600px){
  .vocab-table td,.vocab-table th{padding:7px 6px}
  .vocab-cat{font-size:9px;padding:2px 5px;white-space:nowrap}
  .vocab-en{font-size:13px}
  .vocab-jp{font-size:14px}
  .vocab-table{min-width:480px}
}
/* Scenario tick: move to start of header so it doesn't orphan on wrap */
.scenario-header .section-tick-btn{order:-1}
header h1{font-family:var(--pn-font-pixel);font-size:1.1rem;font-weight:400;letter-spacing:.04em;line-height:1.4;color:var(--pn-text-primary)}
.jp-title{font-family:'Noto Sans JP',sans-serif;font-size:.72rem;color:var(--pn-text-secondary);margin-top:6px;letter-spacing:.12em}
.header-right{justify-self:end;display:flex;align-items:center;gap:8px}
header>.header-progress{grid-column:1/-1;grid-row:2;justify-content:center;padding:.5rem 0 .75rem;border-top:.5px solid var(--pn-border-subtle);margin-top:.375rem}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.badge-red{background:var(--red);color:#fff}
.badge-dim{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18)}
/* Progress bar in header */
.header-progress{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.6)}
.header-progress-bar{width:140px;height:5px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}
.header-progress-fill{height:100%;background:var(--red);border-radius:99px;transition:width .4s ease}
/* PN global scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--pn-bg-base)}
::-webkit-scrollbar-thumb{background:var(--pn-bg-elevated);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--pn-accent)}
/* Layout */
.layout-body{display:flex;align-items:flex-start;background:var(--pn-bg-base);min-height:100vh}
.content-wrap{flex:1;min-width:0}
/* Sidebar */
nav.sidebar{width:220px;min-height:calc(100vh - 110px);background:var(--pn-bg-surface);border-right:.5px solid var(--pn-border);padding:.75rem 0 2rem;flex-shrink:0;position:sticky;top:0;max-height:100vh;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column}
.sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pn-text-tertiary);padding:1.2rem 1.25rem .35rem;pointer-events:none}
.sidebar-item{display:flex;align-items:center;gap:9px;width:calc(100% - 16px);text-align:left;padding:.5rem 1rem;border:none;background:none;cursor:pointer;color:var(--pn-text-secondary);font-size:14.5px;font-family:'DM Sans',sans-serif;border-radius:7px;margin:1px 8px;transition:background .12s,color .12s;letter-spacing:.01em}
.sidebar-item:hover{background:var(--pn-bg-elevated);color:var(--pn-text-primary)}
.sidebar-item.active{background:var(--pn-accent-dim);color:var(--pn-accent);font-weight:500}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;font-size:14px;font-family:'Noto Serif JP',serif;line-height:1;opacity:.75}
.nav-icon-emoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:15px}
.sidebar-item:hover .nav-icon,.sidebar-item.active .nav-icon{opacity:1}
.sidebar-auth{margin-top:auto;padding:1.25rem 1.25rem .5rem;border-top:.5px solid var(--pn-border)}
/* Sidebar overlay (mobile) */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;cursor:pointer}
.sidebar-overlay.visible{display:block}
/* Mobile tab bar */
.mobile-tabbar{display:none;align-items:center;gap:.6rem;padding:.55rem 1rem;background:var(--pn-bg-surface);border-bottom:.5px solid var(--pn-border);position:sticky;top:0;z-index:10}
.mobile-menu-btn{background:none;border:.5px solid var(--pn-border);color:var(--pn-text-primary);padding:.4rem .85rem;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:.5rem;white-space:nowrap;font-family:'DM Sans',sans-serif}
#mobile-current-tab{font-size:13px;color:var(--pn-text-secondary);font-family:'DM Sans',sans-serif}
/* Keep .nav-tab as alias for compat (game packs may reference it) */
.nav-tab{display:none}
main{padding:2rem 2.5rem 4rem;overflow-x:hidden;background:var(--pn-bg-base);zoom:var(--pn-zoom,1)}
.text-size-btn{background:var(--pn-bg-elevated);border:1px solid var(--pn-border);border-radius:6px;color:var(--pn-text-secondary);cursor:pointer;height:32px;padding:0 7px;display:inline-flex;align-items:center;gap:2px;transition:border-color .15s,color .15s;flex-shrink:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;line-height:1}
.text-size-btn:hover{border-color:var(--pn-accent);color:var(--pn-accent)}
.text-size-btn .ts-label{font-size:10px;color:var(--pn-text-tertiary);margin-top:1px}
@media(max-width:900px){
  nav.sidebar{width:192px}
  .sidebar-item{font-size:12.5px}
  main{padding:1.75rem 1.5rem 4rem}
}
@media(max-width:768px){
  nav.sidebar{position:fixed;top:0;left:-250px;height:100vh;z-index:201;transition:transform .25s ease;width:240px;overflow-y:auto;padding-top:1.5rem;min-height:unset}
  nav.sidebar.open{transform:translateX(250px)}
  .mobile-tabbar{display:flex}
  main{padding:1.5rem 1rem 4rem}
}
.section{display:none}
.section.visible{display:block}
/* Tips */
.tip{background:var(--pn-gold-dim);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:.75rem 1rem;font-size:13px;color:var(--pn-gold);margin-bottom:1.75rem}
.tip strong{font-weight:500}
/* Section intro paragraphs */
.section-intro{font-size:13.5px;line-height:1.7;color:var(--pn-text-secondary);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:.5px solid var(--border)}
.section-intro strong{color:var(--pn-text-primary);font-weight:500}
.section-intro-wrap{position:relative}
.intro-edit-btn{display:none;position:absolute;top:0;right:0;background:var(--paper2);border:.5px solid var(--border);border-radius:6px;color:var(--pn-text-secondary);cursor:pointer;font-size:11px;padding:3px 8px;transition:color .15s,border-color .15s}
.intro-edit-btn:hover{color:var(--pn-accent);border-color:var(--pn-accent)}
body.pn-edit-mode .intro-edit-btn{display:inline-block}
/* Section tick buttons (reading / scenario / verb sub-section) */
.section-tick-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.28);background:transparent;cursor:pointer;font-size:13px;color:var(--pn-text-secondary);padding:0;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
html[data-theme="light"] .section-tick-btn{border-color:rgba(0,0,0,0.22)}
.section-tick-btn:hover{border-color:var(--green);color:var(--green)}
.section-tick-btn.done{background:var(--green);border-color:var(--green);color:#fff}
/* Verb group mark-as-studied bar */
.verb-studied-bar{display:flex;align-items:center;gap:10px;padding:.6rem .9rem;background:var(--paper2);border-radius:8px;margin-bottom:1.25rem;border:.5px solid var(--border)}
.verb-studied-bar span{font-size:12px;color:var(--pn-text-secondary);flex:1}
/* Section labels */
.section-label{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--pn-text-secondary);margin:1.75rem 0 .75rem;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:.5px;background:var(--border)}
.tag{display:inline-block;font-size:10px;padding:1px 7px;border-radius:99px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.tag-req{background:var(--red-l);color:var(--red)}
.tag-core{background:var(--blue-l);color:var(--blue)}
/* Kana */
.kana-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;margin-bottom:.5rem}
.kana-table{display:grid;grid-template-columns:26px repeat(5,1fr);gap:5px;margin-bottom:1.5rem}
.kana-col-hdr{text-align:center;font-size:12px;font-weight:700;color:var(--pn-accent);padding:3px 0;letter-spacing:.03em}
.kana-row-lbl{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pn-text-secondary);background:var(--paper2);border-radius:6px;min-height:52px}
.kana-cell-empty{border-radius:8px;background:var(--paper2);opacity:.4}
.kana-cell{background:var(--paper);border:.5px solid var(--border);border-radius:8px;padding:10px 6px 8px;text-align:center;cursor:pointer;transition:transform .1s,box-shadow .1s,border-color .1s;user-select:none}
.kana-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(0,0,0,.18)}
.kana-cell:active{transform:scale(.95)}
.kana-cell.playing{background:var(--red-l);border-color:var(--red)}
.kana-jp{font-family:'Noto Sans JP',sans-serif;font-size:22px;color:var(--pn-text-primary);display:block;line-height:1.2}
.kana-rom{font-size:10px;color:var(--pn-text-secondary);display:block;margin-top:4px}
/* Kanji */
.kanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.kanji-card{background:var(--paper);border:.5px solid var(--border);border-radius:10px;padding:14px 10px 10px;text-align:center;cursor:pointer;transition:transform .1s,box-shadow .1s;user-select:none;position:relative}
.kanji-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kanji-card:active{transform:scale(.97)}
.kanji-card.playing{background:var(--red-l);border-color:var(--red)}
.kanji-card.k-known{border-color:var(--green);border-width:1.5px}
.kanji-known-btn{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);background:var(--paper);cursor:pointer;font-size:9px;color:var(--pn-text-secondary);padding:0;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:1;line-height:1}
.kanji-known-btn:hover{border-color:var(--green);color:var(--green)}
.kanji-known-btn.known{background:var(--green);border-color:var(--green);color:#fff}
.vocab-known-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);background:transparent;cursor:pointer;font-size:11px;color:var(--pn-text-secondary);padding:0;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;vertical-align:middle}
.vocab-known-btn:hover{border-color:var(--green);color:var(--green)}
.vocab-known-btn.known{background:var(--green);border-color:var(--green);color:#fff}
.prog-breakdown-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--border);font-size:13px}
.prog-breakdown-row:last-child{border-bottom:none}
.prog-breakdown-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-breakdown-count{font-size:12px;color:var(--ink2);white-space:nowrap}
.prog-breakdown-bar{width:80px;height:5px;background:var(--border);border-radius:99px;overflow:hidden;flex-shrink:0}
.prog-breakdown-fill{height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.prog-mark-all-btn{font-size:11px;padding:2px 8px;border-radius:5px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--ink2);white-space:nowrap}
.prog-mark-all-btn:hover{background:var(--green);border-color:var(--green);color:#fff}
.kanji-char{font-family:'Noto Serif JP',serif;font-size:32px;color:var(--pn-text-primary);display:block;line-height:1.1}
.kanji-read{font-size:10px;color:var(--pn-accent);display:block;margin-top:5px;font-family:'Noto Sans JP',sans-serif}
.kanji-mean{font-size:11px;color:var(--ink2);display:block;margin-top:3px}
/* Vocab */
.vocab-section-card{background:var(--paper);border:.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:1rem}
.vocab-table{width:100%;border-collapse:collapse;table-layout:fixed}
.vocab-table td:first-child,.vocab-table th:first-child{width:32px;text-align:center}
.vocab-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--pn-text-secondary);font-weight:500;padding:8px 12px;border-bottom:.5px solid var(--border);text-align:left}
.vocab-table td{padding:9px 12px;border-bottom:.5px solid var(--border);vertical-align:middle}
.vocab-table tr:last-child td{border-bottom:none}
.vocab-table tr:hover td{background:var(--paper2)}
.vocab-jp{font-family:'Noto Sans JP',sans-serif;font-size:16px;color:var(--pn-text-primary);cursor:pointer}
.vocab-jp:hover{color:var(--red)}
.vocab-read{font-size:13px;color:var(--pn-text-secondary)}
.vocab-en{font-size:14px;color:var(--pn-text-primary)}
.vocab-cat{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:500;display:inline-block}
.cat-v{background:var(--blue-l);color:var(--blue)}
.cat-n{background:var(--paper3);color:var(--ink2)}
.cat-adj{background:var(--green-l);color:var(--green)}
.cat-g{background:var(--gold-l);color:var(--gold)}
/* Grammar */
.grammar-item{border-left:3px solid var(--pn-border-accent,rgba(233,69,96,.4));padding:0;margin-bottom:.55rem;background:var(--paper);border-radius:0 8px 8px 0;border:.5px solid var(--border);overflow:hidden}
.grammar-item.important{border-left-color:var(--red)}
.gram-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:.55rem 1rem;cursor:pointer;user-select:none;min-height:36px}
.gram-header:hover{background:var(--paper2)}
.gram-chevron{font-size:10px;color:var(--pn-text-secondary);transition:transform .2s;flex-shrink:0;margin-left:auto}
.grammar-item.gram-open .gram-chevron{transform:rotate(90deg)}
.gram-body{display:none;padding:.1rem 1rem .75rem}
.grammar-item.gram-open .gram-body{display:block}
.grammar-pattern{font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:500;color:var(--pn-text-primary)}
.grammar-meaning{font-size:13px;color:var(--pn-text-secondary);margin:4px 0}
.grammar-ex{font-size:13px;color:var(--pn-text-primary);font-family:'Noto Sans JP',sans-serif;cursor:pointer}
.grammar-ex:hover{color:var(--red)}
.grammar-ex .en{color:var(--pn-text-secondary);font-family:'DM Sans',sans-serif;font-style:italic;margin-left:4px}
/* ── Edit mode ── */
.edit-mode-btn{background:transparent;border:.5px solid var(--border);border-radius:6px;color:var(--pn-text-secondary);cursor:pointer;font-size:12px;padding:3px 8px;display:flex;align-items:center;gap:4px;transition:color .15s,border-color .15s}
.edit-mode-btn:hover{color:var(--pn-text-primary);border-color:var(--pn-accent)}
.edit-mode-btn.active{background:var(--pn-accent-dim);border-color:var(--pn-accent);color:var(--pn-accent)}
.ge-card-btn{display:none;margin-top:.55rem;font-size:11px;padding:3px 10px;border:.5px solid var(--border);border-radius:5px;background:var(--paper2);color:var(--pn-text-secondary);cursor:pointer;transition:color .15s,border-color .15s}
.ge-card-btn:hover{color:var(--pn-accent);border-color:var(--pn-accent)}
body.pn-edit-mode .ge-card-btn{display:inline-flex;align-items:center;gap:4px}
body.pn-edit-mode .grammar-item{border-left-color:var(--pn-accent) !important;cursor:default}
.ge-edited-badge{font-size:10px;padding:1px 6px;border-radius:99px;background:var(--pn-accent-dim);color:var(--pn-accent);font-weight:500;margin-left:6px}
/* Edit modal */
.ge-modal{max-width:680px !important;max-height:88vh;overflow-y:auto}
.ge-modal-hdr{font-size:13px;font-weight:600;color:var(--pn-text-primary);margin-bottom:1.1rem;padding-right:2rem;line-height:1.4}
.ge-modal-hdr span{color:var(--pn-accent);font-family:'Noto Sans JP',sans-serif}
.ge-section{margin-bottom:1.1rem}
.ge-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pn-text-secondary);margin-bottom:.4rem;display:flex;align-items:center;gap:8px}
.ge-label label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pn-text-secondary);display:flex;align-items:center;gap:6px;cursor:pointer}
.ge-textarea{width:100%;background:var(--paper2);border:.5px solid var(--border);border-radius:6px;color:var(--pn-text-primary);font-size:12.5px;font-family:'DM Sans',sans-serif;padding:.55rem .75rem;resize:vertical;line-height:1.6;box-sizing:border-box}
.ge-textarea:focus{outline:none;border-color:var(--pn-accent)}
.ge-input-full{width:100%;background:var(--paper2);border:.5px solid var(--border);border-radius:6px;color:var(--pn-text-primary);font-size:12.5px;padding:.45rem .75rem;margin-bottom:.4rem;box-sizing:border-box}
.ge-input-full:focus{outline:none;border-color:var(--pn-accent)}
.ge-row{display:flex;gap:6px;margin-bottom:5px;align-items:center}
.ge-row input{background:var(--paper2);border:.5px solid var(--border);border-radius:5px;color:var(--pn-text-primary);font-size:12px;padding:.35rem .6rem;flex:1;min-width:0}
.ge-row input:focus{outline:none;border-color:var(--pn-accent)}
.ge-row .ge-input-jp{font-family:'Noto Sans JP',sans-serif;flex:1.2}
.ge-add-btn{font-size:11px;padding:2px 8px;border:.5px solid var(--border);border-radius:5px;background:var(--paper2);color:var(--pn-text-secondary);cursor:pointer}
.ge-add-btn:hover{border-color:var(--pn-accent);color:var(--pn-accent)}
.ge-remove-btn{width:22px;height:22px;flex-shrink:0;border:.5px solid var(--border);border-radius:4px;background:transparent;color:var(--pn-text-tertiary);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.ge-remove-btn:hover{border-color:var(--red);color:var(--red)}
.ge-subhead{background:var(--paper2);border-radius:5px;padding:.3rem .65rem;font-size:11.5px;color:var(--pn-text-secondary);margin-bottom:.5rem}
.ge-footer{display:flex;justify-content:space-between;align-items:center;border-top:.5px solid var(--border);padding-top:.85rem;margin-top:.5rem;gap:8px;flex-wrap:wrap}
.ge-btn{font-size:12px;padding:5px 14px;border-radius:6px;cursor:pointer;border:.5px solid var(--border)}
.ge-btn-save{background:var(--pn-accent);border-color:var(--pn-accent);color:#fff;font-weight:600}
.ge-btn-save:hover{background:var(--pn-accent-hover)}
.ge-btn-reset{background:transparent;color:var(--pn-text-secondary)}
.ge-btn-reset:hover{border-color:var(--red);color:var(--red)}
.ge-rte-wrap{border:.5px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:.4rem;transition:border-color .15s}
.ge-rte-wrap:focus-within{border-color:var(--pn-accent)}
.ge-rte-toolbar{display:flex;gap:3px;padding:.28rem .45rem;background:var(--paper);border-bottom:.5px solid var(--border);align-items:center}
.ge-rte-btn{padding:1px 8px 2px;border:.5px solid transparent;border-radius:3px;background:transparent;color:var(--pn-text-primary);font-size:13px;cursor:pointer;line-height:1.5;min-width:26px;text-align:center;font-family:inherit}
.ge-rte-btn:hover{background:var(--paper2);border-color:var(--border)}
.ge-rte-sep{width:1px;background:var(--border);margin:2px 5px;align-self:stretch;flex-shrink:0}
.ge-rte{background:var(--paper2);color:var(--pn-text-primary);font-size:12.5px;font-family:'DM Sans',sans-serif;padding:.55rem .75rem;line-height:1.6;outline:none;overflow-y:auto}
.ge-rte-lg{min-height:160px;max-height:280px}
.ge-rte-sm{min-height:65px;max-height:120px}
.ge-rte p{margin:.25em 0}.ge-rte p:first-child{margin-top:0}.ge-rte p:last-child{margin-bottom:0}
.ge-rte strong,.ge-rte b{font-weight:700}.ge-rte em,.ge-rte i{font-style:italic}.ge-rte u{text-decoration:underline}
#pn-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--paper2);border:.5px solid var(--border);color:var(--pn-text-primary);padding:8px 18px;border-radius:8px;font-size:13px;z-index:9999;pointer-events:none;transition:opacity .3s;opacity:0}
table.ref{width:100%;border-collapse:collapse;font-size:13px}
table.ref th{padding:8px 12px;background:var(--paper2);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--pn-text-secondary);text-align:left;border-bottom:.5px solid var(--border)}
table.ref td{padding:8px 12px;border-bottom:.5px solid var(--border)}
table.ref tr:last-child td{border-bottom:none}
table.ref td:first-child{font-family:'Noto Sans JP',sans-serif;font-size:16px;color:var(--red);font-weight:500}
table.ref td b{color:var(--red);font-weight:500}
/* Numbers */
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:7px}
.num-cell{background:var(--paper);border:.5px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center;cursor:pointer;transition:transform .1s,box-shadow .1s;user-select:none}
.num-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.num-cell:active{transform:scale(.96)}
.num-cell.playing{background:var(--red-l);border-color:var(--red)}
.num-jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);display:block}
.num-kana{font-family:'Noto Sans JP',sans-serif;font-size:11px;color:var(--pn-text-secondary);display:block;margin-top:2px}
.num-rom{font-size:10px;color:var(--pn-text-secondary);display:block;margin-top:2px}
.counter-wrap{display:flex;flex-wrap:wrap;gap:7px}
.counter-pill{background:var(--paper);border:.5px solid var(--border);border-radius:99px;padding:6px 14px;font-size:13px;color:var(--pn-text-primary);cursor:pointer}
.counter-pill:hover{background:var(--paper2)}
.counter-pill b{color:var(--blue);font-weight:500}
/* Counter detail tables */
.cdt-card{background:var(--paper2);border:.5px solid var(--border);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem}
.cdt-hdr{display:flex;align-items:center;gap:.85rem;margin-bottom:.4rem}
.cdt-kanji{font-family:'Noto Serif JP',serif;font-size:32px;font-weight:700;color:var(--pn-accent);line-height:1;flex-shrink:0}
.cdt-label{font-size:14px;font-weight:600;color:var(--pn-text-primary)}
.cdt-kana{font-size:12px;color:var(--pn-text-secondary);margin-top:1px}
.cdt-note{font-size:12.5px;color:var(--pn-text-secondary);line-height:1.55;margin-bottom:.75rem}
.cdt-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:5px}
.cdt-rows-wide{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.cdt-row{display:flex;flex-direction:column;gap:2px;padding:6px 9px;border-radius:7px;cursor:pointer;border:.5px solid var(--border);background:var(--paper);transition:background .1s}
.cdt-row:hover{background:var(--paper2)}
.cdt-irr{border-color:var(--pn-accent);background:color-mix(in srgb,var(--pn-accent) 7%,var(--paper))}
.cdt-num{font-family:'Noto Sans JP',sans-serif;font-size:13.5px;font-weight:600;color:var(--pn-text-primary)}
.cdt-reading{font-size:11.5px;color:var(--pn-text-secondary)}
.cdt-star{font-size:9px;color:var(--pn-accent);font-weight:700}
/* Ordinals */
.ord-card{background:var(--paper2);border:.5px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.85rem}
.ord-hdr{display:flex;align-items:baseline;gap:.65rem;margin-bottom:.35rem;flex-wrap:wrap}
.ord-marker{font-family:'Noto Sans JP',sans-serif;font-size:18px;font-weight:700;color:var(--pn-accent)}
.ord-kana{font-size:12px;color:var(--pn-text-secondary)}
.ord-meaning{font-size:13px;color:var(--pn-text-primary);font-weight:500}
.ord-note{font-size:12.5px;color:var(--pn-text-secondary);line-height:1.55;margin-bottom:.7rem}
.ord-examples{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px}
.ord-ex{display:flex;flex-direction:column;gap:2px;padding:6px 9px;border-radius:7px;background:var(--paper);border:.5px solid var(--border);cursor:pointer;transition:background .1s}
.ord-ex:hover{background:var(--pn-bg-elevated)}
.ord-ex-jp{font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:600;color:var(--pn-text-primary)}
.ord-ex-kana{font-size:11.5px;color:var(--pn-text-secondary)}
.ord-ex-en{font-size:11px;color:var(--pn-text-tertiary);font-style:italic}
/* Quantity modifiers */
.qty-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-bottom:1rem}
.qty-card{background:var(--paper2);border:.5px solid var(--border);border-radius:10px;padding:.9rem 1.1rem}
.qty-word{font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;color:var(--pn-accent);margin-bottom:2px}
.qty-meaning{font-size:13px;font-weight:600;color:var(--pn-text-primary);margin-bottom:.5rem}
.qty-ex{display:flex;flex-direction:column;gap:2px;cursor:pointer;padding:5px 8px;border-radius:6px;background:var(--paper);border:.5px solid var(--border);margin-bottom:.5rem;transition:background .1s}
.qty-ex:hover{background:var(--pn-bg-elevated)}
.qty-ex-jp{font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:600}
.qty-ex-kana{font-size:11.5px;color:var(--pn-text-secondary)}
.qty-ex-en{font-size:11px;color:var(--pn-text-tertiary);font-style:italic}
.qty-note{font-size:11.5px;color:var(--pn-text-tertiary);line-height:1.5}
/* Reading */
.reading-card{background:var(--paper);border:.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.reading-header{background:var(--paper2);padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid var(--border);gap:10px;flex-wrap:wrap}
.reading-header .title{font-size:14px;font-weight:500;color:var(--pn-text-primary)}
.reading-header .level{font-size:10px;padding:2px 8px;border-radius:99px;background:var(--red-l);color:var(--red);font-weight:500;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.reading-body{padding:1.25rem}
.reading-text{font-family:'Noto Sans JP',sans-serif;font-size:15px;line-height:2.4;color:var(--pn-text-primary);margin-bottom:1.25rem;background:var(--paper);padding:1rem 1.25rem;border-radius:8px;border:.5px solid var(--border)}
.reading-text p{margin-bottom:.4rem}
.reading-text rt{font-size:10px;color:var(--pn-text-secondary)}
rt.furi{font-size:10px;color:var(--pn-text-secondary)}
.vocab-table td{line-height:2.2}
.reading-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem}
.btn{padding:7px 14px;border-radius:7px;border:.5px solid var(--border);background:var(--paper);font-size:12px;font-family:'DM Sans',sans-serif;color:var(--pn-text-primary);cursor:pointer;font-weight:500;transition:background .15s,transform .1s}
.btn:hover{background:var(--paper2)}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:#a93226}
.reading-qa{margin-top:1rem}
.qa-label{font-size:12px;font-weight:500;color:var(--pn-text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.08em}
.qa-item{margin-bottom:.85rem}
.qa-q{font-size:13px;font-weight:500;color:var(--pn-text-primary);margin-bottom:6px;font-family:'Noto Sans JP',sans-serif}
.qa-q .qnum{color:var(--pn-text-secondary);margin-right:6px;font-family:'DM Sans',sans-serif}
.qa-options{display:flex;flex-direction:column;gap:5px}
.qa-opt{padding:7px 12px;border-radius:7px;border:.5px solid var(--border);background:var(--paper);font-size:13px;font-family:'Noto Sans JP',sans-serif;cursor:pointer;transition:background .15s;text-align:left;color:var(--pn-text-primary)}
.qa-opt:hover:not(:disabled){background:var(--paper2)}
.qa-opt.correct{background:rgba(0,201,167,.18);border-color:var(--green);color:var(--pn-text-primary);border-left:3px solid var(--green)}
.qa-opt.wrong{background:rgba(233,69,96,.18);border-color:var(--red);color:var(--pn-text-primary);border-left:3px solid var(--red)}
.qa-opt:disabled{cursor:default}
.qa-feedback{font-size:12px;margin-top:4px;padding:5px 10px;border-radius:6px;display:none}
.qa-feedback.show{display:block}
.qa-feedback.ok{background:rgba(0,201,167,.18);color:var(--pn-text-primary);border-left:3px solid var(--green);padding-left:8px}
.qa-feedback.bad{background:rgba(233,69,96,.18);color:var(--pn-text-primary);border-left:3px solid var(--red);padding-left:8px}
/* Furigana toggle */
.furigana-toggle-wrap{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
.toggle-label{font-size:13px;color:var(--ink2)}
.toggle{width:38px;height:22px;background:var(--paper3);border-radius:99px;position:relative;cursor:pointer;border:.5px solid var(--border);transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--red)}
.toggle::after{content:'';width:16px;height:16px;background:var(--paper);border-radius:50%;position:absolute;top:2px;left:2px;transition:left .2s}
.toggle.on::after{left:18px}
.audio-hint{font-size:11px;color:var(--pn-text-secondary);margin-bottom:1rem;display:flex;align-items:center;gap:5px}
.audio-hint::before{content:'🔊';font-size:13px}
.table-wrap{overflow-x:auto}

/* ===== SCENARIO TAB ===== */
.scenario-card{background:var(--paper);border:.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.scenario-header{padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.scenario-title{font-size:15px;font-weight:500;color:var(--pn-text-primary)}
.scenario-subtitle{font-size:12px;color:var(--pn-text-secondary);margin-top:2px}
.scenario-tag{font-size:10px;padding:3px 10px;border-radius:99px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.st-restaurant{background:#fef3e2;color:#b45309}
.st-transport{background:var(--blue-l);color:var(--blue)}
.st-shopping{background:var(--purple-l);color:var(--purple)}
.st-social{background:var(--green-l);color:var(--green)}
.st-hotel{background:var(--teal-l);color:var(--teal)}
.st-school{background:var(--red-l);color:var(--red)}
.scenario-body{border-top:.5px solid var(--border)}
.dialogue-area{padding:1rem 1.25rem;background:var(--paper)}
.dialogue-line{display:flex;gap:10px;margin-bottom:.75rem;align-items:flex-start}
.dialogue-line.right{flex-direction:row-reverse}
.speaker-tag{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--pn-text-secondary);white-space:nowrap;padding-top:4px;min-width:50px}
.dialogue-line.right .speaker-tag{text-align:right}
.bubble{background:var(--paper);border:.5px solid var(--border);border-radius:10px;padding:.6rem .9rem;font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:1.9;cursor:pointer;transition:background .15s;max-width:75%}
.bubble:hover{background:var(--paper2)}
.bubble rt{font-size:9px;color:var(--pn-text-secondary)}
.bubble .en-sub{font-size:11px;color:var(--pn-text-secondary);font-family:'DM Sans',sans-serif;margin-top:3px;display:block;font-style:italic}
.bubble.right-bubble{background:rgba(124,111,239,0.12);border-color:rgba(124,111,239,0.25)}
.scenario-controls{padding:.75rem 1.25rem;border-top:.5px solid var(--border);display:flex;gap:8px;flex-wrap:wrap}
.vocab-highlight{display:flex;flex-wrap:wrap;gap:6px;padding:.75rem 1.25rem;border-top:.5px solid var(--border);background:var(--paper2)}
.vh-item{font-size:12px;background:var(--paper);border:.5px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer}
.vh-item:hover{background:var(--paper)}
.vh-item span{font-family:'Noto Sans JP',sans-serif;color:var(--blue)}
.vh-item em{color:var(--pn-text-secondary);font-style:normal;margin-left:5px;font-size:11px}

/* ===== PROGRESS TRACKER ===== */
.progress-section{margin-bottom:2rem}
.progress-intro{font-size:14px;color:var(--ink2);margin-bottom:1.5rem;line-height:1.7}
.progress-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:1.75rem}
.progress-card{background:var(--paper);border:.5px solid var(--border);border-radius:10px;padding:1rem 1.1rem}
.progress-card-title{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--pn-text-secondary);margin-bottom:.6rem;display:flex;align-items:center;justify-content:space-between}
.progress-card-title span{font-size:18px;font-weight:500;color:var(--pn-text-primary);text-transform:none;letter-spacing:0}
.prog-bar-wrap{height:6px;background:var(--paper3);border-radius:99px;overflow:hidden;margin-bottom:.4rem}
.prog-bar{height:100%;border-radius:99px;transition:width .5s ease}
.prog-bar.blue{background:var(--blue)}
.prog-bar.red{background:var(--red)}
.prog-bar.green{background:var(--green)}
.prog-bar.gold{background:var(--gold)}
.prog-bar.purple{background:var(--purple)}
.prog-bar.teal{background:var(--teal)}
.prog-bar.orange{background:#d97706}
.prog-detail{font-size:11px;color:var(--pn-text-secondary)}
/* Checklist */
.checklist{background:var(--paper);border:.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:1rem}
.checklist-header{padding:.7rem 1rem;background:var(--paper2);font-size:12px;font-weight:500;color:var(--ink2);border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.checklist-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0}
.check-item{display:flex;align-items:center;gap:8px;padding:.55rem 1rem;border-bottom:.5px solid var(--border);cursor:pointer;transition:background .1s;font-size:13px}
.check-item:hover{background:var(--paper2)}
.check-item:last-child,.checklist-items .check-item:last-child{border-bottom:none}
.check-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;font-size:10px}
.check-item.done .check-box{background:var(--green);border-color:var(--green);color:#fff}
.check-item .jp{font-family:'Noto Sans JP',sans-serif;color:var(--blue);font-size:14px}
.check-item .en{color:var(--ink2)}
/* Overall score ring */
.score-ring-wrap{display:flex;align-items:center;gap:1.5rem;background:var(--paper);border:.5px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.score-ring{position:relative;width:80px;height:80px;flex-shrink:0}
.score-ring svg{transform:rotate(-90deg)}
.score-ring-bg{fill:none;stroke:var(--paper3);stroke-width:7}
.score-ring-fill{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.score-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring-text .pct{font-size:20px;font-weight:500;color:var(--pn-text-primary)}
.score-ring-text .lbl{font-size:9px;color:var(--pn-text-secondary);text-transform:uppercase;letter-spacing:.06em}
.score-info h3{font-size:17px;font-weight:500;margin-bottom:4px}
.score-info p{font-size:13px;color:var(--ink2)}
.reset-btn{margin-left:auto;font-size:12px;padding:6px 12px;border-radius:6px;border:.5px solid var(--border);background:var(--paper);cursor:pointer;color:var(--pn-text-secondary);font-family:'DM Sans',sans-serif;transition:color .15s}
.reset-btn:hover{color:var(--red);border-color:var(--red)}
/* streak */
.streak-row{display:flex;gap:6px;margin-bottom:1.5rem;flex-wrap:wrap}
.streak-day{width:32px;height:32px;border-radius:6px;border:.5px solid var(--border);background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--pn-text-secondary);cursor:pointer;transition:background .15s;flex-direction:column;gap:1px}
.streak-day.studied{background:var(--green);border-color:var(--green);color:#fff}
.streak-day.today{border-color:var(--red);color:var(--red)}
.streak-day.today.studied{background:var(--red);border-color:var(--red);color:#fff}
.streak-day span{font-size:8px;opacity:.7}
/* ===== VERB TAB ===== */
.verb-sub-tabs{display:flex;gap:0;margin-bottom:1.5rem;border-bottom:.5px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.verb-sub-tabs::-webkit-scrollbar{display:none}
.vsub{padding:9px 16px;font-size:13px;font-weight:400;color:var(--pn-text-secondary);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:'DM Sans',sans-serif;transition:color .15s;white-space:nowrap}
.vsub:hover{color:var(--pn-text-primary)}
.vsub.active{color:var(--pn-text-primary);border-bottom-color:var(--red);font-weight:500}
.vsub-section{display:none}
.vsub-section.visible{display:block}
.group-card{background:var(--paper);border:.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.group-header{padding:.85rem 1.25rem;background:var(--paper2);border-bottom:.5px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.group-title{font-size:15px;font-weight:500;color:var(--pn-text-primary)}
.group-jp{font-family:'Noto Serif JP',serif;font-size:20px;color:var(--red)}
.group-desc{font-size:12px;color:var(--pn-text-secondary);margin-top:3px;max-width:480px}
.conj-body{padding:1.1rem 1.25rem}
.rule-box{background:var(--blue-l);border-radius:8px;padding:.7rem 1rem;font-size:13px;color:var(--blue);margin-bottom:.85rem;line-height:1.7}
.rule-box strong{font-weight:500}
.rule-box code{background:rgba(33,86,165,.15);padding:1px 5px;border-radius:4px;font-family:monospace;font-size:12px}
.verb-example-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:7px;margin-bottom:1rem}
.verb-ex-card{background:var(--paper2);border:.5px solid var(--border);border-radius:8px;padding:.65rem .85rem;cursor:pointer;transition:background .15s}
.verb-ex-card:hover{background:var(--paper3)}
.verb-ex-card.playing{background:var(--red-l);border-color:var(--red)}
.verb-ex-dict{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);display:block}
.verb-ex-rom{font-size:10px;color:var(--pn-text-secondary);display:block;margin-top:2px}
.verb-ex-en{font-size:11px;color:var(--ink2);display:block;margin-top:1px}
.conj-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:.5rem}
.conj-table th{padding:7px 10px;background:var(--paper2);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--pn-text-secondary);text-align:left;border-bottom:.5px solid var(--border)}
.conj-table td{padding:8px 10px;border-bottom:.5px solid var(--border);vertical-align:middle}
.conj-table tr:last-child td{border-bottom:none}
.conj-table td:first-child{color:var(--pn-text-secondary);font-size:12px;white-space:nowrap;width:130px}
.conj-table td.jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);cursor:pointer}
.conj-table td.jp:hover{color:var(--red)}
.conj-table td.rom{color:var(--pn-text-secondary);font-size:12px}
.conj-table td.en{color:var(--ink2);font-size:13px}
/* Pack verb list */
.pv-controls{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.pv-search{flex:1;min-width:160px;padding:8px 12px;border:.5px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);font-size:13px;font-family:'DM Sans',sans-serif}
.pv-search:focus{outline:none;border-color:var(--pn-accent)}
.pv-group-filter{display:flex;gap:.35rem;flex-wrap:wrap}
.pv-filter-btn{padding:5px 12px;border-radius:20px;border:.5px solid var(--border);background:var(--paper);color:var(--pn-text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
.pv-filter-btn.active{background:var(--pn-accent);border-color:var(--pn-accent);color:#fff}
.pv-tbl{width:100%;border-collapse:collapse}
.pv-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--pn-text-secondary);font-weight:500;padding:8px 10px;border-bottom:.5px solid var(--border);text-align:left;background:var(--paper2)}
.pv-tbl td{padding:9px 10px;border-bottom:.5px solid var(--border);vertical-align:middle}
.pv-tbl tr:last-child td{border-bottom:none}
.pv-tbl tr:hover td{background:var(--paper2)}
.pv-tbl td.pv-word{font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:500;color:var(--pn-text-primary)}
.pv-tbl td.pv-read{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:var(--pn-text-secondary)}
.pv-tbl td.pv-mean{font-size:13px;color:var(--ink2);word-break:break-word;max-width:300px}
.ex-sentence{margin-top:1rem;padding:1rem 1.1rem;border-radius:8px;background:var(--paper2);border:.5px solid var(--border)}
.ex-jp{font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.7;color:var(--pn-text-primary);margin:0 0 .5rem}
.ex-en{font-size:13px;line-height:1.5;color:var(--pn-text-secondary);font-style:italic;margin:0}
.vocab-ex-btn{padding:4px 10px;border-radius:6px;border:.5px solid var(--border);background:transparent;color:var(--pn-text-secondary);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}
.vocab-ex-btn:hover{border-color:var(--pn-accent);color:var(--pn-accent);background:rgba(99,102,241,.07)}
.pv-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;letter-spacing:.04em;white-space:nowrap}
.pv-g1{background:rgba(99,102,241,.15);color:#6366f1}
.pv-g2{background:rgba(34,197,94,.13);color:#16a34a}
.pv-g3{background:rgba(239,68,68,.13);color:#dc2626}
html[data-theme="light"] .pv-g1{background:rgba(99,102,241,.12)}
html[data-theme="light"] .pv-g2{background:rgba(21,128,61,.1)}
html[data-theme="light"] .pv-g3{background:rgba(185,28,28,.1)}
.pv-conj-btn{padding:4px 10px;border-radius:6px;border:.5px solid var(--border);background:transparent;color:var(--pn-text-secondary);font-size:11px;cursor:pointer;transition:all .15s}
.pv-conj-btn:hover{border-color:var(--pn-accent);color:var(--pn-accent);background:rgba(99,102,241,.07)}
.pv-verb-edit-btn{display:none;margin-left:4px}
body.pn-edit-mode .pv-verb-edit-btn{display:inline}
.pv-empty{color:var(--pn-text-secondary);font-size:13px;padding:2rem;text-align:center}
/* Conjugation modal */
.cj-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:1000;align-items:flex-start;justify-content:center;padding:5vh 1rem;overflow-y:auto}
.cj-overlay.open{display:flex}
.cj-modal{background:var(--paper);border:.5px solid var(--border);border-radius:14px;padding:1.5rem;max-width:580px;width:100%;position:relative;flex-shrink:0}
.cj-close{position:absolute;top:.85rem;right:.85rem;width:32px;height:32px;border-radius:50%;border:.5px solid var(--border);background:var(--paper2);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--ink2);z-index:10}
.cj-close:hover{border-color:var(--red);color:var(--red)}
.cj-verb{font-family:'Noto Sans JP',sans-serif;font-size:30px;font-weight:600;color:var(--red);cursor:pointer}
.cj-verb:hover{opacity:.8}
.cj-read{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:var(--pn-text-secondary);margin:.15rem 0 .1rem}
.cj-mean{font-size:13px;color:var(--ink2);margin-bottom:.75rem}
.cj-group-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding:.6rem .9rem;border-radius:8px;background:var(--paper2);border:.5px solid var(--border)}
.cj-group-name{font-size:13px;font-weight:500;color:var(--pn-text-primary)}
.cj-group-note{font-size:12px;color:var(--pn-text-secondary)}
.cj-section-head{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-text-secondary);margin:1.1rem 0 .5rem;padding-bottom:.3rem;border-bottom:.5px solid var(--border)}
.cj-table{width:100%;border-collapse:collapse;margin-bottom:.25rem}
.cj-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--pn-text-secondary);font-weight:500;padding:6px 10px;background:var(--paper2);border-bottom:.5px solid var(--border);text-align:left}
.cj-table td{padding:8px 10px;border-bottom:.5px solid var(--border);vertical-align:middle;font-size:13px}
.cj-table tr:last-child td{border-bottom:none}
.cj-table td:first-child{color:var(--pn-text-secondary);font-size:12px;width:140px}
.cj-table td.cj-jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);cursor:pointer}
.cj-table td.cj-jp:hover{color:var(--red)}
.cj-table td.cj-jp2{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-secondary);cursor:pointer}
.cj-table td.cj-jp2:hover{color:var(--red)}
/* Te-form mnemonic */
.te-mnemonic{background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(245,158,11,.05));border:.5px solid rgba(251,191,36,.35);border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.25rem}
.te-mnemonic-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(217,119,6,1);margin-bottom:.6rem}
.te-mnemonic-lines{display:flex;flex-direction:column;gap:.35rem}
.te-mnemonic-line{display:flex;align-items:center;gap:.75rem;font-family:'Noto Sans JP',sans-serif;font-size:18px;line-height:1.4}
.te-mnemonic-kana{color:var(--pn-text-primary);font-weight:500;letter-spacing:.1em}
.te-mnemonic-arrow{color:var(--pn-text-secondary);font-size:13px;flex-shrink:0}
.te-mnemonic-result{color:rgba(217,119,6,1);font-weight:700}
.te-mnemonic-note{font-size:11px;color:var(--pn-text-secondary);margin-top:.6rem;font-family:inherit}
/* Scenes tab */
.scene-card{background:var(--paper);border:.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1rem}
.scene-card-header{padding:1rem 1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;user-select:none}
.scene-card-titles{flex:1}
.scene-card-title{font-size:15px;font-weight:600;color:var(--pn-text-primary)}
.scene-card-sub{font-size:12px;color:var(--pn-text-secondary);font-family:'Noto Sans JP',sans-serif;margin-top:.1rem}
.scene-card-arrow{font-size:11px;color:var(--pn-text-secondary);transition:transform .2s;flex-shrink:0}
.scene-card.open .scene-card-arrow{transform:rotate(180deg)}
.scene-card-body{display:none;padding:0 1.3rem 1.3rem;border-top:.5px solid var(--border)}
.scene-card.open .scene-card-body{display:block}
.scene-sec-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-text-secondary);margin:1rem 0 .5rem}
.scene-vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.45rem;margin-bottom:.25rem}
.scene-vocab-item{background:var(--paper2);border:.5px solid var(--border);border-radius:8px;padding:.5rem .7rem;cursor:pointer;transition:border-color .15s}
.scene-vocab-item:hover{border-color:var(--pn-accent)}
.scene-vocab-jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);display:block}
.scene-vocab-en{font-size:11.5px;color:var(--ink2);display:block;margin-top:.15rem}
.scene-grammar-box{background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(99,102,241,.03));border:.5px solid rgba(99,102,241,.3);border-radius:8px;padding:.85rem 1rem;margin:.75rem 0}
.scene-grammar-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-accent);margin-bottom:.35rem}
.scene-grammar-text{font-size:13px;color:var(--pn-text-primary);font-family:'Noto Sans JP',sans-serif;line-height:1.7}
.scene-grammar-link{display:inline-block;margin-top:.4rem;font-size:11px;color:var(--pn-accent);cursor:pointer;text-decoration:underline}
.scene-grammar-link:hover{opacity:.7}
.scene-examples{display:flex;flex-direction:column;gap:.45rem}
.scene-ex{background:var(--paper2);border-radius:8px;padding:.65rem .9rem;cursor:pointer;transition:opacity .15s}
.scene-ex:hover{opacity:.8}
.scene-ex-jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);display:block;line-height:1.6}
.scene-ex-en{font-size:12px;color:var(--pn-text-secondary);font-style:italic;display:block;margin-top:.1rem}
.scene-dialogue{display:flex;flex-direction:column;gap:.55rem}
.scene-turn{display:flex;gap:.7rem;align-items:flex-start}
.scene-speaker{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:.25rem}
.scene-speaker-a{background:rgba(99,102,241,.15);color:var(--pn-accent)}
.scene-speaker-b{background:rgba(239,68,68,.12);color:var(--red)}
.scene-turn-jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--pn-text-primary);cursor:pointer;line-height:1.6}
.scene-turn-jp:hover{opacity:.8}
.scene-turn-en{font-size:12px;color:var(--pn-text-secondary);font-style:italic;margin-top:.1rem}
/* Scene sub-tab navigation */
.scene-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:.5px solid var(--border);margin:0 -1.3rem .25rem;padding:0 1.3rem}
.scene-tab{padding:8px 13px;font-size:12px;font-weight:400;color:var(--pn-text-secondary);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:color .15s;flex-shrink:0}
.scene-tab:hover{color:var(--pn-text-primary)}
.scene-tab.active{color:var(--pn-accent);border-bottom-color:var(--pn-accent);font-weight:500}
.scene-tab-panel{display:none;padding-top:.75rem}
.scene-tab-panel.visible{display:block}
.svg-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-accent);margin:.85rem 0 .4rem;opacity:.8}
.svg-label:first-child{margin-top:0}
.scene-dialogue-level{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-text-secondary);margin:1rem 0 .5rem;padding-top:.75rem;border-top:.5px solid var(--border)}
.scene-dialogue-level:first-child{margin-top:0;border-top:none;padding-top:0}
/* Expanded grammar points */
.sgp{background:var(--paper2);border:.5px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.75rem}
.sgp-title{font-size:14px;font-weight:600;color:var(--pn-text-primary);font-family:'Noto Sans JP',sans-serif;margin-bottom:.5rem;cursor:pointer}
.sgp-struct{background:var(--paper);border:.5px solid rgba(99,102,241,.3);border-radius:6px;padding:.45rem .8rem;font-family:'Noto Sans JP',sans-serif;font-size:13px;color:var(--pn-accent);margin-bottom:.6rem;display:inline-block;word-break:break-all}
.sgp-forms{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .85rem;margin:.5rem 0;font-size:13px}
.sgp-fl{color:var(--pn-text-secondary);font-size:11px;align-self:center;white-space:nowrap}
.sgp-fv{font-family:'Noto Sans JP',sans-serif;color:var(--pn-text-primary);cursor:pointer;line-height:1.6}
.sgp-fv:hover{opacity:.7}
.sgp-note{font-size:12px;color:var(--pn-text-secondary);border-top:.5px solid var(--border);padding-top:.5rem;margin-top:.5rem;line-height:1.6}
.sgp-examples{margin-top:.6rem;display:flex;flex-direction:column;gap:.35rem}
/* Tofugu-style grammar article blocks */
.sgp-article{font-size:13px;line-height:1.8;color:var(--pn-text-secondary);margin:.35rem 0 .75rem}
.sgp-article strong{color:var(--pn-text-primary);font-weight:500}
.sgp-article p{margin-bottom:.6rem}
.sgp-article p:last-child{margin-bottom:0}
.sgp-nuance{background:rgba(245,166,35,.07);border:.5px solid rgba(245,166,35,.35);border-radius:8px;padding:.65rem .85rem;font-size:12.5px;line-height:1.7;color:var(--pn-text-secondary);margin:.6rem 0}
.sgp-nuance-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-gold);margin-bottom:.3rem}
.sgp-compare{background:rgba(124,111,239,.07);border:.5px solid rgba(124,111,239,.3);border-radius:8px;padding:.65rem .85rem;font-size:12.5px;line-height:1.7;color:var(--pn-text-secondary);margin:.6rem 0}
.sgp-compare-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:.3rem}
/* Cultural notes */
.sc-culture{background:linear-gradient(135deg,rgba(234,179,8,.07),rgba(234,179,8,.03));border:.5px solid rgba(234,179,8,.4);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.75rem}
.sc-culture-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(161,98,7,1);margin-bottom:.35rem}
.sc-culture-title{font-size:13.5px;font-weight:600;color:var(--pn-text-primary);margin-bottom:.35rem}
.sc-culture-text{font-size:13px;color:var(--pn-text-primary);line-height:1.7}
/* Scene quiz */
.sq{background:var(--paper2);border:.5px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.75rem}
.sq-type{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-text-secondary);margin-bottom:.4rem}
.sq-q{font-family:'Noto Sans JP',sans-serif;font-size:16px;color:var(--pn-text-primary);margin-bottom:.65rem;line-height:1.7}
.sq-hint{font-size:12px;color:var(--pn-text-secondary);margin-bottom:.6rem;font-style:italic}
.sq-opts{display:flex;flex-wrap:wrap;gap:.45rem}
.sq-opt{padding:5px 14px;border:.5px solid var(--border);border-radius:20px;background:var(--paper);font-family:'Noto Sans JP',sans-serif;font-size:14px;cursor:pointer;transition:all .15s;color:var(--pn-text-primary)}
.sq-opt:hover:not([disabled]){border-color:var(--pn-accent);background:rgba(99,102,241,.07)}
.sq-opt.ok{border-color:var(--green);background:rgba(0,201,167,.18);color:var(--pn-text-primary);border-left:3px solid var(--green);pointer-events:none}
.sq-opt.no{border-color:var(--red);background:rgba(233,69,96,.18);color:var(--pn-text-primary);border-left:3px solid var(--red);pointer-events:none}
.sq-opt.reveal{border-color:var(--green);background:rgba(0,201,167,.12);color:var(--pn-text-primary);pointer-events:none}
.sq-fb{font-size:12px;margin-top:.5rem}
.sq-fb.ok{color:var(--green)}
.sq-fb.no{color:var(--red)}
.sq-sect{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pn-text-secondary);margin:1.1rem 0 .55rem;border-top:.5px solid var(--border);padding-top:.85rem}
.sq-sect:first-child{margin-top:0;border-top:none;padding-top:0}
/* Te-form */
.te-rule-card{background:var(--paper);border:.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:1rem}
.te-rule-header{padding:.75rem 1.1rem;background:var(--paper2);border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.te-rule-title{font-size:13px;font-weight:500;color:var(--pn-text-primary)}
.te-rule-subtitle{font-size:12px;color:var(--pn-text-secondary)}
.te-arrow{font-family:'Noto Sans JP',sans-serif;font-size:12px;color:var(--red);background:var(--red-l);padding:3px 10px;border-radius:6px;white-space:nowrap}
.te-rule-body{padding:.75rem 1.1rem}
.te-word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px}
.te-word{display:flex;align-items:baseline;gap:6px;font-size:13px;padding:5px 4px;border-bottom:.5px solid var(--border)}
.te-word:last-child{border-bottom:none}
.te-word .jp{font-family:'Noto Sans JP',sans-serif;color:var(--pn-text-primary);cursor:pointer;font-size:14px}
.te-word .jp:hover{color:var(--red)}
.te-word .arr{color:var(--pn-text-secondary);font-size:10px}
.te-word .te{font-family:'Noto Sans JP',sans-serif;color:var(--red);font-size:14px;cursor:pointer}
.te-word .te:hover{opacity:.7}
.te-word .en{color:var(--pn-text-secondary);font-size:11px;margin-left:auto}
/* Verb quiz */
.quiz-wrap{background:var(--paper);border:.5px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem}
.quiz-status{display:flex;align-items:center;gap:12px;margin-bottom:1rem;font-size:13px;color:var(--ink2)}
.quiz-score-pill{background:var(--green-l);color:var(--green);padding:3px 10px;border-radius:99px;font-size:12px;font-weight:500}
.quiz-q-jp{font-family:'Noto Sans JP',sans-serif;font-size:24px;color:var(--pn-text-primary);margin-bottom:4px;cursor:pointer}
.quiz-q-jp:hover{color:var(--red)}
.quiz-q-hint{font-size:12px;color:var(--pn-text-secondary);margin-bottom:.85rem}
.quiz-opts{display:flex;flex-direction:column;gap:6px;margin-bottom:.75rem}
.quiz-opt{padding:8px 14px;border-radius:7px;border:.5px solid var(--border);background:var(--paper);font-size:14px;font-family:'Noto Sans JP',sans-serif;cursor:pointer;text-align:left;color:var(--pn-text-primary);transition:background .15s}
.quiz-opt:hover:not(:disabled){background:var(--paper2)}
.quiz-opt.correct{background:rgba(0,201,167,.18);border-color:var(--green);color:var(--pn-text-primary);border-left:3px solid var(--green)}
.quiz-opt.wrong{background:rgba(233,69,96,.18);border-color:var(--red);color:var(--pn-text-primary);border-left:3px solid var(--red)}
.quiz-opt:disabled{cursor:default}
.quiz-fb{font-size:13px;padding:6px 12px;border-radius:7px;margin-bottom:.75rem;display:none}
.quiz-fb.show{display:block}
.quiz-fb.ok{background:rgba(0,201,167,.18);color:var(--pn-text-primary);border-left:3px solid var(--green);padding-left:8px}
.quiz-fb.bad{background:rgba(233,69,96,.18);color:var(--pn-text-primary);border-left:3px solid var(--red);padding-left:8px}
/* ── SRS Flashcards ── */
.fc-rating-btn{flex:1;padding:10px 6px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .15s;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:2px}
.fc-rating-btn:hover{opacity:.82}
.fc-rating-btn:disabled{opacity:.4;cursor:default}
.fc-rating-btn small{font-size:10px;font-weight:400;opacity:.8}
.fc-again{background:#fee2e2;color:#dc2626}
.fc-hard {background:#fef3c7;color:#d97706}
.fc-good {background:#dbeafe;color:#2563eb}
.fc-easy {background:#dcfce7;color:#16a34a}
.fc-prog-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;flex:1}
.fc-prog-fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s ease}
.fc-stat-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 9px;border-radius:12px;font-family:'DM Sans',sans-serif}
/* file save/load panel */
.save-panel{background:var(--paper);border:.5px solid var(--border);border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.save-panel-info{flex:1;min-width:180px}
.save-panel-info h4{font-size:14px;font-weight:500;margin-bottom:2px}
.save-panel-info p{font-size:12px;color:var(--pn-text-secondary)}
.save-status{font-size:11px;color:var(--green);margin-top:3px;display:none}
.save-status.show{display:block}

/* ===== EXAM PRACTICE ===== */
.exam-intro-card{display:flex;align-items:flex-start;gap:1rem;background:var(--paper);border:.5px solid var(--border);border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.5rem}
.exam-intro-icon{font-size:28px;font-weight:600;color:var(--red);font-family:'DM Serif Display',serif;flex-shrink:0;line-height:1}
.exam-intro-title{font-size:15px;font-weight:500;color:var(--pn-text-primary);margin-bottom:3px}
.exam-intro-desc{font-size:13px;color:var(--ink2);line-height:1.6}
.exam-card{background:var(--paper);border:.5px solid var(--border);border-radius:10px;padding:1.1rem 1.25rem;margin-bottom:.75rem}
.exam-q-num{font-size:11px;font-weight:500;color:var(--pn-text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.exam-q-text{font-family:'Noto Sans JP',sans-serif;font-size:16px;color:var(--pn-text-primary);margin-bottom:.5rem;line-height:1.8}
.exam-q-jp{font-family:'Noto Sans JP',sans-serif;font-size:18px;color:var(--pn-text-primary);margin-bottom:.75rem;cursor:pointer;display:inline-block}
.exam-q-jp:hover{color:var(--red)}
.exam-u{text-decoration:underline;text-underline-offset:3px;color:var(--red)}
.exam-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:.5rem}
@media(max-width:480px){.exam-opts{grid-template-columns:1fr}}
.exam-opt{padding:8px 12px;border-radius:7px;border:.5px solid var(--border);background:var(--paper);font-size:14px;font-family:'Noto Sans JP',sans-serif;cursor:pointer;text-align:left;color:var(--pn-text-primary);transition:background .15s;line-height:1.5}
.exam-opt:hover:not(:disabled){background:var(--paper2)}
.exam-opt.correct{background:rgba(0,201,167,.18);border-color:var(--green);color:var(--pn-text-primary);border-left:3px solid var(--green)}
.exam-opt.wrong{background:rgba(233,69,96,.18);border-color:var(--red);color:var(--pn-text-primary);border-left:3px solid var(--red)}
.exam-opt:disabled{cursor:default}
.exam-fb{margin-top:.5rem}
.exam-fb-inner{border-radius:8px;padding:.75rem 1rem;font-size:13px;line-height:1.6}
.exam-fb-inner.ok{background:rgba(0,201,167,.18);color:var(--pn-text-primary);border-left:4px solid var(--green)}
.exam-fb-inner.bad{background:rgba(233,69,96,.18);color:var(--pn-text-primary);border-left:4px solid var(--red)}
.exam-fb-verdict{font-weight:600;margin-bottom:4px}
.exam-fb-exp{color:var(--pn-text-secondary);font-size:12px;margin-top:4px}
.exam-fb-inner.bad .exam-fb-exp{color:var(--pn-text-secondary)}
.exam-fb-inner.ok  .exam-fb-exp{color:var(--pn-text-secondary)}
.exam-exp-box{background:var(--blue-l);color:var(--blue);border-radius:7px;padding:.65rem .9rem;font-size:12px;line-height:1.6;margin-top:.5rem}
.exam-next-btn{margin-top:.5rem}
.exam-explanation{margin-top:.25rem}

/* ===== COLLAPSIBLE SECTIONS ===== */
.section-label {
  cursor: pointer;
  user-select: none;
}
.section-label:hover { opacity: 0.8; }
.section-label .collapse-icon {
  font-size: 11px;
  margin-left: 6px;
  color: var(--ink3);
  transition: transform 0.2s;
  display: inline-block;
}
.section-label.collapsed .collapse-icon {
  transform: rotate(-90deg);
}
.collapsible-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  max-height: 9999px;
  opacity: 1;
}
.collapsible-body.collapsed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}
/* Reading translation */
.reading-translation {
  display: none;
  background: var(--blue-l);
  border-radius: 8px;
  padding: .85rem 1.1rem;
  font-size: 13px;
  color: var(--blue);
  line-height: 1.9;
  margin-bottom: 1rem;
}
.reading-translation.visible { display: block; }
.reading-translation p { margin-bottom: .3rem; }
.reading-translation p:last-child { margin-bottom: 0; }
.translation-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s;
}
.translation-btn:hover { background: var(--blue-l); }
.translation-btn.active { background: var(--blue); color: #fff; }
.v-hl {
  cursor: pointer;
  position: relative;
  border-radius: 3px;
  padding: 0 2px;
}
.v-hl:hover { background: var(--paper2); }
.v-popup {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 50;
  pointer-events: none;
  color: var(--ink);
  line-height: 1.5;
}

/* Card-level collapse for reading passages and scenarios */
.reading-header, .scenario-header {
  cursor: pointer;
  user-select: none;
}
.reading-header:hover, .scenario-header:hover { opacity: 0.85; }
.reading-header::after, .scenario-header::after {
  content: ' ▾';
  font-size: 11px;
  color: var(--ink3);
  margin-left: 6px;
  transition: transform 0.2s;
  display: inline-block;
}
.reading-header.card-collapsed::after,
.scenario-header.card-collapsed::after {
  content: ' ▸';
}
.reading-body, .scenario-body {
  transition: max-height 0.35s ease, opacity 0.2s ease;
  max-height: 9999px;
  opacity: 1;
  overflow: hidden;
}
.reading-body.card-collapsed, .scenario-body.card-collapsed {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

/* ===== TAP/HOVER TOOLTIPS ===== */
.tip-wrap {
  position: relative;
  display: inline;
}
.tip-wrap .tip-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.tip-wrap .tip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.tip-wrap.active .tip-bubble,
.tip-wrap:hover .tip-bubble {
  display: block;
}
/* Kana cell tap tooltip — single fixed element on body, never clipped by overflow */
#kana-tip-global {
  display: none;
  position: fixed;
  z-index: 10000;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  min-width: 120px;
}
#kana-tip-global .kt-word {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #ffcc66;
  display: block;
}
#kana-tip-global .kt-meaning {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  display: block;
}
#kana-tip-global::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
}
#kana-tip-global.tip-above::after {
  top: 100%;
  border-top-color: var(--ink);
}
#kana-tip-global.tip-below::after {
  bottom: 100%;
  border-bottom-color: var(--ink);
}

/* Reading passage sentence translation */
.reading-text p {
  cursor: pointer;
  border-radius: 5px;
  padding: 2px 4px;
  margin: 0 -4px;
  transition: background 0.15s;
}
.reading-text p:hover,
.reading-text p.line-active { background: rgba(33,86,165,0.08); }
.line-trans {
  display: none;
  font-size: 12px;
  color: var(--blue);
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  padding: 2px 4px 6px 4px;
  line-height: 1.5;
}
.line-trans.visible { display: block; }

/* Q&A tap translation */
.qa-q, .qa-opt {
  position: relative;
}
.qa-trans-label {
  font-size: 10px;
  color: var(--ink3);
  font-family: 'DM Sans', sans-serif;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: underline dotted;
  user-select: none;
}
.qa-trans-label:hover { color: var(--blue); }
.qa-trans-reveal {
  display: none;
  font-size: 12px;
  color: var(--blue);
  font-style: italic;
  font-family: 'DM Sans', sans-serif;
  margin-top: 3px;
  padding: 3px 8px;
  background: var(--blue-l);
  border-radius: 5px;
  line-height: 1.5;
}
.qa-trans-reveal.visible { display: block; }

/* ===== SCENARIO TRANSLATION TOGGLE ===== */
.en-sub {
  transition: opacity 0.2s;
}
.scenario-card.trans-hidden .en-sub {
  display: none;
}
.scenario-card.trans-hidden .vh-item em {
  display: none;
}
.scenario-trans-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink2);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.scenario-trans-btn:hover {
  background: var(--paper2);
  border-color: var(--ink3);
  color: var(--ink);
}
.scenario-trans-btn.trans-visible-state {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.scenario-trans-btn.trans-visible-state:hover {
  background: #a93226;
}

/* ===== QUIZ SIZE SELECTOR ===== */
.quiz-size-select {
  padding: 4px 8px;
  border: .5px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  color: var(--ink2);
  cursor: pointer;
}
.quiz-size-select:focus { outline: none; border-color: var(--ink3); }
.quiz-mode-btn{padding:3px 10px;border-radius:6px;border:.5px solid var(--border);background:transparent;font-size:11px;font-family:'DM Sans',sans-serif;cursor:pointer;color:var(--pn-text-secondary);transition:background .15s,color .15s}
.quiz-mode-btn:hover{background:var(--paper2)}
.quiz-mode-btn.active{background:var(--red);color:#fff;border-color:var(--red)}
.quiz-opt-jp{font-family:'Noto Sans JP',sans-serif;font-size:16px}
.gp-practice-btn{font-size:12px;padding:4px 12px;border-radius:6px;border:.5px solid var(--border);background:var(--paper2);color:var(--pn-text-secondary);cursor:pointer;transition:background .15s,color .15s}
.gp-practice-btn:hover{background:var(--paper3);color:var(--pn-text-primary)}

/* ── Flashcard redesign ──────────────────────────────────────────────────── */
.fc-wrap{max-width:480px;margin:0 auto}
.fc-deck-tabs{display:flex;border:.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:1.5rem}
.fc-deck-tab{flex:1;padding:11px 8px;border:none;cursor:pointer;font-size:14px;font-family:'DM Sans',sans-serif;font-weight:500;background:var(--paper2);color:var(--ink2);transition:background .15s,color .15s}
.fc-deck-tab.fc-deck-active{background:var(--red);color:#fff;font-weight:600}
.fc-setup-msg{text-align:center;margin-bottom:1.5rem;font-size:15px;color:var(--ink2);min-height:1.4em}
.fc-size-section{text-align:center;margin-bottom:1.5rem}
.fc-size-label{font-size:11px;color:var(--pn-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.fc-size-pills{display:flex;gap:8px;justify-content:center}
.fc-size-pill{padding:6px 20px;border-radius:20px;border:.5px solid var(--border);background:var(--paper2);color:var(--ink2);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fc-size-pill.fc-size-active{background:var(--red);color:#fff;border-color:var(--red)}
.fc-actions{display:flex;flex-direction:column;gap:.6rem;align-items:center;margin-bottom:1.5rem}
.fc-btn-start{width:180px;font-size:15px;padding:10px}
.fc-btn-starred{width:180px;font-size:13px}
.fc-btn-learned{width:180px;font-size:13px;color:var(--green);border-color:var(--green)}
.fc-btn-learned:disabled{opacity:.4;cursor:not-allowed}
.fc-reset-wrap{text-align:center;padding-top:.25rem}
.fc-reset-toggle{background:none;border:none;color:var(--pn-text-secondary);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:underline;padding:0}
.fc-reset-toggle:hover{color:var(--pn-text-primary)}
.fc-session-counts{display:flex;justify-content:center;gap:16px;margin-bottom:.75rem;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600}

/* ── Quiz jump button ────────────────────────────────────────────────────── */
#back-top-btn{position:fixed;bottom:28px;left:20px;z-index:900;display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:20px;border:.5px solid var(--border);background:var(--pn-bg-elevated);color:var(--pn-text-primary);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:opacity .2s,transform .2s}
#back-top-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.22)}
#quiz-jump-btn{position:fixed;bottom:28px;right:20px;z-index:900;display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:20px;border:.5px solid var(--border);background:var(--red);color:#fff;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:opacity .2s,transform .2s}
#quiz-jump-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.22)}

/* ── Vocab Admin Panel ───────────────────────────────────────────────────── */
.va-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.6);display:flex;align-items:stretch;justify-content:center;padding:0}
.va-panel{background:var(--pn-bg-surface);display:flex;flex-direction:column;width:100%;max-width:1100px;height:100vh;overflow:hidden}
.va-panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;border-bottom:.5px solid var(--border);flex-shrink:0}
.va-panel-title{font-size:15px;font-weight:600;color:var(--pn-text-primary)}
.va-close-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--pn-text-secondary);padding:4px 8px;line-height:1}
.va-close-btn:hover{color:var(--pn-text-primary)}
.va-layout{display:flex;flex:1;overflow:hidden}
.va-sidebar{width:220px;flex-shrink:0;border-right:.5px solid var(--border);overflow-y:auto;padding:.5rem 0}
.va-cat-item{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;cursor:pointer;font-size:13px;color:var(--pn-text-secondary);gap:8px;transition:background .1s}
.va-cat-item:hover{background:var(--pn-bg-elevated)}
.va-cat-item.va-cat-active{background:var(--pn-bg-elevated);color:var(--pn-text-primary);font-weight:600}
.va-cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-cat-count{font-size:11px;opacity:.55;flex-shrink:0}
.va-content{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.va-content-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.va-content-title{font-size:15px;font-weight:600}
.va-loading{color:var(--pn-text-secondary);font-size:14px;padding:1rem}
.va-table{width:100%;border-collapse:collapse;font-size:13px}
.va-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--pn-text-secondary);padding:6px 10px;border-bottom:.5px solid var(--border);font-weight:500}
.va-table td{padding:7px 10px;border-bottom:.5px solid var(--border);vertical-align:top}
.va-table tr:last-child td{border-bottom:none}
.va-table tr:hover td{background:var(--pn-bg-elevated)}
.va-jp{font-family:'Noto Sans JP',sans-serif;font-size:14px}
.va-sm{color:var(--pn-text-secondary)}
.va-actions{text-align:right;white-space:nowrap}
.va-edit-btn{background:none;border:.5px solid var(--border);border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--pn-text-secondary);font-family:'DM Sans',sans-serif}
.va-edit-btn:hover{border-color:var(--red);color:var(--red)}
/* Word edit modal */
.va-word-modal{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:1.5rem 1rem;overflow-y:auto}
.va-word-form{background:var(--pn-bg-surface);border-radius:12px;padding:1.5rem;width:100%;max-width:560px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.va-form-title{font-size:16px;font-weight:700;margin-bottom:1.25rem}
.va-form-row{display:flex;gap:1rem;margin-bottom:.9rem}
.va-form-row .va-label{flex:1}
.va-label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--pn-text-secondary);margin-bottom:.9rem}
.va-label:last-child{margin-bottom:0}
.va-input{padding:8px 10px;border:.5px solid var(--border);border-radius:8px;font-size:13px;font-family:'Noto Sans JP',sans-serif;background:var(--paper2);color:var(--pn-text-primary);outline:none;width:100%;box-sizing:border-box}
.va-input:focus{border-color:var(--red)}
.va-textarea{resize:vertical;min-height:56px}
.va-form-actions{display:flex;gap:.6rem;margin-top:1.25rem;align-items:center}
.va-delete-word-btn{margin-left:auto;color:var(--red);border-color:var(--red)}
/* ── Dictionary section ──────────────────────────────────────────────────── */
.dict-sticky-bar{position:sticky;top:0;z-index:20;background:var(--pn-bg-base);padding:.75rem 0 .5rem;border-bottom:.5px solid var(--border);margin-bottom:.5rem}
.dict-search-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:.45rem}
.dict-count-label{font-size:12px;color:var(--pn-text-secondary)}
.dict-chip{padding:3px 13px;border-radius:20px;border:1.5px solid var(--border);background:transparent;font-size:12px;font-weight:700;cursor:pointer;color:var(--pn-text-secondary);transition:all .15s;font-family:'DM Sans',sans-serif}
.dict-chip.on{background:var(--pn-accent);border-color:var(--pn-accent);color:#fff}
.dict-row{display:grid;grid-template-columns:110px 95px 1fr 115px 36px;align-items:center;gap:.5rem;padding:.45rem .25rem;border-bottom:.5px solid var(--border);font-size:13px}
.dict-row:last-child{border-bottom:none}
.dict-row:hover{background:var(--pn-bg-elevated)}
.dict-hdr{display:grid;grid-template-columns:110px 95px 1fr 115px 36px;gap:.5rem;padding:.35rem .25rem;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--pn-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem}
.dict-jp{font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:500}
.dict-reading{font-size:12px;color:var(--pn-text-secondary)}
.dict-en{font-size:13px}
.dict-cat{font-size:11px;color:var(--pn-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dict-pack{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;color:#fff;text-align:center;width:fit-content}
.dict-pack-n5{background:#16a34a}
.dict-pack-n4{background:var(--pn-accent)}
.dict-pack-n3{background:#7c3aed}
.dict-empty{padding:2.5rem;text-align:center;color:var(--pn-text-secondary);font-size:14px}

/* ── Header tagline ──────────────────────────────────────────────────────── */
.header-tagline{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--pn-text-tertiary);letter-spacing:.06em;line-height:1.6}

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle{background:var(--pn-bg-elevated);border:1px solid var(--pn-border);border-radius:6px;color:var(--pn-text-secondary);cursor:pointer;font-size:15px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--pn-accent);color:var(--pn-accent)}

/* ── Pack selector light-mode friendly classes ───────────────────────────── */
#pack-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35)}
#pack-dropdown{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:4px 8px;font-size:12px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:background .15s,color .15s,border-color .15s}

/* ── Light mode ──────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --pn-bg-base:        #f0f2f7;
  --pn-bg-surface:     #ffffff;
  --pn-bg-elevated:    #e4e8f2;
  --pn-bg-overlay:     #d8dded;
  --pn-border:         rgba(0,0,0,0.10);
  --pn-border-subtle:  rgba(0,0,0,0.05);
  --pn-border-accent:  rgba(233,69,96,0.35);
  --pn-text-primary:   #1a1f2e;
  --pn-text-secondary: #4a5568;
  --pn-text-tertiary:  #8892a4;
  --ink:   #1a1f2e;
  --ink2:  #4a5568;
  --ink3:  #8892a4;
  --text:  #1a1f2e;
  --paper:  #ffffff;
  --paper2: #f0f2f7;
  --paper3: #e4e8f2;
  --border: rgba(0,0,0,0.10);
  --shadow: 0 2px 16px rgba(0,0,0,0.10);
}
html[data-theme="light"] body { background: var(--pn-bg-base); color: var(--pn-text-primary); }
html[data-theme="light"] .header-progress { color: var(--pn-text-secondary); }
html[data-theme="light"] .header-progress-bar { background: rgba(0,0,0,0.10); }
html[data-theme="light"] .badge-dim { background: rgba(0,0,0,0.07); color: var(--pn-text-secondary); border-color: rgba(0,0,0,0.15); }
html[data-theme="light"] #pack-label { color: var(--pn-text-tertiary); }
html[data-theme="light"] #pack-dropdown { background: rgba(0,0,0,0.05); color: var(--pn-text-primary); border-color: rgba(0,0,0,0.15); }
html[data-theme="light"] .quiz-size-select { background: var(--pn-bg-elevated); color: var(--pn-text-primary); border-color: var(--pn-border); }