/* styles.css — Khmer Study app
   Font is loaded from a real file (no base64). Most rules ported from the
   original single-file build, plus app-only bits (save indicator, backup row). */
@font-face {
  font-family: 'KhmerEmbed';
  src: url('../data/NotoSansKhmer.ttf') format('truetype');
  font-display: swap;
}


:root{--ink:#20231f;--paper:#f4f1e9;--card:#fffdf7;--line:#ddd6c6;--accent:#7a4326;--accent2:#2c5d51;
--rule:#c9bfa8;--amber:#e0a52a;--amber-bg:#fbf2d6;--blue:#2f6690;--blue-bg:#e4eef5;--muted:#736c5c;}
*{box-sizing:border-box;}html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Iowan Old Style',Georgia,serif;line-height:1.62;font-size:17px;}
.khmer{font-family:'KhmerEmbed',serif;line-height:1.85;}
header{padding:46px 24px 30px;text-align:center;border-bottom:1px solid var(--rule);}
header h1{font-family:'KhmerEmbed',Georgia,serif;font-size:2.3rem;margin:0 0 6px;color:var(--accent2);}
header .sub{color:var(--muted);font-size:.98rem;font-style:italic;margin:0;}
.wrap{max-width:920px;margin:0 auto;padding:24px 20px 80px;}
.intro{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent2);padding:18px 20px;border-radius:4px;margin:26px 0 26px;font-size:.96rem;color:#3a3a31;}
.note-pending{background:#f3ede0;border:1px dashed var(--accent);border-radius:6px;padding:12px 18px;margin:0 0 24px;font-size:.88rem;color:#5a4632;}
.toolbar{position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(244,241,233,.95);backdrop-filter:blur(6px);padding:12px 0;margin-bottom:8px;border-bottom:1px solid var(--line);}
.toolbar button{font-family:Georgia,serif;font-size:.85rem;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#fff;padding:8px 15px;border-radius:5px;}
.toolbar button.ghost{background:transparent;color:var(--accent);}
.toolbar .status{font-size:.82rem;color:var(--muted);margin-left:auto;}
.toc{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 20px;margin:0 0 24px;}
.toc h2{margin:0 0 8px;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-family:Georgia,serif;}
.toc ol{margin:0;padding-left:20px;}
.toc a{color:var(--accent);text-decoration:none;}
.toc a:hover{text-decoration:underline;}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin:0 0 24px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.sw{width:22px;height:0;border-top:2px solid;display:inline-block;}
.section{margin:0 0 18px;padding-top:10px;}
.section>h2.sectitle{font-family:'KhmerEmbed',Georgia,serif;color:var(--accent2);font-size:1.7rem;border-bottom:2px solid var(--accent2);padding-bottom:6px;margin:36px 0 6px;}
.blurb{font-size:.95rem;color:#3a3a31;font-style:italic;margin:0 0 20px;}
.viewtoggle{display:inline-flex;border:1px solid var(--accent);border-radius:7px;overflow:hidden;margin:0 0 18px;}
.viewtoggle button{font-family:Georgia,serif;font-size:.82rem;cursor:pointer;border:0;background:transparent;color:var(--accent);padding:7px 18px;letter-spacing:.03em;}
.viewtoggle button.active{background:var(--accent);color:#fff;}
.read{margin:0 0 10px;}
.turn{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid #ece6d6;}
.turn:last-child{border-bottom:0;}
.turn.stage{justify-content:center;}
.turn .who{flex:0 0 auto;min-width:62px;text-align:right;font-family:'KhmerEmbed',serif;font-weight:700;color:var(--accent);font-size:1.02rem;padding-top:2px;}
.turn.stage .who{display:none;}
.turn .say{flex:1;}
.turn .say .kline{font-family:'KhmerEmbed',serif;font-size:1.32rem;line-height:1.8;color:var(--ink);}
.turn .say .eline{font-size:.92rem;color:var(--muted);margin-top:2px;}
.turn.stage .say{text-align:center;font-style:italic;}
.turn.stage .say .kline{font-size:1.15rem;color:#5a6b5f;}
.prose{padding:6px 0 10px;}
.prose .kprose{font-family:'KhmerEmbed',serif;font-size:1.34rem;line-height:2.05;color:var(--ink);margin:0 0 18px;text-align:justify;}
.prose .eprose{font-size:1.02rem;line-height:1.7;color:var(--muted);margin:0;padding-top:14px;border-top:1px solid #ece6d6;}
.srcimg{margin:0 0 20px;border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;}
.srcimg summary{cursor:pointer;padding:10px 16px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-family:Georgia,serif;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;}
.srcimg summary::-webkit-details-marker{display:none;}
.srcimg summary::before{content:"\25b8";display:inline-block;transition:transform .15s;color:var(--muted);}
.srcimg[open] summary::before{transform:rotate(90deg);}
.srcimg summary:hover{background:#f6f3ea;}
.srcimg .imgs{padding:8px 12px 14px;display:flex;flex-direction:column;gap:10px;}
.srcimg img{width:100%;height:auto;border:1px solid var(--rule);border-radius:5px;cursor:zoom-in;display:block;}
.srcfig{margin:0;}
.srccap{display:flex;align-items:center;gap:8px;padding:5px 2px 2px;font-size:.78rem;color:var(--muted);font-family:Georgia,serif;}
.srcnum{flex:1;text-transform:uppercase;letter-spacing:.04em;}
.srcmv{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--accent2);border-radius:4px;width:24px;height:24px;line-height:1;font-size:.9rem;}
.srcmv:disabled{opacity:.3;cursor:default;}
.srcdel{cursor:pointer;border:1px solid var(--line);background:#fff;color:#b1442e;border-radius:4px;padding:3px 9px;font-size:.75rem;font-family:Georgia,serif;}
.srcdel:hover{background:#b1442e;color:#fff;border-color:#b1442e;}
.lightbox{position:fixed;inset:0;background:rgba(20,20,16,.9);z-index:60;display:none;overflow:hidden;}
.lightbox.on{display:block;}
.lightbox img{position:absolute;top:0;left:0;will-change:transform;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.lightbox-x{position:absolute;top:14px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font-size:1.05rem;cursor:pointer;}
.lightbox-x:hover{background:rgba(0,0,0,.6);}
.lightbox-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.85);font-size:.8rem;background:rgba(0,0,0,.4);padding:5px 12px;border-radius:20px;pointer-events:none;}
.line{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 22px 22px;margin:0 0 22px;}
.line.stage{border-style:dashed;background:#faf8f0;}
.line.verified{border-color:#7fae6e;border-left:4px solid #5a8f3c;background:#fbfdf8;}
.verifybar{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule);}
.verifybtn{font-family:Georgia,serif;font-size:.8rem;cursor:pointer;border:1px solid #5a8f3c;background:transparent;color:#3f6b27;padding:6px 14px;border-radius:5px;}
.verifybtn:hover{background:#eef5e7;}
.line.verified .verifybtn{background:#5a8f3c;color:#fff;border-color:#5a8f3c;}
.vbadge{display:none;align-items:center;gap:6px;font-size:.8rem;color:#3f6b27;font-weight:bold;}
.line.verified .vbadge{display:inline-flex;}
.vbadge::before{content:"\2714";display:inline-flex;width:18px;height:18px;background:#5a8f3c;color:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:.7rem;}
.vstamp{font-size:.74rem;color:var(--muted);font-style:italic;}
.line.verified .pair.unsure{background:#eef5e7;}
.line.verified .pair.unsure .k{border-bottom-color:#7fae6e;}
.line.verified .pair.unsure .e{color:#3f6b27;}
.line.verified .notes-grid dd.warn{background:#eef5e7;}
.line.verified .notes-grid dt.warn{color:#3f6b27;}
.progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 18px;margin:0 0 22px;}
.progress .bar{flex:1;min-width:120px;height:9px;background:#e6e0d0;border-radius:5px;overflow:hidden;}
.progress .bar i{display:block;height:100%;background:#5a8f3c;width:0;transition:width .3s;}
.progress .ct{font-size:.86rem;color:#3f6b27;font-weight:bold;white-space:nowrap;}
.progress button{font-family:Georgia,serif;font-size:.8rem;cursor:pointer;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:6px 13px;border-radius:5px;white-space:nowrap;}
.progress button.on{background:var(--accent);color:#fff;}
body.filter-unverified .line.verified{display:none;}
body.filter-unverified .section:not(.has-unverified){display:none;}
.spk{display:inline-block;font-family:'KhmerEmbed',serif;font-weight:700;color:var(--accent);font-size:1.12rem;margin-bottom:12px;border-bottom:2px solid var(--accent);padding-bottom:1px;}
.spk.stage-label{color:var(--muted);border-color:var(--muted);font-style:italic;font-family:Georgia,serif;font-weight:400;font-size:.82rem;}
.fullkhmer{font-size:1.5rem;margin:2px 0 18px;}
.gloss{display:flex;flex-wrap:wrap;gap:4px 6px;margin:8px 0 18px;}
.pair{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:0 4px;}
.pair .k{font-family:'KhmerEmbed',serif;font-size:1.3rem;line-height:1.6;color:var(--ink);white-space:nowrap;}
.pair .tick{width:1px;height:10px;background:var(--rule);margin:1px 0;}
.pair .e{font-size:.78rem;color:var(--accent2);text-align:center;line-height:1.25;}
.pair.unsure .k{border-bottom:2px solid var(--amber);}
.pair.unsure .e{color:#9a6a00;}.pair.unsure{background:var(--amber-bg);border-radius:5px;}
.pair:hover{background:#f0ece0;border-radius:5px;}
.meta{border-top:1px solid var(--rule);padding-top:14px;margin-top:4px;}
.natural{font-size:1.08rem;margin:0 0 14px;}
.natural .lab,.notes-wrap .lab{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px;}
.notes-grid{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;align-items:baseline;}
.notes-grid dt{font-family:'KhmerEmbed',Georgia,serif;font-weight:700;color:var(--accent);font-size:.95rem;white-space:nowrap;}
.notes-grid dt.warn{color:#9a6a00;}.notes-grid dt.gap{color:var(--blue);}
.notes-grid dd{margin:0;font-size:.93rem;color:#39392f;}
.notes-grid dd.warn{background:var(--amber-bg);padding:3px 8px;border-radius:4px;}
.notes-grid dd.gap{background:var(--blue-bg);padding:3px 8px;border-radius:4px;}
.notes-grid dt.gap::before{content:"vs. EN";font-family:Georgia,serif;font-size:.62rem;letter-spacing:.05em;color:var(--blue);display:block;font-weight:400;}
.secref{background:#f6f3ea;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;padding:14px 20px;margin:8px 0 10px;}
.secref h3{margin:0 0 10px;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-family:Georgia,serif;}
.secref dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;}
.secref dt{font-family:'KhmerEmbed',Georgia,serif;font-weight:700;color:var(--accent2);font-size:.93rem;}
.secref dd{margin:0;font-size:.9rem;}
.metaref{margin-top:54px;border-top:3px double var(--rule);padding-top:30px;}
.metaref h2{font-family:Georgia,serif;color:var(--accent2);font-size:1.7rem;margin-bottom:4px;}
.metaref .hint{font-size:.82rem;color:var(--muted);font-style:italic;margin:0 0 18px;}
.ref{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 20px;margin-bottom:13px;}
.ref h3{margin:0 0 5px;font-size:1.05rem;color:var(--accent);font-family:'KhmerEmbed',Georgia,serif;}
.ref p{margin:0;font-size:.94rem;}
.ref .tags{margin-top:7px;font-size:.74rem;color:var(--muted);}
.ref .tags a{color:var(--blue);text-decoration:none;border:1px solid var(--blue-bg);background:var(--blue-bg);padding:1px 7px;border-radius:10px;margin-right:5px;display:inline-block;margin-top:3px;}
[contenteditable]{outline:none;border-radius:3px;}
.editing [contenteditable]{background:#fffbef;box-shadow:0 0 0 1px var(--amber);}
.editing [contenteditable]:focus{background:#fff;box-shadow:0 0 0 2px var(--accent);}
footer{text-align:center;color:var(--muted);font-size:.8rem;padding:28px 20px;}
/* ---- top mode switcher ---- */
.modeswitch{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;margin:0 0 18px;}
.modeswitch button{font-family:Georgia,serif;font-size:.88rem;cursor:pointer;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:8px 16px;border-radius:8px;transition:background .12s,color .12s;}
.modeswitch button:hover{background:#f1ece0;}
.modeswitch button.active{background:var(--accent2);color:#fff;border-color:var(--accent2);}
.modeswitch .badge{display:inline-block;background:#c0532e;color:#fff;font-size:.7rem;border-radius:9px;padding:0 6px;margin-left:6px;}
.modeswitch button.active .badge{background:#fff;color:#c0532e;}
/* upcoming (placeholder) sections — visually de-emphasised so they don't crowd the real ones */
.modeswitch button.mode-soon{border-style:dashed;border-color:var(--line);color:var(--muted);font-size:.82rem;padding:7px 12px;}
.modeswitch button.mode-soon:hover{background:#f3efe6;color:var(--ink);}
.modeswitch button.mode-soon::after{content:'soon';font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;background:#e9e3d4;color:var(--muted);border-radius:4px;padding:1px 5px;margin-left:7px;vertical-align:middle;}
.modeswitch button.mode-soon.active{background:var(--muted);color:#fff;border-style:solid;border-color:var(--muted);}
.modeswitch button.mode-soon.active::after{background:rgba(255,255,255,.22);color:#fff;}
/* ---- flaggable words in read view ---- */
.kprose .tok,.kline .tok{cursor:pointer;border-radius:3px;padding:0 1px;transition:background .12s;}
.kprose .tok:hover,.kline .tok:hover{background:#fdeecf;}
.tok.flagged{background:#fbe0c4;box-shadow:inset 0 -2px 0 #c0532e;}
.flaghint{font-size:.8rem;color:var(--muted);font-style:italic;margin:0 0 14px;}
/* ---- vocab / SRS view ---- */
#vocabView{display:none;}
.srs-wrap{max-width:620px;margin:0 auto;}
.srs-search{margin:0 0 18px;}
.srs-search input{width:100%;font-family:inherit;font-size:1rem;border:1px solid var(--line);border-radius:8px;padding:10px 14px;box-sizing:border-box;background:var(--card);}
.srs-search input.khmer,.srs-search input{font-family:'KhmerEmbed',Georgia,serif;}
.srs-search input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 2px rgba(44,93,81,.15);}
.search-results{margin-top:6px;display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto;}
.search-item{display:flex;align-items:stretch;gap:6px;}
.search-item .search-row{flex:1;}
.search-del{cursor:pointer;flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:0 11px;font-size:1rem;color:var(--muted);}
.search-del:hover{border-color:#c0532e;color:#c0532e;background:#fbf2ef;}
.search-row{cursor:pointer;text-align:left;display:flex;align-items:baseline;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:8px 12px;font-family:inherit;}
.search-row:hover{background:#f6f3ea;border-color:var(--accent2);}
.search-row .sr-km{font-size:1.2rem;color:var(--accent);min-width:64px;flex:0 0 auto;}
.search-row .sr-def{font-size:.9rem;color:var(--ink);flex:1;}
.search-row .sr-susp{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:#9a6a00;flex:0 0 auto;}
.search-hint{font-size:.84rem;color:var(--muted);padding:8px 4px;font-style:italic;}
.srs-stats{display:flex;gap:10px;justify-content:center;margin:0 0 22px;flex-wrap:wrap;}
.srs-stats .stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 18px;text-align:center;min-width:84px;}
.srs-stats .stat b{display:block;font-size:1.5rem;color:var(--accent2);font-family:Georgia,serif;}
.srs-stats .stat span{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.flashcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:48px 28px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.04);min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
.flashcard .fc-km{font-family:'KhmerEmbed',serif;font-size:2.8rem;color:var(--ink);line-height:1.6;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:baseline;}
.fc-form{display:inline-flex;flex-direction:column;align-items:center;}
.fc-form .ff-label{font-family:Georgia,serif;font-size:.66rem;color:#8a4a7d;background:#f3e6f0;border-radius:8px;padding:1px 8px;letter-spacing:.03em;margin-top:2px;}
.fc-cuewrap{margin-top:14px;}
.fc-cue{display:inline-block;font-family:Georgia,serif;font-size:.84rem;color:#9a6a00;background:#fbf2d6;border:1px solid #e3b341;border-radius:14px;padding:3px 14px;}
.fc-cue.muted{color:var(--muted);background:#f0ece0;border-color:var(--line);}
.fc-components{margin-top:16px;width:100%;max-width:480px;}
.fcc-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;}
.fcc-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.comp{display:inline-flex;align-items:stretch;border:1px solid var(--line);background:#f6f3ea;border-radius:8px;overflow:hidden;}
.comp:hover{border-color:var(--accent);}
.comp-main{cursor:pointer;border:none;background:transparent;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;}
.comp-main:hover{background:#efe9da;}
.comp .khmer{font-size:1.25rem;color:var(--accent);}
.comp .comp-en{font-size:.76rem;color:var(--muted);}
.comp-rm{cursor:pointer;border:none;border-left:1px solid var(--line);background:transparent;color:var(--muted);font-size:1rem;line-height:1;padding:0 9px;}
.comp-rm:hover{background:#f0d8cf;color:#b1442e;}
.comp.comp-add{cursor:pointer;color:var(--accent);border-style:dashed;background:transparent;padding:6px 12px;display:flex;align-items:center;font-family:inherit;}
.comp.comp-add:hover{background:#f6f3ea;}
.comp-pop .cadd-sense{font-family:Georgia,serif;font-size:.9rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;margin:0 5px 6px 0;}
.comp-pop{position:relative;margin-top:12px;background:#fff;border:1px solid var(--accent);border-radius:8px;padding:14px 28px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.08);}
.cp-close{position:absolute;top:4px;right:6px;cursor:pointer;border:0;background:transparent;color:var(--muted);font-size:1.2rem;line-height:1;padding:2px 6px;border-radius:5px;}
.cp-close:hover{color:#c0532e;background:#f6f3ea;}
.comp-pop input{font-family:'KhmerEmbed',Georgia,serif;font-size:.95rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;margin:0 5px 6px 0;}
.comp-pop .cadd-go{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:6px 14px;border-radius:5px;}
.srs-back{display:inline-block;margin:0 0 12px;cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:var(--card);color:var(--accent);padding:6px 14px;border-radius:6px;}
.srs-back:hover{border-color:var(--accent);background:#f6f3ea;}
/* ---- audio: card play buttons + editor attach UI ---- */
.fc-audio{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px;}
.fc-play{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:#eaf1ef;color:var(--accent2);padding:5px 14px;border-radius:14px;}
.fc-play:hover{background:var(--accent2);color:#fff;}
.ed-audio-wrap{margin:0 0 11px;}
.ed-audio-list{display:flex;flex-direction:column;gap:5px;margin-bottom:6px;}
.ed-audio-item{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;background:#f6f3ea;border:1px solid var(--line);border-radius:7px;padding:4px 8px;}
.ed-audio-play{cursor:pointer;border:1px solid var(--accent2);background:var(--accent2);color:#fff;border-radius:50%;width:24px;height:24px;line-height:1;font-size:.7rem;}
.ed-audio-name{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ed-audio-rm{cursor:pointer;border:0;background:transparent;color:var(--muted);font-size:1.05rem;line-height:1;}
.ed-audio-rm:hover{color:#c0532e;}
.ed-audio-add{display:inline-block;cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px dashed var(--accent2);background:transparent;color:var(--accent2);padding:6px 14px;border-radius:5px;}
.comp-pop .cp-km{font-size:1.6rem;color:var(--ink);margin-bottom:4px;}
.comp-pop .cp-def{font-size:1rem;color:var(--accent2);margin-bottom:10px;}
.comp-pop .cp-jump{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:6px 14px;border-radius:6px;}
.fc-verifyflag{font-size:.82rem;color:#9a6a00;background:#fbf2d6;border:1px solid #e3b341;border-radius:14px;padding:3px 14px;display:inline-block;}
.fc-tag.cls{background:#e8eef0;color:#3a6b6b;}
.fc-example{flex-basis:100%;font-family:'KhmerEmbed',serif;font-size:1.1rem;color:var(--ink);background:#f6f3ea;border-left:3px solid var(--accent);padding:6px 12px;border-radius:4px;margin-top:8px;}
.fc-example-en{display:block;font-family:Georgia,serif;font-size:.85rem;color:var(--muted);margin-top:3px;}
.fc-editbtn{margin-top:14px;cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:6px 14px;border-radius:6px;}
.fc-deletebtn{border-color:#c0532e;color:#c0532e;}
.fc-deletebtn:hover{background:#c0532e;color:#fff;}
.fc-editor{margin-top:14px;text-align:left;background:#faf8f1;border:1px solid var(--line);border-radius:8px;padding:16px;width:100%;max-width:480px;}
/* while editing, the editor TAKES THE PLACE of the card: hide the rest, keep only the close button + editor */
.flashcard.editing{justify-content:flex-start;gap:10px;padding:18px;}
.flashcard.editing > *:not(.fc-editor):not(#cardEditBtn){display:none !important;}
.flashcard.editing #cardEditBtn{margin-top:0;align-self:flex-end;}
.flashcard.editing .fc-editor{margin-top:0;max-width:none;}
.fc-editor label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:10px;}
.fc-editor input,.fc-editor textarea{width:100%;margin-top:3px;font-size:.92rem;border:1px solid var(--line);border-radius:5px;padding:6px 8px;box-sizing:border-box;font-family:inherit;}
.fc-editor input.khmer,.fc-editor textarea{font-family:'KhmerEmbed',Georgia,serif;}
.fc-editor label.ed-check{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink);}
.fc-editor label.ed-check input{width:auto;margin-top:0;}
.fc-editor #edSave{cursor:pointer;font-family:Georgia,serif;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:8px 18px;border-radius:6px;}
.addword-box{text-align:left;background:var(--card);border:1px solid var(--accent2);border-radius:10px;padding:20px 22px;margin:18px auto 0;max-width:560px;}
.addword-box .aw-title{margin:0 0 14px;color:var(--accent2);font-family:Georgia,serif;font-size:1.15rem;}
.addword-box label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:11px;}
.addword-box input,.addword-box textarea{width:100%;margin-top:3px;font-size:.95rem;border:1px solid var(--line);border-radius:5px;padding:7px 9px;box-sizing:border-box;font-family:inherit;}
.addword-box input.khmer,.addword-box textarea{font-family:'KhmerEmbed',Georgia,serif;}
.addword-box label.ed-check{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink);}
.addword-box label.ed-check input{width:auto;margin-top:0;}
.addword-box .aw-actions{display:flex;gap:10px;margin-top:4px;}
.addword-box #awSave{cursor:pointer;font-family:Georgia,serif;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:9px 20px;border-radius:6px;}
.addword-box #awCancel{cursor:pointer;font-family:Georgia,serif;border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 18px;border-radius:6px;}
.addword-box #awMsg{display:block;margin-top:10px;font-size:.84rem;color:var(--accent2);}
.flashcard .fc-en{font-size:1.5rem;color:var(--accent2);}
.flashcard .fc-note{font-size:.95rem;color:var(--muted);font-style:italic;max-width:440px;}
.fc-senses{text-align:left;margin:0;padding-left:24px;max-width:460px;}
.fc-senses li{font-size:1.2rem;color:var(--accent2);margin-bottom:7px;}
.fc-senses .sctx{font-size:.88rem;color:var(--muted);font-style:italic;}
.fc-details{margin-top:6px;width:100%;max-width:460px;}
.fc-details summary{cursor:pointer;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);list-style:none;}
.fc-details summary::-webkit-details-marker{display:none;}
.fc-details summary::before{content:"\25b8 ";color:var(--muted);}
.fc-details[open] summary::before{content:"\25be ";}
.fc-dgrid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;align-items:center;}
.fc-tag{font-size:.76rem;padding:2px 10px;border-radius:11px;font-style:normal;}
.fc-tag.pos{background:#e4eef5;color:#2f6690;}
.fc-tag.reg{background:#f3e6f0;color:#8a4a7d;}
.fc-tag.pol{background:#f3e6f0;color:#8a4a7d;}
.fc-tag.topic{background:#eef1e4;color:#5a7d2c;}
.fc-dnote{flex-basis:100%;font-size:.9rem;color:#39392f;font-style:italic;margin-top:6px;}
.fc-others{margin-top:16px;width:100%;max-width:460px;padding-top:14px;border-top:1px solid var(--rule);}
.fc-related{width:100%;max-width:460px;margin:16px auto 0;padding-top:14px;border-top:1px solid var(--rule);}
.fc-related > div{margin:0;width:auto;max-width:none;}
.fc-related .fc-others{padding:0;border-top:0;}
.fc-related > div + div{margin-top:24px;}
.fc-others-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:7px;}
.fc-other{font-size:1.05rem;color:var(--accent2);background:#e8f1ee;border:1px solid #b6d2cb;border-radius:14px;padding:5px 16px;}
.fc-synonyms{margin-top:16px;width:100%;max-width:460px;}
.fc-syn-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:7px;}
.syn,.wform{cursor:pointer;font-family:inherit;border:1px solid var(--line);background:#f6f3ea;border-radius:8px;padding:6px 13px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.syn:hover,.wform:hover{background:#efe9da;border-color:var(--accent);}
.syn .khmer,.wform .khmer{font-size:1.2rem;color:var(--accent);}
.syn-reg{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.pairlink{cursor:pointer;font-family:inherit;border:1px solid var(--line);background:#f6f3ea;border-radius:8px;padding:6px 13px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.pairlink:hover{background:#efe9da;border-color:var(--accent);}
.pairlink .khmer{font-size:1.2rem;color:var(--accent);}
.pair-def{font-size:.72rem;color:var(--muted);text-align:center;}
.pairlink.syn-nolink{cursor:default;opacity:.65;}
.pairlink.syn-nolink:hover{background:#f6f3ea;border-color:var(--line);}
.syn.syn-nolink,.wform.syn-nolink{cursor:default;opacity:.65;}
/* cross-referenced meanings (this spelling's meaning owned by another card) */
.fc-xref .fc-syn-list{margin-top:6px;}
.xref{cursor:pointer;font-family:inherit;border:1px solid #b59bcf;background:#f6f0fb;border-radius:8px;padding:6px 13px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.xref:hover{background:#ede3f7;border-color:#9a6cc0;}
.xref-def{font-size:.92rem;color:var(--ink);}
.xref-from{font-size:.74rem;color:#6a3d97;}
.xref-from .khmer{font-size:1rem;}
/* reverse compound link: the compounds this word is a part of */
.usedin{cursor:pointer;font-family:inherit;border:1px solid #c79a5b;background:#fbf4e8;border-radius:8px;padding:6px 13px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.usedin:hover{background:#f6ead2;border-color:#a9762f;}
.usedin .khmer{font-size:1.2rem;color:#8a5a16;}
.usedin-def{font-size:.72rem;color:var(--muted);text-align:center;}
.usedin-kind{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:#a9762f;}
.syn.syn-nolink:hover,.wform.syn-nolink:hover{background:#f6f3ea;border-color:var(--line);}
.svariants{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.svariants.center{justify-content:center;}
.vform{font-family:'KhmerEmbed',serif;font-size:1.15rem;color:var(--accent);background:#f3ede0;border:1px solid var(--line);border-radius:7px;padding:3px 10px;display:inline-flex;align-items:center;gap:6px;}
.vform .vlabel{font-family:Georgia,serif;font-size:.66rem;color:#8a4a7d;background:#f3e6f0;border-radius:8px;padding:0 7px;letter-spacing:.03em;}
.fc-wordvar{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:8px;justify-content:center;}
.fc-wordvar .wv-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.flashcard .fc-src{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.fc-divider{width:60%;height:1px;background:var(--rule);}
.srs-controls{margin:22px 0 0;text-align:center;}
.btn-show{font-family:Georgia,serif;font-size:1rem;cursor:pointer;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:12px 40px;border-radius:8px;}
.grades{display:none;gap:8px;justify-content:center;flex-wrap:wrap;}
.grades.on{display:flex;}
.grade{position:relative;font-family:Georgia,serif;cursor:pointer;border:0;border-radius:8px;padding:13px 0 11px;color:#fff;flex:1;min-width:70px;max-width:130px;}
.grade small{display:block;font-size:.7rem;opacity:.85;margin-top:2px;font-weight:normal;}
.grade .gnum{position:absolute;top:5px;left:5px;width:17px;height:17px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:.66rem;font-weight:700;line-height:1;border-radius:5px;background:rgba(0,0,0,.16);color:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
.btn-show .gnum{display:inline-block;font-size:.62rem;border:1px solid rgba(255,255,255,.55);border-radius:3px;padding:2px 5px;margin-left:6px;opacity:.8;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;}
.grade.again{background:#c0392b;}.grade.hard{background:#b8772b;}
.grade.good{background:#3f7d3a;}.grade.easy{background:#2c6e8f;}
.srs-empty{text-align:center;padding:50px 20px;color:var(--muted);}
.srs-empty b{color:var(--accent2);font-size:1.2rem;display:block;margin-bottom:8px;}
.srs-toolbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0 0;}
.srs-toolbar button{font-family:Georgia,serif;font-size:.82rem;cursor:pointer;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:8px 16px;border-radius:6px;}
#toolsBtn.on{background:var(--accent);color:#fff;}
.tools-menu{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;max-width:520px;margin:12px auto 0;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:10px;}
.tools-menu button,.tools-menu .restore-label,.tools-menu .tools-importwords{font-family:Georgia,serif;font-size:.82rem;cursor:pointer;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:8px 16px;border-radius:6px;display:inline-block;}
.tools-menu .tools-importwords{border-color:var(--accent2);background:var(--accent2);color:#fff;}
.tools-newcap{display:inline-flex;align-items:center;gap:6px;font-family:Georgia,serif;font-size:.82rem;color:var(--ink);}
.tools-newcap input{width:64px;font-family:inherit;font-size:.82rem;border:1px solid var(--line);border-radius:5px;padding:6px 8px;}
.tools-newcap .tools-hint{font-size:.72rem;color:var(--muted);}
.tools-backup{flex-basis:100%;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px;padding-top:13px;border-top:1px solid var(--line);}
.tools-backup .save-indicator{margin-left:0;}
.import-box{background:var(--card);border:1px dashed var(--accent);border-radius:8px;padding:16px 20px;margin:20px 0 0;font-size:.88rem;}
.import-box textarea{width:100%;min-height:90px;margin-top:8px;font-family:monospace;font-size:.8rem;border:1px solid var(--line);border-radius:5px;padding:8px;box-sizing:border-box;}
.import-box button{margin-top:8px;font-family:Georgia,serif;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#fff;padding:7px 16px;border-radius:5px;}
@media(max-width:560px){.notes-grid,.secref dl{grid-template-columns:1fr;gap:2px 0;}.notes-grid dt{margin-top:8px;}.secref dt{margin-top:6px;}}

/* ---- revamped card editor: guided sections ---- */
.ce-sec{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 12px;background:#fbfaf6;}
.ce-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:bold;margin-bottom:3px;}
.ce-help{font-size:.78rem;color:var(--muted);margin-bottom:9px;line-height:1.4;}
.ce-field{display:block;font-size:.78rem;color:var(--muted);margin:0 0 8px;}
.ce-field>input,.ce-field>textarea{display:block;width:100%;box-sizing:border-box;margin-top:3px;font-size:1rem;border:1px solid var(--line);border-radius:5px;padding:7px 9px;}
.ce-field .khmer{font-family:'KhmerEmbed',Georgia,serif;}
.ce-sub{color:var(--muted);font-weight:normal;font-style:italic;}
.ce-spellings{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.ce-spell-chip{display:inline-flex;align-items:center;gap:6px;background:#eef1e4;border:1px solid var(--line);border-radius:14px;padding:4px 8px 4px 12px;}
.ce-spell-chip .khmer{font-family:'KhmerEmbed',serif;font-size:1.25rem;color:var(--accent);}
.ce-spell-rm{cursor:pointer;border:0;background:transparent;color:var(--muted);font-size:1.1rem;line-height:1;padding:0 2px;}
.ce-spell-rm:hover{color:#c0532e;}
.ce-spell-empty{font-size:.82rem;color:var(--muted);font-style:italic;}
.ce-spell-add{display:flex;gap:6px;align-items:center;}
.ce-spell-add input{flex:1;font-size:1.05rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;}
.ce-spell-add button{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px dashed var(--accent);background:transparent;color:var(--accent);padding:6px 12px;border-radius:5px;}
.ce-toggle{display:flex;align-items:flex-start;gap:8px;font-size:.86rem;color:var(--ink);margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.4;cursor:pointer;}
.ce-toggle input{margin-top:2px;}
.ce-pairbox{margin-top:10px;padding:10px;border:1px solid #2f8f7d;border-radius:7px;background:#eef5f2;}
.ce-pair-parts{display:flex;align-items:flex-end;gap:8px;}
.ce-pair-parts .ce-field{flex:1;margin-bottom:8px;}
.ce-pair-dots{font-size:1.4rem;color:var(--muted);padding-bottom:14px;}
.ce-pair-meanings{display:flex;flex-direction:column;gap:6px;margin:8px 0;}
.ce-pair-meanings .ce-field{margin-bottom:0;}
.ce-pair-meanings .khmer{color:var(--accent);}
.ce-reuse-hint{font-size:.72rem;color:#2f8f7d;margin-top:3px;line-height:1.3;}
.ed-scope{display:block;width:100%;box-sizing:border-box;margin-top:3px;font-size:.92rem;border:1px solid #2f8f7d;border-radius:5px;padding:7px 9px;background:#f3faf8;}
#ceKind{display:block;width:100%;box-sizing:border-box;margin-top:3px;font-size:.95rem;border:1px solid var(--accent);border-radius:5px;padding:8px 9px;background:#fff;}
.ce-comp-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.ce-comp-def{font-size:.8rem;color:var(--muted);}
#ceCompSense{font-size:.9rem;border:1px solid var(--line);border-radius:5px;padding:6px;background:#fff;}
.ce-pair-refs{display:flex;flex-wrap:wrap;gap:8px;}
.ce-pair-refs .ce-field{flex:1;min-width:160px;}
#cePart1Sense,#cePart2Sense{display:block;width:100%;box-sizing:border-box;margin-top:3px;font-size:.9rem;border:1px solid var(--line);border-radius:5px;padding:6px 8px;background:#fff;}
.ce-advcard{margin:0 0 12px;}
.ce-checks{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 12px;}
.ce-save{cursor:pointer;font-family:Georgia,serif;font-size:.95rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:10px 22px;border-radius:7px;}
/* ---- per-meaning rows in the card editor ---- */
.ed-senses-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:6px 0 6px;}
.ed-sense{border:1px solid var(--line);border-radius:6px;padding:10px 12px 6px;margin-bottom:8px;background:#fff;}
.ed-sgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;}
.ed-sense-del{cursor:pointer;font-family:Georgia,serif;font-size:.72rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:3px 9px;border-radius:4px;margin-bottom:8px;}
.ed-sense-del:hover{border-color:#c0532e;color:#c0532e;}
.ed-addsense{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px dashed var(--accent);background:transparent;color:var(--accent);padding:6px 14px;border-radius:5px;margin:0 0 14px;}
.ed-syn-wrap{margin:0 0 10px;}
.ed-syn-label{font-size:.72rem;color:var(--muted);margin-bottom:5px;}
.ed-syn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.ed-syn-chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;background:#eef1e4;border:1px solid var(--line);border-radius:12px;padding:3px 6px 3px 11px;}
.ed-syn-chip .khmer{font-size:1rem;color:var(--accent);}
.ed-syn-rm{cursor:pointer;border:0;background:transparent;color:var(--muted);font-size:1.05rem;line-height:1;padding:0 2px;}
.ed-syn-rm:hover{color:#c0532e;}
.ed-syn-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ed-syn-add .ed-syn-form{width:auto;flex:1;min-width:110px;margin-top:0;}
.ed-syn-add .ed-syn-sense{font-family:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--line);border-radius:5px;max-width:210px;background:#fff;}
.ed-syn-addbtn{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:6px 13px;border-radius:5px;}
.ed-syn-addbtn:hover{background:var(--accent2);color:#fff;}
.ed-pair-wrap{margin-top:8px;}
.ed-pair-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ed-pair-add input{font-family:inherit;font-size:.85rem;border:1px solid var(--line);border-radius:5px;padding:6px 8px;margin-top:0;}
.ed-pair-add .ed-pair-form{flex:1;min-width:110px;}
.ed-pair-add .ed-pair-def{flex:1.4;min-width:150px;}
.ed-pair-add .ed-pair-sense{font-family:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--line);border-radius:5px;max-width:180px;background:#fff;}
.ed-pair-addbtn{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:6px 13px;border-radius:5px;}
.ed-pair-addbtn:hover{background:var(--accent2);color:#fff;}
.ed-var-wrap{margin-top:8px;}
.ed-var-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.ed-var-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ed-var-add input{font-family:inherit;font-size:.85rem;border:1px solid var(--line);border-radius:5px;padding:6px 8px;margin-top:0;}
.ed-var-add .ed-var-form{flex:1;min-width:120px;font-family:'KhmerEmbed',Georgia,serif;}
.ed-var-add .ed-var-reg{flex:1;min-width:130px;}
.ed-var-addbtn{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:6px 13px;border-radius:5px;}
.ed-var-addbtn:hover{background:var(--accent2);color:#fff;}
.ed-var-rm{cursor:pointer;border:none;background:transparent;color:var(--muted);font-size:.95rem;margin-left:4px;}
.ed-var-reg-tag{font-size:.72rem;color:#9a6a00;background:var(--amber-bg);border-radius:8px;padding:0 7px;}
.svar-wrap{margin-top:4px;}

/* ================= lessons (Grammar Guide) ================= */
.lesson-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 18px;}
.lesson-head h2{margin:0;font-family:Georgia,serif;color:var(--accent2);font-size:1.5rem;}
.lesson-add,.lesson-add-line{cursor:pointer;font-family:Georgia,serif;font-size:.86rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:8px 16px;border-radius:7px;}
.lesson-add-line{background:transparent;color:var(--accent2);border-style:dashed;margin:10px 0 0;}
.lesson-empty{color:var(--muted);font-style:italic;background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:18px 20px;}
.lesson-list{display:flex;flex-direction:column;gap:10px;}
.lesson-card{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.lesson-card:hover{border-color:var(--accent2);}
.lesson-open{flex:1;cursor:pointer;display:flex;align-items:center;gap:14px;text-align:left;background:transparent;border:none;padding:10px 14px;font-family:inherit;}
.lesson-open:hover{background:#fbfaf5;}
.lesson-rename{flex:0 0 auto;cursor:pointer;border:none;border-left:1px solid var(--line);background:transparent;color:var(--accent2);font-size:1rem;padding:0 14px;}
.lesson-rename:hover{background:var(--accent2);color:#fff;}
.lesson-del-card{flex:0 0 auto;cursor:pointer;border:none;border-left:1px solid var(--line);background:transparent;color:#b1442e;font-size:1rem;padding:0 14px;}
.lesson-del-card:hover{background:#b1442e;color:#fff;}
.lesson-rename-in{font-family:'KhmerEmbed',serif;font-size:1.2rem;color:var(--ink);border:1px solid var(--accent2);border-radius:5px;padding:2px 6px;width:100%;box-sizing:border-box;}
.lesson-thumb{width:84px;height:54px;object-fit:cover;border:1px solid var(--line);border-radius:6px;flex:0 0 auto;background:#eee;}
.lesson-thumb.ph{display:flex;align-items:center;justify-content:center;font-family:'KhmerEmbed',serif;color:var(--muted);background:#f2efe6;}
.lesson-meta{display:flex;flex-direction:column;gap:3px;}
.lesson-title{font-size:1.25rem;color:var(--ink);}
.lesson-pct{display:inline-block;font-family:Georgia,serif;font-size:.7rem;font-weight:bold;border-radius:9px;padding:1px 7px;margin-left:5px;vertical-align:middle;}
.lesson-pct.lo{background:#f6e0db;color:#b1442e;}
.lesson-pct.mid{background:var(--amber-bg);color:#9a6a00;}
.lesson-pct.hi{background:#dceee2;color:#2f6f4f;}
.lesson-pct.done{background:#2f6f4f;color:#fff;}
.lesson-progress{margin:8px 0 16px;}
.lp-bar{height:8px;background:#ece6d6;border-radius:5px;overflow:hidden;}
.lp-bar>span{display:block;height:100%;border-radius:5px;background:var(--accent2);transition:width .25s;}
.lp-bar.lo>span{background:#c0532e;}
.lp-bar.mid>span{background:var(--amber);}
.lp-bar.hi>span{background:#3f8f63;}
.lp-bar.done>span{background:#2f6f4f;}
.lp-stats{margin-top:5px;font-size:.78rem;color:var(--muted);}
.lesson-sub{font-size:.8rem;color:var(--muted);}
.lesson-bar{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
.lesson-back{cursor:pointer;font-family:Georgia,serif;font-size:.84rem;border:1px solid var(--line);background:var(--card);color:var(--accent);padding:7px 14px;border-radius:6px;}
.lesson-back:hover{border-color:var(--accent);background:#f6f3ea;}
.lesson-study{cursor:pointer;font-family:Georgia,serif;font-size:.84rem;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:7px 14px;border-radius:6px;}
.lesson-study.on{background:var(--accent);color:#fff;}
.coming-soon{text-align:center;padding:60px 24px;color:var(--muted);border:2px dashed var(--line);border-radius:12px;background:var(--card);margin-top:10px;}
.coming-soon h2{font-family:Georgia,serif;color:var(--accent2);margin:0 0 10px;}
.coming-soon p{max-width:520px;margin:0 auto;line-height:1.6;}
.lesson-sbs{cursor:pointer;font-family:Georgia,serif;font-size:.84rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:7px 12px;border-radius:6px;}
.lesson-sbs.on{background:var(--accent2);color:#fff;}
/* side-by-side: pinned source page beside the text (for OCR confirmation) */
/* align-items:stretch (default) so the image column is as tall as the text — the sticky
   image then stays pinned in view the whole way down, instead of scrolling off the top. */
.lesson-split{display:grid;grid-template-columns:minmax(280px,40%) 1fr;gap:20px;align-items:stretch;}
.lesson-imgcol{position:relative;}
.imgcol-sticky{position:sticky;top:12px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:10px;}
.imgcol-view{position:relative;height:72vh;overflow:hidden;border-radius:6px;background:#faf8f2;touch-action:none;}
.imgcol-view img{width:100%;display:block;transform-origin:0 0;will-change:transform;}
.imgcol-hint{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);padding:5px 2px 0;}
.imgcol-full{margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:5px;cursor:pointer;font-size:.72rem;padding:3px 8px;}
.imgcol-full:hover{border-color:var(--accent2);}
.imgcol-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
.imgcol-nav button{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:#fff;color:var(--accent);padding:5px 11px;border-radius:6px;}
.imgcol-nav button:disabled{opacity:.4;cursor:default;}
.imgcol-page{font-size:.82rem;color:var(--muted);}
.imgcol-tools{display:flex;gap:6px;margin-top:8px;}
.imgcol-tools button{cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 9px;border-radius:5px;}
.imgcol-tools .imgcol-del:hover{border-color:#c0532e;color:#c0532e;}
.imgcol-tools button:disabled{opacity:.4;cursor:default;}
.imgcol-empty{padding:24px;text-align:center;color:var(--muted);font-size:.85rem;}
.lesson-maincol{min-width:0;}
@media (max-width:760px){
  .lesson-split{grid-template-columns:1fr;}
  .imgcol-sticky{position:static;}
  .imgcol-view{height:48vh;}
}
.lesson-del{margin-left:auto;cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 12px;border-radius:6px;}
.lesson-del:hover{border-color:#c0532e;color:#c0532e;}
.lesson-h{width:100%;font-family:'KhmerEmbed',Georgia,serif;font-size:1.6rem;color:var(--accent2);border:0;border-bottom:2px solid var(--accent2);background:transparent;padding:4px 2px;margin:0 0 16px;}
.lesson-h:focus{outline:none;}
.lesson-img-add{display:inline-block;cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px dashed var(--accent);background:transparent;color:var(--accent);padding:6px 14px;border-radius:5px;margin:0 0 18px;}
.lesson-lines{display:flex;flex-direction:column;gap:4px;}
.lline{position:relative;padding:10px 26px 10px 0;border-bottom:1px solid #ece6d6;}
.lline:hover{background:#fcfbf6;}
/* dialogue: tint each turn with its speaker's colour + a left accent bar, so voices are easy to follow */
.lline.has-spk{padding-left:14px;border-left:3px solid var(--spk,#ccc);border-radius:0 8px 8px 0;}
.lline.has-spk:hover{background:var(--spk-bg,#fcfbf6);}
.lline-km{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;}
.lspk{font-family:'KhmerEmbed',serif;font-weight:700;font-size:.92rem;flex:0 0 auto;align-self:flex-start;
  color:var(--spk,var(--accent));background:var(--spk-bg,#f0ece0);border:1px solid var(--spk,#ccc);
  padding:2px 9px;border-radius:11px;line-height:1.5;}
.lkm{font-family:'KhmerEmbed',serif;font-size:1.32rem;line-height:1.85;color:var(--ink);flex:1;min-width:200px;}
.lkm-study{display:flex;flex-wrap:wrap;gap:7px 8px;flex:1;align-items:flex-start;}
.ltr-in{width:100%;margin-top:7px;font-size:.95rem;border:1px solid var(--line);border-radius:6px;padding:6px 9px;box-sizing:border-box;background:#fffdf7;color:var(--muted);font-family:Georgia,serif;}
.km-inline{color:var(--accent);background:#eef1e4;border-radius:3px;padding:0 3px;font-size:1.05em;}
.ltr-preview{margin:4px 0 0;padding:0 2px;font-family:Georgia,serif;font-size:.92rem;color:var(--ink);line-height:1.6;}
.ltr-preview:empty{display:none;}
/* word alignment */
.algn-n{display:inline-block;font-size:.58em;font-weight:bold;color:var(--alc,var(--accent2));position:relative;top:-.55em;margin-left:1px;}
.ltr-line{margin:5px 0 0;padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:#fffdf7;font-family:Georgia,serif;font-size:.95rem;color:var(--ink);line-height:1.7;cursor:text;min-height:1.4em;}
.ltr-line:hover{border-color:var(--accent2);}
.ltr-line:has(.ltr-edit){padding:0;border:none;background:transparent;}
.ltr-placeholder{color:var(--muted);font-style:italic;}
.ltr-edit{width:100%;box-sizing:border-box;font-family:Georgia,serif;font-size:.95rem;border:1px solid var(--accent2);border-radius:6px;padding:6px 9px;background:#fffdf7;color:var(--ink);}
.ltr-edit:focus{outline:none;}
.algn-w{padding:1px 2px;}
.algn-w.aligned{background:color-mix(in srgb,var(--alc) 15%,transparent);border-radius:4px;}
.grp-hl{outline:2px solid var(--alc);outline-offset:1px;border-radius:4px;}
.ltr-tools{margin-top:6px;text-align:right;}
.ltr-linkbtn{cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:none;background:transparent;color:var(--muted);padding:2px 2px;text-decoration:underline;text-underline-offset:2px;}
.ltr-linkbtn:hover{color:var(--accent2);}
/* link mode: tap the real Khmer tokens + English words to align them */
.lline.linking{background:#fbf8ef;border-radius:8px;}
.ltr-line.linking{cursor:default;border-color:var(--accent2);border-style:dashed;}
.ltr-line.linking .algn-w{cursor:pointer;border-radius:4px;}
.ltr-line.linking .algn-w:hover{background:#eef1e4;}
.lline.linking .ltok:hover{background:#eef1e4;}
.align-active{outline:2px dashed var(--alc,var(--accent2));outline-offset:2px;border-radius:5px;}
.ltr-tools.linking{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;background:#f3ede0;border:1px solid var(--accent2);border-radius:7px;padding:6px 10px;}
.link-hint{flex:1;min-width:160px;font-size:.78rem;color:var(--accent);}
.link-new{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px dashed var(--accent2);background:transparent;color:var(--accent2);padding:5px 12px;border-radius:6px;}
.link-done{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:5px 14px;border-radius:6px;}
.align-ed{margin-top:8px;padding:11px 13px;border:1px dashed var(--accent2);border-radius:8px;background:#faf8f1;}
.align-hint{font-size:.8rem;color:var(--muted);margin-bottom:9px;line-height:1.5;}
.align-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;}
.align-row.align-en{padding-top:9px;border-top:1px dashed var(--line);}
.align-chip{cursor:pointer;font-family:Georgia,serif;font-size:.9rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;padding:4px 9px;line-height:1.2;}
.align-chip.km{font-family:'KhmerEmbed',serif;font-size:1.05rem;}
.align-chip.on{border-color:var(--alc);background:color-mix(in srgb,var(--alc) 16%,transparent);}
.align-chip.active{outline:2px solid var(--alc);outline-offset:1px;}
.align-chip sup{font-size:.6em;color:var(--alc);margin-left:1px;}
.align-actions{display:flex;gap:8px;}
.align-new{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px dashed var(--accent2);background:transparent;color:var(--accent2);padding:5px 12px;border-radius:6px;}
.align-done{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:5px 14px;border-radius:6px;}
.ltr-in:focus{outline:none;border-color:var(--accent2);color:var(--ink);}
.lline-del{position:absolute;top:14px;right:2px;cursor:pointer;border:0;background:transparent;color:#d8d0bd;font-size:1.15rem;line-height:1;}
.lline-del:hover{color:#c0532e;}
/* tokens (study mode)
   The Khmer glyph is never underlined (subscripts/below-vowels would collide).
   Status (unknown / verify / unconfirmed) is shown as a line UNDER THE GLOSS (Latin,
   no descenders); alignment is a soft color tint on the whole token. */
.ltok{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:28px;padding:2px 5px;border-radius:6px;cursor:pointer;}
.ltok-km{font-family:'KhmerEmbed',serif;font-size:1.24rem;line-height:1.45;color:var(--ink);white-space:nowrap;}
.ltok-en{font-size:.7rem;color:var(--accent2);text-align:center;line-height:1.2;}
.ltok.linked:hover{background:#eef1e4;}
/* unknown = not in the deck yet → grey dotted under the gloss */
.ltok.unknown .ltok-en{color:var(--muted);border-bottom:2px dotted #b8b0a0;padding-bottom:1px;}
.ltok.unknown:hover{background:#f0ece0;}
/* amber = the card is flagged "needs verification" */
.ltok.verify .ltok-en{color:#9a6a00;border-bottom:2px solid var(--amber);padding-bottom:1px;}
/* teal dashed = auto-linked to a multi-meaning card; sense not confirmed here */
.ltok.ambig .ltok-en{border-bottom:2px dashed var(--accent2);padding-bottom:1px;}
.ltok-q{color:var(--accent2);font-weight:bold;margin-left:1px;}
/* numbers + names: linkable but not vocab — neutral styling, no "unknown" dotted gloss */
.ltok.num .ltok-en,.ltok.name .ltok-en{color:#5a6b8a;}
.ltok.num:hover,.ltok.name:hover{background:#eef1f6;}
.ltok.name .ltok-km{font-style:italic;}
.ltp-exlabel{display:block;font-size:.74rem;color:var(--muted);margin:6px 0 8px;}
.ltp-exlabel input{display:block;width:100%;box-sizing:border-box;margin-top:3px;font-size:.95rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;}
.ltp-name{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 12px;border-radius:6px;}
.ltp-name:hover{border-color:#5a6b8a;color:#5a6b8a;}
/* alignment = soft tint by link-group colour (set via --alc), plus the superscript number */
.ltok.aligned{background:color-mix(in srgb,var(--alc) 13%,transparent);}
.ltok.aligned:hover{background:color-mix(in srgb,var(--alc) 22%,transparent);}
/* grammar-grouping (meta) layer: phrase chips + the "group phrases" tool */
.ltok.in-meta .ltok-km{border-bottom:2px solid #b59bcf;padding-bottom:1px;}
.ltok.phrase-sel{background:#efe4f5;outline:2px solid #9a6cc0;outline-offset:1px;border-radius:4px;}
.lmeta{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px;}
.lmeta-chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;border:1px solid var(--mc);border-left:4px solid var(--mc);background:color-mix(in srgb,var(--mc) 8%,#fff);border-radius:5px;padding:2px 6px 2px 8px;}
.lmeta-chip.pair{border-style:dashed;}
.lmeta-type{color:var(--mc);font-weight:bold;text-transform:uppercase;letter-spacing:.03em;font-size:.68rem;}
.lmeta-words{font-family:'KhmerEmbed',serif;color:var(--ink);}
.lmeta-rm{cursor:pointer;border:0;background:transparent;color:var(--muted);font-size:.95rem;line-height:1;padding:0 1px;}
.lmeta-rm:hover{color:#c0532e;}
.phrase-tools{margin:2px 0 4px;}
.phrase-btn{cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:none;background:transparent;color:var(--muted);padding:2px;text-decoration:underline;text-underline-offset:2px;}
.phrase-btn:hover{color:#9a6cc0;}
.phrase-tools.linking{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#efe9f3;border:1px solid #9a6cc0;border-radius:7px;padding:6px 10px;}
.phrase-type{font-size:.82rem;border:1px solid var(--line);border-radius:5px;padding:4px 6px;background:#fff;}
.phrase-create,.phrase-done{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid #9a6cc0;background:#fff;color:#6a3d97;padding:4px 11px;border-radius:6px;}
.phrase-create{background:#9a6cc0;color:#fff;}
.pair-btn{cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:none;background:transparent;color:var(--muted);padding:2px;margin-left:10px;text-decoration:underline;text-underline-offset:2px;}
.pair-btn:hover{color:#2f8f7d;}
.phrase-tools.linking.pair{background:#e3f1ee;border-color:#2f8f7d;}
.phrase-tools.linking.pair .phrase-create{background:#2f8f7d;border-color:#2f8f7d;}
/* pair-word halves: SOLID teal underline + a small ⇄ marker; hover lights both halves.
   (Solid, not dotted — a recognized pair is confirmed, not uncertain; dotted read as "unfinished".) */
.ltok.pair-tok .ltok-km{border-bottom:2px solid #2f8f7d;padding-bottom:1px;}
.pair-mark{font-size:.7rem;color:#2f8f7d;margin-left:2px;vertical-align:super;}
.ltok.pair-hl{background:color-mix(in srgb,#2f8f7d 16%,transparent);border-radius:4px;}
/* ----- On-screen Khmer keyboard helper ----- */
#kkbd{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:9000;
  background:#1f2a28;color:#eee;border:1px solid #2f8f7d;border-radius:10px;padding:8px 10px 10px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:min(840px,98vw);user-select:none;}
.kkbd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px;}
.kkbd-title{font-size:.82rem;font-weight:600;color:#d8efe9;}
.kkbd-sub{font-weight:400;color:#9fb8b1;font-size:.72rem;}
.kkbd-headbtns{display:flex;gap:6px;align-items:center;}
.kkbd-reset{background:#33403d;color:#cfe6df;border:none;border-radius:6px;height:24px;padding:0 9px;cursor:pointer;font-size:.72rem;}
.kkbd-reset:hover{background:#445350;}
.kkbd-x{background:#33403d;color:#cfe6df;border:none;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:.85rem;}
.kkbd-x:hover{background:#445350;}
.kkbd-rows{display:flex;flex-direction:column;gap:4px;}
.kkbd-row{display:flex;gap:4px;justify-content:center;}
.kkbd-row1{padding-left:14px;}
.kkbd-row2{padding-left:30px;}
.kkbd-row3{padding-left:46px;}
.kk-key{position:relative;width:40px;height:42px;border-radius:6px;background:#2b3735;border:1px solid #3b4a47;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.kk-key .kk-lat{position:absolute;top:2px;left:4px;font-size:.6rem;color:#8aa39c;}
/* default (base) view: base glyph centered/large, shift glyph small in the top-right corner */
.kk-key .kk-base{font-size:1.15rem;line-height:1;color:#fff;}
.kk-key .kk-shift{position:absolute;top:2px;right:4px;font-size:.72rem;color:#bcd;line-height:1;}
.kk-key .kk-seed{opacity:.38;font-style:normal;}      /* unconfirmed NIDA guess — dimmed */
/* Shift held: the two glyphs SWAP — shift glyph becomes the centered/large one, base drops to the corner */
#kkbd.kkbd-shifted .kk-shift{position:static;top:auto;right:auto;font-size:1.15rem;color:#fff;}
#kkbd.kkbd-shifted .kk-base{position:absolute;top:2px;right:4px;font-size:.72rem;color:#bcd;}
.kk-key.kk-down{background:#2f8f7d;border-color:#52c2ad;}
.kk-key.kk-down .kk-base, .kk-key.kk-down .kk-shift{color:#06221c;}
.kk-space{width:200px;height:24px;}
.kk-space .kk-base{font-size:.7rem;color:#8aa39c;}
#kkbd-pill{position:fixed;right:14px;bottom:14px;z-index:9000;background:#2f8f7d;color:#fff;border:none;
  border-radius:18px;padding:8px 14px;font-size:.82rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);}
#kkbd-pill:hover{background:#37a08c;}
/* editor: pair-word role controls */
.ed-pairrole{margin:6px 0 2px;}
.ed-pairrole .ed-prole{font-size:.85rem;border:1px solid var(--line);border-radius:5px;padding:5px 6px;background:#fff;margin-left:6px;}
.ed-prole-combined,.ed-prole-iso{display:flex;gap:6px;align-items:center;margin-top:6px;}
.ed-prole-combined input,.ed-prole-iso input{font-size:1rem;border:1px solid var(--line);border-radius:5px;padding:5px 8px;}
.ed-pu-plus{color:var(--muted);}
.ed-pu-hint{flex-basis:100%;font-size:.74rem;color:var(--muted);margin-top:4px;}
.fc-halves{font-size:.78rem;color:var(--muted);margin:2px 0 6px;text-align:center;}
.fc-halves .khmer{font-family:'KhmerEmbed',serif;font-size:1rem;color:var(--accent);}
.fc-pairmeanings{margin:10px 0;padding:8px 10px;border:1px solid #2f8f7d;border-radius:7px;background:#f3faf8;}
.fc-pairmeanings .fcc-label{margin-bottom:5px;}
.pm-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-top:1px dashed #cfe6df;}
.pm-row:first-of-type{border-top:none;}
.pm-km{font-family:'KhmerEmbed',serif;font-size:1.05rem;color:var(--accent);min-width:2.5em;}
.pm-def{flex:1;font-size:.95rem;}
.pm-tag{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.pm-cur{background:#fff7df;border-radius:5px;padding-left:5px;padding-right:5px;margin:0 -5px;}
.pm-cur .pm-tag{color:#b8860b;}
/* English dictionary editor */
.enlex-add{display:flex;gap:6px;align-items:center;margin:0 0 12px;}
.enlex-add input{font-size:1rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;flex:1;}
.enlex-addbtn{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px dashed var(--accent);background:transparent;color:var(--accent);padding:6px 12px;border-radius:5px;}
.enlex-search{width:100%;box-sizing:border-box;font-size:1rem;border:1px solid var(--line);border-radius:6px;padding:8px 11px;margin:0 0 10px;}
.enlex-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;}
.enlex-seed{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#f0ece0;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle;}
.enlex-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;padding:5px 9px;}
.enlex-word{font-weight:bold;color:var(--ink);min-width:110px;}
.enlex-pos{flex:1;}
.enlex-rm{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:1rem;line-height:1;border-radius:5px;padding:2px 8px;}
.enlex-rm:hover{border-color:#c0532e;color:#c0532e;}
/* inline English POS tagger inside link mode */
.en-tagbox{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;padding:8px 10px;background:#eef4f0;border:1px solid #2f8f7d;border-radius:7px;}
.entag-row{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;}
.entag-w{color:var(--ink);}
.entag-sel{font-size:.8rem;border:1px solid var(--line);border-radius:5px;padding:3px 5px;background:#fff;}
.entag-empty{font-size:.82rem;color:var(--muted);}
.en-tagbtn{cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:none;background:transparent;color:#2f8f7d;padding:2px 4px;text-decoration:underline;text-underline-offset:2px;}
/* unrecognized English words → quick-add to the dictionary, shown beside the translation */
.ltr-unrec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:5px 0 2px;padding:5px 9px;background:#fbf6ec;border:1px dashed #c79a5b;border-radius:7px;}
.unrec-label{font-size:.74rem;color:#8a5a16;text-transform:uppercase;letter-spacing:.03em;}
.unrec-w{display:inline-flex;align-items:center;gap:4px;font-size:.86rem;color:var(--ink);}
.unrec-pos{font-size:.78rem;border:1px solid var(--line);border-radius:5px;padding:3px 5px;background:#fff;}
.ltok-pop{position:relative;background:#fff;border:1px solid var(--accent2);border-radius:9px;padding:12px 36px 12px 14px;margin:8px 0 12px;box-shadow:0 4px 16px rgba(0,0,0,.1);}
.ltp-close{position:absolute;top:7px;right:9px;cursor:pointer;border:none;background:transparent;color:var(--muted);font-size:1.35rem;line-height:1;padding:1px 7px;border-radius:5px;}
.ltp-close:hover{background:#f0ece0;color:var(--accent);}
.ltp-km{font-family:'KhmerEmbed',serif;font-size:1.5rem;color:var(--accent);margin-bottom:4px;}
.ltp-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px;}
.ltp-senses{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.ltp-sense{cursor:pointer;font-family:inherit;font-size:.9rem;border:1px solid var(--line);background:#f6f3ea;color:var(--ink);border-radius:14px;padding:4px 12px;}
.ltp-sense.on{background:var(--accent2);color:#fff;border-color:var(--accent2);}
.ltp-cands{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.ltp-cand{cursor:pointer;text-align:left;font-family:inherit;font-size:.85rem;border:1px solid var(--accent2);background:#eef5f3;color:var(--ink);border-radius:8px;padding:6px 11px;}
.ltp-cand .khmer{font-size:1.05rem;}
.ltp-cand.on{background:var(--accent2);color:#fff;}
.ltp-srows{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.ltp-srow{display:flex;align-items:center;gap:7px;}
.ltp-use{flex:none;cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:1px solid var(--line);background:#f6f3ea;color:var(--muted);border-radius:13px;padding:4px 10px;white-space:nowrap;}
.ltp-srow.on .ltp-use{background:var(--accent2);color:#fff;border-color:var(--accent2);}
.ltp-sdef{flex:1;font-family:Georgia,serif;font-size:.9rem;border:1px solid var(--line);border-radius:5px;padding:5px 8px;background:#fff;color:var(--ink);}
.ltp-srow.on .ltp-sdef{border-color:var(--accent2);}
.ltp-clearverify{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px solid var(--amber);background:var(--amber-bg);color:#9a6a00;padding:6px 12px;border-radius:6px;}
.ltp-clearverify:hover{background:var(--amber);color:#fff;}
/* popover info card (main view) */
.ltp-info{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px;padding-top:10px;border-top:1px dashed var(--line);}
.ltp-irow{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:baseline;}
.ltp-il{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:3px;}
.ltp-iv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.ltp-tag{display:inline-flex;align-items:baseline;gap:5px;font-family:Georgia,serif;font-size:.82rem;color:var(--ink);background:#f0ece0;border-radius:12px;padding:2px 10px;}
.ltp-tag .khmer{color:var(--accent);}
.ltp-tag-l{font-size:.72rem;color:var(--muted);}
.ltp-ex{font-size:1.05rem;color:var(--accent);}
.ex-hl{background:#fde9a8;border-radius:3px;padding:0 2px;color:#7a4b00;}
.ltp-exrow{display:flex;flex-direction:column;gap:4px;margin:2px 0 10px;}
.ltp-exlabel{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.ltp-exin{font-family:'KhmerEmbed',serif;font-size:1rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;}
.ltp-inote{font-family:Georgia,serif;font-size:.85rem;color:var(--ink);line-height:1.45;}
.ltp-verifynote{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;color:#9a6a00;background:var(--amber-bg);border-radius:5px;padding:5px 6px 5px 9px;}
.ltp-verifynote .ltp-clearverify{flex:none;cursor:pointer;font-family:Georgia,serif;font-size:.76rem;border:1px solid var(--amber);background:#fff;color:#9a6a00;padding:4px 11px;border-radius:5px;}
.ltp-verifynote .ltp-clearverify:hover{background:var(--amber);color:#fff;}
.ltp-editbtn{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:6px 13px;border-radius:6px;}
.ltp-editbtn:hover{background:var(--accent2);color:#fff;}
.ltp-editing{font-size:.8rem;color:var(--muted);font-family:Georgia,serif;}
.ltp-backmain{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 12px;border-radius:6px;}
.ltp-made{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px;padding-top:9px;border-top:1px dashed var(--line);}
.ltp-made-l{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.ltp-comp{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line);background:#f6f3ea;border-radius:13px;padding:3px 10px;font-family:inherit;}
.ltp-comp.linkable{cursor:pointer;}
.ltp-comp.linkable:hover{border-color:var(--accent2);background:#eef1e4;}
.ltp-comp .khmer{font-size:1.05rem;color:var(--accent);}
.ltp-comp-en{font-size:.8rem;color:var(--muted);}
.ltp-addsense{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px dashed var(--accent2);background:transparent;color:var(--accent2);padding:6px 12px;border-radius:6px;}
.ltp-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ltp-make{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:6px 13px;border-radius:6px;}
/* sentence popup: "edit card" is the primary (filled); "open card" is secondary (outline) */
.ltp-editcard,.ltp-editcard2{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:6px 13px;border-radius:6px;}
.ltp-editcard:hover,.ltp-editcard2:hover{filter:brightness(1.06);}
.ltp-go{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:6px 13px;border-radius:6px;}
.ltp-go:hover{background:var(--accent2);color:#fff;}
.ltp-actions-sub{margin-top:7px;}
.ltp-actions-sub .ltp-editbtn{font-size:.78rem;padding:5px 11px;}
.ltp-unlink,.ltp-link{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 12px;border-radius:6px;}
.ltp-def{font-family:'KhmerEmbed',Georgia,serif;font-size:.95rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;margin-bottom:8px;width:100%;box-sizing:border-box;}
.ltp-or{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;margin:12px 0 8px;}
.ltp-search{font-family:'KhmerEmbed',Georgia,serif;font-size:.9rem;border:1px solid var(--line);border-radius:5px;padding:6px 9px;width:100%;box-sizing:border-box;}
.ltp-results{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.ltp-rc{display:flex;align-items:baseline;gap:10px;cursor:pointer;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:#faf8f1;}
.ltp-rc:hover{background:#f0ece0;border-color:var(--accent2);}
.ltp-rc .khmer{font-size:1.15rem;color:var(--accent);min-width:54px;}
.ltp-rc-def{font-size:.85rem;color:var(--muted);}
.ltp-none{font-size:.82rem;color:var(--muted);padding:4px 2px;}
.ltp-linksense{cursor:pointer;font-family:inherit;font-size:.88rem;border:1px solid var(--line);background:#f6f3ea;color:var(--ink);border-radius:14px;padding:4px 12px;}
.ltp-linksense:hover{background:var(--accent2);color:#fff;border-color:var(--accent2);}
.ltp-addmean{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:6px 13px;border-radius:6px;}
.ltp-back{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 12px;border-radius:6px;}
.ltp-seg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);}
.ltp-seg-l{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px;}
.ltp-mergep,.ltp-mergen,.ltp-split,.ltp-edittext{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--line);background:#f6f3ea;color:var(--accent);padding:5px 10px;border-radius:6px;}
.ltp-mergep:hover,.ltp-mergen:hover,.ltp-split:hover,.ltp-edittext:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.ltp-deltok{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid #e0c4bc;background:#f6e0db;color:#b1442e;padding:5px 10px;border-radius:6px;}
.ltp-deltok:hover{background:#b1442e;color:#fff;border-color:#b1442e;}
.ltp-splitbox,.ltp-editbox{margin-top:8px;}
.ltp-splitrow{display:flex;gap:7px;margin-top:5px;}
.ltp-splitin,.ltp-editin{flex:1;font-family:'KhmerEmbed',serif;font-size:1.05rem;border:1px solid var(--accent2);border-radius:5px;padding:6px 9px;letter-spacing:2px;}
.ltp-splitgo,.ltp-editgo{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:6px 14px;border-radius:6px;}

/* ---- merge lessons panel ---- */
.merge-rows{display:flex;flex-direction:column;gap:6px;margin:10px 0 80px;}
.merge-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;}
.merge-row.on{border-color:var(--accent2);background:#f3eef6;}
.merge-row.recent{box-shadow:0 0 0 2px var(--amber);border-color:var(--amber);}
.merge-pos{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent2);color:#fff;font-family:Georgia,serif;font-size:.8rem;font-weight:bold;}
.merge-pick{display:flex;align-items:center;}
.merge-pick input{width:18px;height:18px;cursor:pointer;}
.merge-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.merge-title{font-size:1.02rem;color:var(--ink);}
.merge-sub{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.merge-move{display:flex;gap:4px;}
.merge-up,.merge-dn{cursor:pointer;font-size:.9rem;border:1px solid var(--line);background:#f6f3ea;color:var(--accent);width:30px;height:30px;border-radius:6px;}
.merge-up:disabled,.merge-dn:disabled{opacity:.3;cursor:default;}
.merge-actions{display:flex;gap:8px;justify-content:center;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;background:var(--card);padding:10px 14px;border:1px solid var(--accent2);border-radius:30px;box-shadow:0 4px 18px rgba(0,0,0,.22);}
.merge-go{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:8px 16px;border-radius:6px;}
.merge-go:disabled{opacity:.4;cursor:default;}

/* ---- smart import (auto-group images) ---- */
.sg-groups{display:flex;flex-direction:column;gap:12px;margin:12px 0;}
.sg-group{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fffdf7;}
.sg-ghead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.sg-gnum{font-family:Georgia,serif;font-size:.8rem;color:var(--accent2);font-weight:bold;white-space:nowrap;}
.sg-title{flex:1;font-size:1rem;border:1px solid var(--line);border-radius:6px;padding:6px 9px;}
.sg-gmove{display:flex;gap:4px;}
.sg-gup,.sg-gdn,.sg-gdel{cursor:pointer;font-size:.85rem;border:1px solid var(--line);background:#f6f3ea;color:var(--accent);width:28px;height:28px;border-radius:6px;}
.sg-gdel{color:#b1442e;border-color:#e0c4bc;background:#f6e0db;}
.sg-gup:disabled,.sg-gdn:disabled,.sg-gdel:disabled{opacity:.3;cursor:default;}
.sg-pages{display:flex;flex-wrap:wrap;gap:8px;}
.sg-page{margin:0;display:flex;flex-direction:column;gap:4px;width:110px;}
.sg-thumb{width:110px;height:80px;object-fit:cover;border:1px solid var(--line);border-radius:6px;cursor:zoom-in;background:#eee;}
.sg-page figcaption{display:flex;flex-direction:column;gap:3px;align-items:center;}
.sg-pnum{font-size:.7rem;color:var(--muted);max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-prow{display:flex;gap:4px;}
.sg-pl,.sg-pr{cursor:pointer;font-size:.7rem;border:1px solid var(--line);background:#f6f3ea;color:var(--accent);width:30px;height:24px;border-radius:5px;}
.sg-pl:disabled,.sg-pr:disabled{opacity:.3;cursor:default;}
.sg-move{font-size:.7rem;border:1px solid var(--line);border-radius:5px;padding:2px;max-width:108px;}
.sg-empty{font-size:.78rem;color:var(--muted);font-style:italic;}
.sg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.sg-add{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:#f6f3ea;color:var(--accent);padding:8px 14px;border-radius:6px;}
.sg-create{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:8px 16px;border-radius:6px;}
.sg-create:disabled{opacity:.4;cursor:default;}
.sg-status{font-size:.82rem;color:var(--accent2);margin-top:8px;}

/* ---- word-order analysis panel ---- */
.an-summary{margin:10px 0;padding:12px 14px;background:#eef5f3;border:1px solid var(--accent2);border-radius:8px;font-size:1rem;color:var(--ink);}
.an-h2{margin:18px 0 6px;font-family:Georgia,serif;font-size:.95rem;font-weight:bold;color:var(--accent);}
.an-help{font-size:.82rem;color:var(--muted);margin:0 0 10px;line-height:1.5;}
.an-rule{margin:0 0 9px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:6px;background:#fffdf7;font-size:.92rem;line-height:1.5;color:var(--ink);}
.an-count{font-size:.75rem;color:var(--muted);white-space:nowrap;}
.an-eg{margin-top:4px;font-size:.85rem;color:var(--muted);}
.an-eg .khmer{font-family:'KhmerEmbed',serif;font-size:1.05rem;color:var(--accent);}
.an-sent{margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.an-row{display:flex;align-items:center;gap:8px;margin:3px 0;}
.an-side{flex:0 0 auto;width:42px;font-size:.72rem;color:var(--muted);text-transform:uppercase;}
.an-chips{display:flex;flex-wrap:wrap;gap:6px;}
.an-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 4px;border-radius:14px;background:color-mix(in srgb,var(--c) 16%,#fff);border:1px solid color-mix(in srgb,var(--c) 45%,#fff);font-size:.9rem;}
.an-chip .khmer{font-family:'KhmerEmbed',serif;font-size:1.1rem;color:var(--ink);}
.an-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font-family:Georgia,serif;font-size:.72rem;font-weight:bold;flex:0 0 auto;}
.an-rule-flip{border-left-color:#2f6690;background:#f5f9fc;}
.an-pos{color:var(--muted);font-size:.7rem;font-style:italic;}
.an-chip small{color:var(--muted);font-size:.7rem;}
/* favorited-sentences panel + per-line star */
.lline-fav{cursor:pointer;border:none;background:transparent;font-size:1.05rem;line-height:1;color:#c9b24a;padding:2px 4px;}
.lline-fav.on{color:#e0a800;}
.favsent-row{border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:0 0 9px;background:#fff;}
.favsent-km{font-family:'KhmerEmbed',serif;font-size:1.15rem;color:var(--ink);margin-bottom:3px;}
.favsent-en{font-size:.9rem;color:var(--muted);margin-bottom:5px;}
.favsent-note{font-size:.85rem;color:#5a4a2c;background:#fffdf3;border-left:3px solid var(--amber);padding:4px 9px;border-radius:4px;margin:4px 0;}
.favsent-from{font-size:.74rem;color:var(--muted);margin:4px 0 6px;}
.favsent-open{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:4px 11px;border-radius:6px;}
.favsent-unfav{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 10px;border-radius:6px;margin-left:6px;}

/* ---- grammar notes (lesson analysis) ---- */
.lesson-head-btns{display:flex;gap:8px;flex-wrap:wrap;}
.lesson-ref{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:7px 14px;border-radius:6px;}
.lesson-ref:hover{background:var(--accent);color:#fff;}
.lesson-ocr{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:7px 14px;border-radius:6px;}
.lesson-ocr:hover{background:var(--accent2);color:#fff;}
.lesson-tools-wrap{position:relative;}
.lesson-tools-btn{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:7px 14px;border-radius:6px;}
.lesson-tools-btn:hover{background:var(--accent2);color:#fff;}
.lesson-tools-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:30;background:#fff;border:1px solid var(--accent2);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.13);padding:5px;display:flex;flex-direction:column;min-width:230px;}
.lesson-tools-menu button{cursor:pointer;text-align:left;white-space:nowrap;font-family:Georgia,serif;font-size:.85rem;border:none;background:transparent;color:var(--ink);padding:8px 12px;border-radius:6px;}
.lesson-tools-menu button:hover{background:#f0ece0;}
.lesson-tools-menu button.danger{color:#b1442e;border-top:1px solid var(--line);margin-top:3px;padding-top:9px;}
.lesson-tools-menu button.danger:hover{background:#f6e0db;}
.lesson-import{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:7px 14px;border-radius:6px;}
.lesson-import:hover{background:var(--accent2);color:#fff;}
.import-ta{width:100%;box-sizing:border-box;min-height:140px;font-family:'KhmerEmbed',monospace;font-size:.85rem;border:1px solid var(--line);border-radius:6px;padding:9px 11px;resize:vertical;margin-bottom:10px;line-height:1.5;}
.pt-title{display:block;font-size:.8rem;color:var(--muted);margin:0 0 8px;}
.pt-title input{display:block;width:100%;box-sizing:border-box;margin-top:3px;font-size:1.05rem;border:1px solid var(--line);border-radius:5px;padding:7px 9px;}
.pt-opt{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink);}
.attach-rows{display:flex;flex-direction:column;gap:7px;margin:10px 0;}
.attach-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;}
.attach-thumb{width:70px;height:44px;object-fit:cover;border:1px solid var(--line);border-radius:4px;flex:0 0 auto;cursor:zoom-in;}
.attach-move{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;}
.attach-move button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--accent2);border-radius:4px;width:22px;height:18px;line-height:1;font-size:.7rem;padding:0;}
.attach-move button:disabled{opacity:.3;cursor:default;}
.attach-name{flex:1;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.attach-arrow{color:var(--muted);}
.attach-sel{font-family:'KhmerEmbed',Georgia,serif;font-size:.88rem;border:1px solid var(--line);border-radius:5px;padding:5px 8px;max-width:230px;background:#fff;}
.ocr-panel{margin:0 0 18px;padding:14px 16px;border:1px solid var(--accent2);border-radius:9px;background:#faf8f1;}
.ocr-h{font-family:Georgia,serif;font-weight:bold;color:var(--accent);margin-bottom:6px;}
.ocr-note{font-size:.85rem;color:var(--muted);line-height:1.5;margin:0 0 10px;}
.ocr-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ocr-row input[type=password]{flex:1;min-width:220px;font-family:monospace;font-size:.85rem;border:1px solid var(--line);border-radius:5px;padding:7px 9px;}
.ocr-row button{cursor:pointer;font-family:Georgia,serif;font-size:.84rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:7px 14px;border-radius:6px;}
.ocr-row button.ghost{background:transparent;color:var(--muted);border-color:var(--line);}
.ocr-file{cursor:pointer;font-family:Georgia,serif;font-size:.84rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:7px 16px;border-radius:6px;}
.ocr-link{cursor:pointer;color:var(--accent2);text-decoration:underline;}
.ocr-status{margin-top:10px;font-size:.85rem;color:var(--accent);}
.ocr-err{color:#b1442e;}
.ocr-ok{color:var(--accent2);font-weight:bold;}
.lnotes{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:7px;background:#faf8f1;}
.lnotes-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent2);font-weight:bold;margin-bottom:8px;}
.lnote{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.lnote-v{flex:none;cursor:pointer;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#eef1e4;color:var(--accent2);font-size:.85rem;line-height:1;}
.lnote.verify .lnote-v{background:var(--amber-bg);border-color:var(--amber);color:#9a6a00;}
.lnote.verify{background:var(--amber-bg);border-radius:6px;padding:6px;margin:-0 -2px 8px;}
.lnote-body{flex:1;display:flex;flex-direction:column;gap:4px;}
.lnote-t{font-family:Georgia,serif;font-weight:bold;font-size:.9rem;color:var(--ink);border:none;border-bottom:1px solid var(--line);background:transparent;padding:2px 0;}
.lnote-d{font-family:Georgia,serif;font-size:.88rem;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px 8px;resize:vertical;background:#fff;}
.lnote-del{flex:none;cursor:pointer;border:none;background:transparent;color:var(--muted);font-size:1.1rem;line-height:1;padding:2px 4px;}
.lnote-del:hover{color:#b1442e;}
.lnote-add{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px dashed var(--accent2);background:transparent;color:var(--accent2);padding:5px 12px;border-radius:6px;}

/* ---- sentence drill ---- */
.sd-empty{text-align:center;color:var(--muted);padding:48px 20px;font-size:.95rem;line-height:1.6;}
.sd-empty b{display:block;font-size:1.15rem;color:var(--accent);margin-bottom:8px;}
.sd-top{text-align:center;margin-bottom:14px;}
.sd-count{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.sd-card{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:26px 24px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.sd-src{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent2);margin-bottom:10px;}
.sd-spk{font-size:1rem;color:var(--accent2);margin-bottom:4px;}
.sd-km{font-family:'KhmerEmbed',serif;font-size:1.9rem;line-height:1.7;color:var(--ink);}
.sd-hint{font-size:.85rem;color:var(--muted);margin:16px 0 18px;font-style:italic;}
.sd-show{cursor:pointer;font-family:Georgia,serif;font-size:.95rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:11px 26px;border-radius:8px;}
.sd-divider{height:1px;background:var(--rule);margin:20px 0;}
.sd-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.sd-w{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);border-radius:7px;padding:7px 11px;background:#faf8f1;min-width:54px;}
.sd-w.unknown{border-style:dashed;border-color:#b8b0a0;}
.sd-w.aligned{background:color-mix(in srgb,var(--alc) 13%,transparent);border-color:var(--alc);}
.sd-wkm{font-family:'KhmerEmbed',serif;font-size:1.3rem;color:var(--accent);}
.sd-wen{font-family:Georgia,serif;font-size:.82rem;color:var(--ink);}
.sd-w.unknown .sd-wen{color:var(--muted);}
.sd-en-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px;}
.sd-en{font-family:Georgia,serif;font-size:1.15rem;color:var(--ink);margin-bottom:6px;}
.sd-noen{font-size:.9rem;color:var(--muted);font-style:italic;}
.sd-notes{margin-top:16px;text-align:left;border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:7px;background:#faf8f1;padding:10px 13px;}
.sd-notes-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent2);font-weight:bold;margin-bottom:6px;}
.sd-note{font-family:Georgia,serif;font-size:.88rem;color:var(--ink);line-height:1.5;margin-bottom:4px;}
.sd-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px;}
.sd-next{cursor:pointer;font-family:Georgia,serif;font-size:.95rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:11px 24px;border-radius:8px;}
.sd-open{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--accent);padding:9px 16px;border-radius:7px;}
.gnum{display:inline-block;font-size:.7rem;opacity:.7;border:1px solid currentColor;border-radius:4px;padding:0 5px;margin-left:7px;}

/* ---- "view meaning in context" on a flashcard ---- */
.fc-context{margin:12px auto 4px;max-width:460px;}
.ctx-card{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;background:#faf8f1;padding:12px 14px;text-align:left;}
.ctx-spk{font-size:.95rem;color:var(--accent2);margin-bottom:3px;}
.ctx-km{font-family:'KhmerEmbed',serif;font-size:1.35rem;line-height:1.7;color:var(--ink);}
.ctx-hl{background:#fde9a8;border-radius:4px;padding:0 3px;color:#7a4b00;}
.ctx-en{font-family:Georgia,serif;font-size:.9rem;color:var(--muted);margin-top:6px;font-style:italic;}
.ctx-open{cursor:pointer;font-family:Georgia,serif;font-size:.78rem;border:none;background:transparent;color:var(--accent);padding:8px 0 2px;text-decoration:underline;}
.fc-ctx-btn{display:block;margin:8px auto 0;cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px solid var(--line);background:#fff;color:var(--accent2);padding:6px 14px;border-radius:16px;}
.fc-ctx-btn:hover{background:var(--accent2);color:#fff;border-color:var(--accent2);}

/* ---- suspended-cards list ---- */
.susp-list{display:flex;flex-direction:column;gap:8px;}
.susp-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#faf8f1;}
.susp-km{font-size:1.25rem;color:var(--accent);min-width:70px;}
.susp-def{flex:1;font-size:.9rem;color:var(--muted);}
.susp-restore{cursor:pointer;font-family:Georgia,serif;font-size:.8rem;border:1px solid var(--accent2);background:transparent;color:var(--accent2);padding:5px 13px;border-radius:5px;white-space:nowrap;}
.susp-restore:hover{background:var(--accent2);color:#fff;}

/* ---- app-only additions ---- */
.backup-row{display:flex;align-items:center;gap:12px;justify-content:center;margin:26px 0 0;flex-wrap:wrap;}
.backup-row button,.restore-label{font-family:Georgia,serif;font-size:.82rem;cursor:pointer;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:8px 16px;border-radius:6px;}
.restore-label{display:inline-block;}
.save-indicator{font-size:.8rem;color:#3f6b27;opacity:0;transition:opacity .2s;margin-left:auto;}
.save-indicator.on{opacity:1;}

/* ---- POS Khmer terms ---- */
.fc-tag.pos .pos-km{font-family:'KhmerEmbed',serif;margin-left:2px;}
.pt-hint{font-size:.82rem;color:var(--muted);margin:0 0 12px;}
/* term cards (POS / phrase types) with description + examples */
.pt-terms{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.pt-term{border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:#fff;}
.pt-term-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.pt-term-head .pt-en{font-size:1rem;font-weight:bold;color:var(--ink);}
.pt-f{display:block;font-size:.72rem;color:var(--muted);margin:5px 0 0;}
.pt-f input{display:block;width:100%;box-sizing:border-box;margin-top:2px;font-size:.92rem;border:1px solid var(--line);border-radius:5px;padding:5px 8px;}
.pt-km-row{display:flex;gap:8px;}
.pt-km-row .pt-f{flex:1;}
.pt-km-row .pt-f-abbr{flex:0 0 90px;}
.pt-grid{display:grid;grid-template-columns:1fr 1.4fr .8fr;gap:8px 10px;align-items:center;margin-bottom:14px;}
.pt-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.pt-en{font-size:.92rem;color:var(--ink);}
.pt-en.pt-warn{color:#9a6a00;}
.pt-grid input{font-size:1.05rem;border:1px solid var(--line);border-radius:5px;padding:5px 8px;}
#ptSave{cursor:pointer;font-family:Georgia,serif;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:8px 18px;border-radius:6px;}
#ptMsg{margin-left:10px;font-size:.84rem;color:var(--accent2);}
/* generalized term-list editor: 4th column for the remove button */
.pt-grid4{grid-template-columns:1fr 1.4fr .8fr auto;}
.pt-rm{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:1rem;line-height:1;border-radius:5px;padding:3px 8px;}
.pt-rm:hover{border-color:#c0532e;color:#c0532e;}
.pt-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 12px;}
.pt-add input{font-size:1rem;border:1px solid var(--line);border-radius:5px;padding:5px 8px;}
.pt-addbtn{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px dashed var(--accent);background:transparent;color:var(--accent);padding:5px 12px;border-radius:5px;}

/* reusable multi-select (chips + add dropdown) — used for type-of-word & formality */
.ed-ms{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.ms-chips{display:inline-flex;flex-wrap:wrap;gap:6px;}
.ms-chip{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;background:#eef1e4;border:1px solid var(--line);border-radius:12px;padding:2px 6px 2px 10px;}
.ms-rm{cursor:pointer;border:0;background:transparent;color:var(--muted);font-size:1rem;line-height:1;padding:0 1px;}
.ms-rm:hover{color:#c0532e;}
.ms-add{font-size:.82rem;border:1px solid var(--line);border-radius:5px;padding:4px 6px;background:#fff;color:var(--muted);}

/* collapsed "advanced" sections in the card / add-word editor */
.ed-adv{margin:4px 0 10px;border:1px solid var(--line);border-radius:6px;background:#fafaf6;}
.ed-adv>summary{cursor:pointer;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 10px;list-style:none;}
.ed-adv>summary::-webkit-details-marker{display:none;}
.ed-adv>summary::before{content:'▸ ';}
.ed-adv[open]>summary::before{content:'▾ ';}
.ed-adv>*:not(summary){margin:0 10px 8px;}
.ed-var-fmt{font-size:.85rem;border:1px solid var(--line);border-radius:5px;padding:5px 6px;background:#fff;}

/* favorite star on the flashcard + in the comprehension popup */
.fc-fav{position:absolute;top:8px;right:10px;cursor:pointer;border:0;background:transparent;font-size:1.5rem;line-height:1;color:#c9b24a;padding:2px 4px;}
.fc-fav.on{color:#e0a800;}
.flashcard{position:relative;}
.ltp-fav{cursor:pointer;font-family:Georgia,serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 11px;border-radius:6px;}
.ltp-fav.on{border-color:#e0a800;color:#a87800;background:#fdf6e3;}
#favDeckBtn.active{border-color:#e0a800;color:#a87800;background:#fdf6e3;}

/* ===================== Notebook (Notes mode) ===================== */
/* break the notebook out of the 920px column so the editor gets nearly the whole page */
.notes-wrap{display:flex;gap:18px;align-items:flex-start;width:calc(100vw - 44px);max-width:1560px;margin-left:50%;transform:translateX(-50%);}
.notes-side{flex:0 0 206px;max-width:206px;display:flex;flex-direction:column;gap:8px;position:sticky;top:8px;max-height:calc(100vh - 24px);overflow:auto;font-size:.9rem;}
.notes-main{flex:1;min-width:0;}
.nt-new{cursor:pointer;font-family:Georgia,serif;font-size:.85rem;border:1px solid var(--accent2);background:var(--accent2);color:#fff;padding:8px 12px;border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.08);}
.nt-new:hover{filter:brightness(1.07);}
.nt-search{font-size:.9rem;border:1px solid var(--line);border-radius:6px;padding:7px 10px;width:100%;box-sizing:border-box;background:var(--card);}
.nt-cats,.nt-tags,.nt-list{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px;}
.nt-cats-head,.nt-tags-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:3px 6px 6px;}
.nt-cat-row{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:.88rem;}
.nt-cat-row:hover{background:var(--paper);}
.nt-cat-row.on{background:#e9f0ed;color:var(--accent2);font-weight:600;}
.nt-cat-tw{width:12px;text-align:center;color:var(--muted);font-size:.75rem;flex:0 0 12px;}
.nt-cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nt-cat-count{font-size:.72rem;color:var(--muted);}
.nt-cat-acts{display:none;gap:2px;margin-left:4px;}
.nt-cat-row:hover .nt-cat-acts{display:flex;}
.nt-cat-add,.nt-cat-ren,.nt-cat-del{border:none;background:transparent;cursor:pointer;color:var(--muted);font-size:.8rem;width:18px;height:18px;border-radius:4px;padding:0;}
.nt-cat-add:hover,.nt-cat-ren:hover,.nt-cat-del:hover{background:var(--line);color:var(--ink);}
.nt-cats-head .nt-cat-add{display:inline;width:20px;height:20px;font-size:1rem;}
.nt-cat-uncat{color:var(--muted);}
.nt-tag-list{display:flex;flex-wrap:wrap;gap:5px;padding:2px 4px 4px;}
.nt-tag{cursor:pointer;font-size:.78rem;border:1px solid var(--line);background:var(--paper);color:var(--muted);padding:3px 8px;border-radius:11px;}
.nt-tag.on{border-color:var(--accent2);background:#e9f0ed;color:var(--accent2);}
.nt-list{display:flex;flex-direction:column;gap:2px;padding:4px;}
.nt-empty{color:var(--muted);font-size:.85rem;padding:10px;text-align:center;}
.nt-item{cursor:pointer;padding:7px 9px;border-radius:6px;border:1px solid transparent;}
.nt-item:hover{background:var(--paper);}
.nt-item.on{background:#e9f0ed;border-color:#bcd3cb;}
.nt-item-t{font-size:.92rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nt-item-s{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nt-item-m{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.nt-item-cat{font-size:.68rem;color:var(--accent2);background:#e9f0ed;border-radius:8px;padding:1px 7px;}
.nt-item-tag{font-size:.68rem;color:var(--muted);}
.nt-blank{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:40px 28px;color:var(--muted);text-align:center;}
.nt-blank h2{color:var(--ink);margin:0 0 8px;}
.nt-ed{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.nt-title{font-size:1.7rem;font-weight:700;border:none;border-bottom:2px solid transparent;padding:2px 2px 6px;background:transparent;color:var(--ink);font-family:Georgia,serif;}
.nt-title:focus{outline:none;border-bottom-color:var(--accent2);}
.nt-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.nt-mlbl{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px;}
.nt-mlbl select,.nt-mlbl input{font-size:.85rem;border:1px solid var(--line);border-radius:5px;padding:5px 7px;background:var(--paper);}
.nt-del{margin-left:auto;cursor:pointer;border:1px solid var(--line);background:transparent;color:#a23b3b;border-radius:6px;padding:5px 10px;font-size:.8rem;}
.nt-del:hover{background:#f7e9e9;border-color:#d9b3b3;}
.nt-tools{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:7px 8px;background:linear-gradient(var(--paper),#efe9da);border:1px solid var(--line);border-radius:9px;position:sticky;top:4px;z-index:5;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.nt-tools button{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);min-width:30px;height:30px;border-radius:5px;font-size:.85rem;padding:0 7px;}
.nt-tools button:hover{background:#fff;border-color:var(--accent2);}
.nt-tsel{height:30px;border:1px solid var(--line);border-radius:5px;background:var(--card);font-size:.82rem;padding:0 4px;}
.nt-swatches{display:inline-flex;gap:2px;padding:2px 4px;border-left:1px solid var(--line);border-right:1px solid var(--line);}
.nt-sw{width:18px;height:22px;min-width:0;border:1px solid rgba(0,0,0,.15);border-radius:4px;cursor:pointer;padding:0;font-size:.7rem;line-height:22px;color:#999;}
.nt-sw:hover{outline:2px solid var(--accent2);}
.nt-makecard{margin-left:auto;border:1px solid var(--accent2)!important;background:var(--accent2)!important;color:#fff!important;height:30px;border-radius:5px;cursor:pointer;font-size:.82rem;padding:0 11px;}
.nt-body{min-height:64vh;border:1px solid var(--line);border-radius:10px;padding:30px 40px;background:#fff;font-size:1.04rem;line-height:1.75;color:var(--ink);outline:none;overflow-wrap:break-word;box-shadow:inset 0 1px 3px rgba(0,0,0,.02);}
.nt-body:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(44,93,81,.08);}
.nt-body h1{font-size:1.6rem;margin:.4em 0 .3em;}
.nt-body h2{font-size:1.3rem;margin:.4em 0 .3em;}
.nt-body h3{font-size:1.12rem;margin:.4em 0 .3em;}
.nt-body ul,.nt-body ol{padding-left:1.6em;margin:.4em 0;}
.nt-body:empty:before{content:'Start writing…';color:var(--muted);}
@media(max-width:820px){.notes-wrap{flex-direction:column;width:auto;max-width:none;margin-left:0;transform:none;}.notes-side{position:static;max-width:none;flex-basis:auto;width:100%;max-height:none;}}

/* Notebook P2/P3/P4: links, tables, floating boxes */
.nt-tgrp{display:inline-flex;gap:3px;padding:0 4px;border-left:1px solid var(--line);border-right:1px solid var(--line);}
.nt-tbl-op{font-size:.7rem!important;padding:0 5px!important;min-width:0!important;color:var(--muted);}
.nt-canvas{position:relative;}
.nt-floats{position:absolute;inset:0;pointer-events:none;}
.nt-float{position:absolute;pointer-events:auto;background:#fffef8;border:1px solid var(--accent2);border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.13);display:flex;flex-direction:column;z-index:4;min-width:90px;min-height:48px;}
.nt-float-bar{display:flex;justify-content:space-between;align-items:center;background:#e7f0ec;cursor:move;padding:1px 5px;border-radius:5px 5px 0 0;user-select:none;}
.nt-float-grip{cursor:move;color:var(--muted);font-size:.8rem;}
.nt-float-del{border:none;background:transparent;cursor:pointer;color:#a23b3b;font-size:.9rem;line-height:1;padding:0 2px;}
.nt-float-body{flex:1;overflow:auto;padding:6px 9px;outline:none;font-size:.95rem;line-height:1.5;}
.nt-float-rz{position:absolute;right:0;bottom:0;width:15px;height:15px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 45%,var(--accent2) 45%);border-radius:0 0 5px 0;}
.nt-table{border-collapse:collapse;margin:8px 0;}
.nt-table td,.nt-table th{border:1px solid var(--rule);padding:5px 9px;min-width:42px;vertical-align:top;}
.nt-table th{background:var(--paper);font-weight:600;}
.nt-link{color:var(--blue);text-decoration:underline;cursor:pointer;background:#e9f0f6;border-radius:3px;padding:0 4px;}
.nt-link:hover{background:#d8e7f3;}
.nt-linkpick{background:var(--card);border:1px solid var(--accent2);border-radius:7px;padding:8px;margin-bottom:6px;}
.nt-lp-search{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:5px;padding:6px 8px;margin-bottom:6px;}
.nt-lp-list{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow:auto;}
.nt-lp-item{text-align:left;border:none;background:transparent;cursor:pointer;padding:5px 8px;border-radius:5px;font-size:.9rem;}
.nt-lp-item:hover{background:var(--paper);}
.nt-lp-empty{color:var(--muted);font-size:.85rem;padding:6px;}
.nt-backlinks{margin-top:12px;}
.nt-bl-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px;}
.nt-bl{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:4px 10px;margin:0 5px 5px 0;cursor:pointer;font-size:.82rem;color:var(--blue);}
.nt-bl:hover{background:#e9f0f6;border-color:#bcd3cb;}

/* ===================== Typing Practice ===================== */
.tp-wrap{max-width:780px;margin:0 auto;}
.tp-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px;}
.tp-modes{display:flex;gap:6px;align-items:center;}
.tp-mode{cursor:pointer;border:1px solid var(--line);background:var(--card);padding:6px 15px;border-radius:18px;font-size:.85rem;}
.tp-mode.on{background:var(--accent2);color:#fff;border-color:var(--accent2);}
.tp-src{font-size:.78rem;color:var(--muted);margin-left:6px;}
.tp-stats{display:flex;gap:18px;}
.tp-stat{display:flex;flex-direction:column;align-items:center;font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.tp-stat b{font-size:1.2rem;color:var(--ink);font-family:Georgia,serif;}
.tp-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 24px;text-align:center;}
.tp-prompt{font-size:2.3rem;line-height:1.7;letter-spacing:2px;min-height:1.7em;word-break:break-word;font-family:'KhmerEmbed',serif;}
.tp-prompt span{padding:0 1px;border-radius:4px;}
.tp-ok{color:#1f7a3d;}
.tp-corr{color:#9a6b00;background:#fbf2d6;}
.tp-err{color:#fff;background:#c0392b;}
.tp-cur{color:var(--ink);border-bottom:3px solid var(--accent2);}
.tp-todo{color:#bcb5a4;}
.tp-hint{color:var(--muted);font-size:1rem;margin:10px 0 16px;min-height:1.2em;}
.tp-input{font-size:1.35rem;border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%;box-sizing:border-box;text-align:center;background:#fbfaf5;color:var(--muted);font-family:'KhmerEmbed',serif;}
.tp-input:focus{border-color:var(--accent2);outline:none;background:#fff;}
.tp-controls{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.tp-skip,.tp-reset{cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:6px 15px;font-size:.85rem;}
.tp-skip:hover,.tp-reset:hover{background:var(--card);}
.tp-legend{margin-top:16px;font-size:.78rem;color:var(--muted);line-height:1.6;}
.tp-legend .tp-k{padding:1px 7px;border-radius:4px;font-weight:600;}
.tp-legend .tp-ok{color:#1f7a3d;background:#e6f2ea;}
.tp-legend .tp-corr{color:#9a6b00;background:#fbf2d6;}
.tp-legend .tp-err{color:#fff;background:#c0392b;}
.tp-empty{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:44px;text-align:center;color:var(--muted);}
/* on-screen keyboard feedback during typing practice */
@keyframes kkflash{0%{transform:scale(1.16);}100%{transform:scale(1);}}
.kk-key.kk-fl-ok{background:#2f8f7d!important;border-color:#52c2ad!important;animation:kkflash .35s ease-out;}
.kk-key.kk-fl-err{background:#c0392b!important;border-color:#e08478!important;animation:kkflash .35s ease-out;}
.kk-key.kk-fl-ok .kk-base,.kk-key.kk-fl-ok .kk-shift,.kk-key.kk-fl-err .kk-base,.kk-key.kk-fl-err .kk-shift{color:#fff!important;opacity:1!important;}
.kk-key.kk-fl-hint{background:#e0a52a!important;border-color:#f0c460!important;animation:kkflash .35s ease-out;}
.kk-key.kk-fl-hint .kk-base,.kk-key.kk-fl-hint .kk-shift{color:#3a2a00!important;opacity:1!important;}
.kk-key.kk-next{outline:2px solid #e0a52a;outline-offset:-1px;}

/* on-screen keyboard: Shift (modifier) keys — flashable alongside the letter on a combo press */
.kk-key.kk-mod{min-width:52px;justify-content:center;}
.kk-modlbl{font-size:.6rem;color:#8aa39c;text-transform:uppercase;letter-spacing:.03em;}
.kk-key.kk-fl-ok .kk-modlbl,.kk-key.kk-fl-err .kk-modlbl{color:#fff;}
.kk-key.kk-fl-hint .kk-modlbl{color:#3a2a00;}

/* Typing Practice: per-item history line + non-blocking "new best" badge */
.tp-card{position:relative;}
.tp-hist{font-size:.8rem;color:var(--accent2);margin:6px 0 2px;min-height:1.1em;}
.tp-record{position:absolute;top:10px;right:14px;color:#9a6b00;font-size:.85rem;font-weight:600;opacity:0;pointer-events:none;}
.tp-record.show{animation:tprec 1.9s ease-out;}
@keyframes tprec{0%{opacity:0;transform:translateY(-6px) scale(.96);}12%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:1;}100%{opacity:0;}}

/* Notebook: draggable/resizable arrows (pointer-events only on the line + handles, so the box
   doesn't block the text under it) */
.nt-arrow{position:absolute;pointer-events:none;z-index:5;}
.nt-arrow svg{position:absolute;inset:0;overflow:visible;pointer-events:none;}
.nt-arrow-hit{cursor:move;pointer-events:stroke;}
.nt-arrow-line{pointer-events:stroke;cursor:move;}
.nt-arrow-h{position:absolute;width:13px;height:13px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid #2f8f7d;cursor:crosshair;pointer-events:auto;box-shadow:0 1px 3px rgba(0,0,0,.3);opacity:0;transition:opacity .12s;}
.nt-arrow-tip{border-color:#c0392b;}
.nt-arrow-color{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-19px 0 0 -7px;border-radius:50%;border:2px solid #fff;cursor:pointer;pointer-events:auto;box-shadow:0 1px 3px rgba(0,0,0,.3);padding:0;}
.nt-arrow-del{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:1px 0 0 -8px;border-radius:50%;border:none;background:#c0392b;color:#fff;font-size:.75rem;line-height:1;cursor:pointer;pointer-events:auto;padding:0;}
.nt-arrow:hover .nt-arrow-color,.nt-arrow:hover .nt-arrow-del{opacity:1;}
.nt-arrow-color,.nt-arrow-del{opacity:0;transition:opacity .12s;}
.nt-arrow:hover .nt-arrow-h{opacity:1;box-shadow:0 0 0 2px rgba(47,143,125,.25),0 1px 3px rgba(0,0,0,.3);}
/* keep the endpoint handles grabbable while a drag is in progress (pointer may leave the box) */
.nt-arrow.nt-dragging .nt-arrow-h{opacity:1;}
/* clearer highlight swatch row label */
.nt-swatches.nt-sw-hi-wrap{position:relative;}

/* keyboard overlay: "Khmer-only" language-gate toggle */
.kkbd-gate{background:#33403d;color:#9fb8b1;border:none;border-radius:6px;height:24px;padding:0 9px;cursor:pointer;font-size:.7rem;}
.kkbd-gate.on{background:#2f8f7d;color:#fff;}
.kkbd-gate:hover{filter:brightness(1.1);}

/* ===== Notes ↔ Comprehension + inline vocab editing ===== */
/* clickable vocab word inside a note */
.nt-vocab{display:inline;border-bottom:2px solid #b9824a;background:#fcf3e6;border-radius:3px;padding:0 2px;cursor:pointer;}
.nt-vocab:hover{background:#f7e6cd;}
/* attach-passage picker (mirrors the note-link picker) */
.nt-passpick{border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:10px;margin-top:8px;}
.nt-pp-new{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;}
.nt-pp-create{cursor:pointer;border:1px solid var(--accent2);background:var(--accent2);color:#fff;border-radius:7px;padding:7px 12px;font-size:.9rem;}
.nt-pp-create:hover{filter:brightness(1.08);}
.nt-pp-hint{font-size:.78rem;color:var(--muted);}
.nt-pp-search{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:var(--card);font-size:.9rem;margin-bottom:6px;}
.nt-pp-list{display:flex;flex-direction:column;gap:3px;max-height:240px;overflow:auto;}
.nt-pp-item{text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:7px 10px;font-size:.92rem;}
.nt-pp-item:hover{border-color:var(--accent2);background:#fff;}
.nt-pp-n{color:var(--muted);font-size:.78rem;}
.nt-pp-empty{color:var(--muted);font-size:.85rem;padding:6px;}
/* attached-passages list under a note */
.nt-passages{margin-top:14px;}
.nt-pass-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;}
.nt-pass-list{display:flex;flex-wrap:wrap;gap:8px;}
.nt-pass{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.04);}
.nt-pass-open{text-align:left;cursor:pointer;border:none;background:transparent;padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:160px;}
.nt-pass-open:hover{background:#eef4f1;}
.nt-pass-t{font-weight:600;color:var(--ink);}
.nt-pass-meta{font-size:.74rem;color:var(--muted);}
.nt-pass-detach{cursor:pointer;border:none;border-left:1px solid var(--line);background:transparent;color:#b06a6a;padding:0 10px;font-size:.85rem;}
.nt-pass-detach:hover{background:#f7e9e9;}
/* inline vocab-card editor inside a note */
/* vocab card editor from a note — a centred popup/modal */
.nt-cardedit{position:fixed;inset:0;z-index:70;display:none;align-items:flex-start;justify-content:center;padding:3vh 16px;box-sizing:border-box;background:rgba(20,20,16,.5);overflow:hidden;}
.nt-cardedit.open{display:flex;}
.nt-ce-panel{width:100%;max-width:660px;max-height:94vh;display:flex;flex-direction:column;background:var(--card);border:2px solid var(--accent2);border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,.35);overflow:hidden;}
.nt-ce-bar{flex:0 0 auto;display:flex;gap:8px;align-items:center;background:#eef4f1;padding:8px 12px;border-bottom:1px solid var(--line);}
.nt-ce-h{flex:1;min-width:0;font-size:.9rem;color:var(--ink);}
.nt-ce-fav{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 10px;font-size:.82rem;color:var(--muted);white-space:nowrap;}
.nt-ce-fav:hover{border-color:#e0a800;}
.nt-ce-fav.on{border-color:#e0a800;background:#fff8e6;color:#a97b00;font-weight:600;}
.nt-ce-close{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 10px;font-size:.82rem;}
.nt-ce-close:hover{border-color:var(--accent2);}
.nt-ce-host{flex:1;overflow:auto;padding:14px 16px;}

/* ===== Embedded comprehension-passage image (a float that references a lesson) ===== */
.nt-pass-embed{cursor:pointer;border:none;border-left:1px solid var(--line);background:transparent;color:var(--accent2);padding:0 11px;font-size:.82rem;}
.nt-pass-embed:hover{background:#eef4f1;}
.nt-passfloat{background:#fff;min-width:150px;min-height:90px;overflow:hidden;}
.nt-passbar{gap:5px;flex-wrap:nowrap;}
/* the title shrinks/ellipsizes so the ↗ open and 🗑 delete buttons are ALWAYS visible */
.nt-passbar-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;color:var(--ink);font-weight:600;}
.nt-passbar .nt-float-grip,.nt-passbar .nt-passpg,.nt-passbar .nt-passpg-n,.nt-passgo{flex:0 0 auto;}
/* delete sits in the top-right corner of the image and appears on hover */
.nt-passimg-wrap{position:relative;}
.nt-passdel{position:absolute;top:6px;right:6px;z-index:3;width:24px;height:24px;border-radius:50%;border:none;background:rgba(192,57,43,.9);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.35);opacity:0;transition:opacity .12s;}
.nt-passfloat:hover .nt-passdel{opacity:1;}
.nt-passdel:hover{background:#c0392b;}
.nt-passpg{border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;font-size:.8rem;line-height:1;padding:1px 6px;}
.nt-passpg:hover{border-color:var(--accent2);}
.nt-passpg-n{font-size:.7rem;color:var(--muted);}
.nt-passgo{border:1px solid var(--accent2);background:var(--accent2);color:#fff;border-radius:5px;cursor:pointer;font-size:.72rem;padding:2px 7px;white-space:nowrap;}
.nt-passgo:hover{filter:brightness(1.08);}
.nt-passimg-wrap{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f0ece0;border-radius:0 0 5px 5px;}
.nt-passimg-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;display:block;}
.nt-passimg-none{color:var(--muted);font-size:.82rem;padding:14px;text-align:center;}
/* raw-image lightbox */
.nt-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(20,18,12,.86);display:flex;flex-direction:column;padding:14px;box-sizing:border-box;}
.nt-lb-bar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}
.nt-lb-go{border:1px solid #fff;background:rgba(255,255,255,.12);color:#fff;border-radius:7px;cursor:pointer;font-size:.86rem;padding:7px 13px;}
.nt-lb-go:hover{background:rgba(255,255,255,.25);}
.nt-lb-close{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:7px;cursor:pointer;font-size:.86rem;padding:7px 13px;}
.nt-lb-close:hover{background:rgba(255,255,255,.15);}
.nt-lb-imgwrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;}
.nt-lb-img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 4px 24px rgba(0,0,0,.5);}

/* "New passage from a slide (OCR)" button in the note's passage picker */
.nt-pp-ocr{cursor:pointer;border:1px solid var(--accent2);background:var(--accent2);color:#fff;border-radius:7px;padding:7px 12px;font-size:.9rem;}
.nt-pp-ocr:hover{filter:brightness(1.08);}
.nt-pp-create{background:#fff;color:var(--accent2);}

/* OCR: reorderable page-thumbnail preview before transcribing (fix multi-select order) */
.ocr-review-h{font-size:.84rem;color:var(--muted);margin:10px 0 7px;}
.ocr-thumbs{display:flex;flex-wrap:wrap;gap:10px;}
.ocr-thumb{position:relative;width:118px;margin:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0;overflow:hidden;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.ocr-thumb.ocr-dragging{opacity:.45;}
.ocr-thumb img{display:block;width:100%;height:96px;object-fit:cover;background:#f0ece0;}
.ocr-thumb-n{position:absolute;top:4px;left:4px;min-width:18px;height:18px;line-height:18px;text-align:center;background:var(--accent2);color:#fff;border-radius:9px;font-size:.74rem;font-weight:700;padding:0 4px;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.ocr-thumb-ops{position:absolute;top:3px;right:3px;display:flex;gap:2px;}
.ocr-thumb-ops button{width:20px;height:20px;border:none;border-radius:4px;background:rgba(255,255,255,.88);cursor:pointer;font-size:.78rem;line-height:1;padding:0;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.ocr-thumb-ops button:hover{background:#fff;}
.ocr-thumb-ops .ocr-rm{color:#c0392b;}
.ocr-thumb-ops button[disabled]{opacity:.35;cursor:default;}
.ocr-thumb-cap{font-size:.68rem;color:var(--muted);padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ocr-review-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px;}
.ocr-go{border:1px solid var(--accent2);background:var(--accent2);color:#fff;border-radius:8px;cursor:pointer;font-size:.92rem;padding:9px 16px;}
.ocr-go:hover{filter:brightness(1.08);}
.ocr-go[disabled]{opacity:.6;cursor:default;}

/* OCR: "learning from your corrections" indicator */
.ocr-learned{font-size:.82rem;color:#2c5d51;background:#eef4f1;border:1px solid #cfe0d8;border-radius:7px;padding:7px 11px;margin:2px 0 10px;}
.ocr-learned .ocr-link{color:#a23b3b;}

/* study mode: per-line "✎ fix text" (edit the raw Khmer where you spotted the OCR/segmentation error) */
.lkm-edit{margin-left:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:5px;cursor:pointer;font-size:.7rem;padding:1px 7px;vertical-align:middle;opacity:.4;transition:opacity .12s;white-space:nowrap;}
.lline:hover .lkm-edit{opacity:1;}
.lkm-edit:hover{border-color:var(--accent2);color:var(--accent2);}

/* card editor: English→Khmer reverse-lookup suggestions (compound parts + synonyms) */
.ce-en-suggest{display:flex;flex-direction:column;gap:2px;margin-top:5px;max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:7px;background:var(--card);padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.ce-en-hit{text-align:left;cursor:pointer;border:1px solid transparent;background:transparent;border-radius:5px;padding:6px 8px;font-size:.92rem;display:flex;gap:8px;align-items:baseline;}
.ce-en-hit:hover{background:#eef4f1;border-color:#cfe0d8;}
.ce-en-hit .khmer{font-weight:600;color:var(--ink);}
.ce-en-def{color:var(--muted);font-size:.82rem;}
.ce-en-empty{color:var(--muted);font-size:.82rem;padding:6px 8px;}

/* delete for a raw image accidentally dropped into the note text (hover a body <img> → ✕) */
.nt-canvas{position:relative;}
.nt-imgdel{position:absolute;z-index:6;width:24px;height:24px;border-radius:50%;border:none;background:rgba(192,57,43,.92);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.nt-imgdel:hover{background:#c0392b;}
#noteBody img{max-width:100%;}

/* ===== Word Order drill ===== */
.wo-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:680px;margin:0 auto;}
.wo-prompt{margin:10px 0 16px;}
.wo-plabel{display:block;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}
.wo-pen{font-size:1.15rem;color:var(--ink);line-height:1.4;}
.wo-answer{min-height:54px;border:2px dashed var(--line);border-radius:10px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.wo-ans-empty{color:var(--muted);font-size:.9rem;}
.wo-bank{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 2px;margin-top:10px;border-top:1px solid var(--line);min-height:36px;align-items:center;}
.wo-chip{font-size:1.15rem;padding:9px 14px;border:1px solid var(--accent2);background:#f1f5f2;color:var(--ink);border-radius:9px;cursor:pointer;line-height:1.5;}
.wo-chip:hover{background:#e3ede8;}
.wo-in{background:var(--card);}
.wo-in.ok{border-color:#3ea06b;background:#eaf7ef;}
.wo-in.bad{border-color:#c0432f;background:#fdeeea;}
.wo-in:disabled{cursor:default;}
.wo-msg{margin:14px 0 4px;font-size:.95rem;}
.wo-msg.ok{color:#2b7a4b;font-weight:600;}
.wo-msg.bad{color:#b23b28;}
.wo-correct{font-size:1.2rem;margin:6px 0;padding:9px 12px;background:#f6f3ea;border-radius:8px;}
.wo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.wo-btn{padding:10px 16px;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--ink);}
.wo-btn.primary{background:var(--accent2);color:#fff;border-color:var(--accent2);font-weight:600;}
.wo-btn.primary:disabled{opacity:.45;cursor:default;}
.wo-btn.ghost{color:var(--muted);}
.wo-btn:hover:not(:disabled){border-color:var(--accent2);}