/* A / Clear Workbench: the approved visual direction, applied to the real app. */
:root,:root[data-theme="light"],:root[data-theme="dark"]{
  --bg:var(--ui-bg);--bg2:var(--ui-bg);--navy:#09213f;
  --card:var(--ui-surface);--card2:var(--ui-inset);--line:var(--ui-line);--line2:var(--ui-border);
  --tx:var(--ui-ink);--tx2:var(--ui-muted);--tx3:var(--ui-faint);
  --pri:var(--ui-blue);--pri2:var(--ui-action);--amber:var(--ui-warm-ink);--amber2:var(--ui-amber);
  --ok:var(--ui-success);--bad:var(--ui-error);--bad2:var(--ui-error);
  --r:var(--ui-radius-card);--r-sm:var(--ui-radius-sm);--r-card:var(--ui-radius-md);
  --r-modal:var(--ui-radius-dialog);--r-tag:var(--ui-radius-xs);--tap:var(--ui-tap);--tap-desk:var(--ui-tap);
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body,[data-theme="light"] body{background:var(--ui-bg);color:var(--ui-ink);font:var(--ui-text-body)/1.65 var(--ui-font-ui)}
button,a,input,select,textarea{touch-action:manipulation}
button:not(.tg),.btn,.btn.sm{min-height:var(--ui-tap)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ui-action);outline-offset:3px}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
button,.btn,.pack{transition:background-color .15s,border-color .15s}
.btn,.btn.sm,.btn.ghost{color:var(--ui-ink);background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);box-shadow:none}
.btn:hover,.pack:hover,.spk:hover{background:var(--ui-soft);border-color:var(--ui-blue);transform:none;box-shadow:none}
.btn.pri,.btn.pri:hover{background:var(--ui-yellow);border-color:var(--ui-yellow);color:#09213f;box-shadow:none}
.btn.amber,.btn.amber:hover{background:var(--ui-soft);color:var(--ui-action);border-color:var(--ui-line);box-shadow:none}
.card,.pack,.strip .s,.sw{background:var(--ui-surface);border-color:var(--ui-line);box-shadow:var(--ui-shadow)}
.tag,.pill{background:var(--ui-soft);color:var(--ui-action);border-color:var(--ui-line)}
textarea,input,select,[data-theme="light"] textarea,[data-theme="light"] input,[data-theme="light"] select{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-ink)}
textarea::placeholder,input::placeholder{color:var(--ui-faint);opacity:1}
textarea:focus,input:focus,select:focus{border-color:var(--ui-blue);box-shadow:0 0 0 3px #0877ff14}
.seg{background:var(--ui-inset);border-color:var(--ui-line);flex-wrap:wrap;max-width:100%}
.seg button.on,.ptools .btn.on{background:var(--ui-soft);color:var(--ui-action);box-shadow:none}
.bar,.prac .ptop .bar{background:var(--ui-line)}
.bar i{background:var(--ui-blue);box-shadow:none}
.toast{background:var(--ui-ink);color:var(--ui-surface);box-shadow:0 8px 24px #09213f22}
/* Permanent desktop navigation; retain the real four routes, not mock links. */
.topbar,[data-theme="light"] .topbar{position:fixed;inset:0 auto 0 0;width:var(--ui-sidebar);height:100dvh;z-index:50;display:flex;flex-direction:column;align-items:stretch;gap:var(--ui-space-7);padding:var(--ui-space-7) var(--ui-space-5);background:var(--ui-surface);border:0;border-right:1px solid var(--ui-line);backdrop-filter:none}
.brand{gap:10px;font-size:20px;flex-wrap:wrap;letter-spacing:0}
.brand .mark{width:38px;height:38px;flex:none;border-radius:var(--ui-radius-sm);background:var(--ui-yellow);color:#09213f;font-size:26px;box-shadow:none}
.brand em{width:100%;margin-left:48px;padding:0;border:0;font-size:12px;color:var(--ui-faint)}
.nav{display:grid;gap:var(--ui-space-2);margin:0;width:100%}
.nav button{justify-content:flex-start;text-align:left;padding:11px 15px;border-radius:var(--ui-radius-sm);font-size:14px;color:var(--ui-muted)}
.nav button:hover{background:var(--ui-inset);color:var(--ui-ink)}
.nav button.on{background:var(--ui-soft);color:var(--ui-action);font-weight:750}
.sidebar-note{font-size:13px;color:var(--ui-muted);border-top:1px solid var(--ui-line);padding-top:var(--ui-space-5);line-height:1.9}
.sidebar-note strong{display:block;color:var(--ui-ink);font-weight:650;margin-bottom:6px}
.theme-toggle{margin-top:auto;width:100%;background:var(--ui-inset);color:var(--ui-muted);border-color:var(--ui-line);text-align:left;padding:10px 14px}
main#app{max-width:calc(var(--ui-content) + 80px);margin-left:var(--ui-sidebar);margin-right:0;padding:var(--ui-space-7) 40px 48px;min-width:0}
.foot{max-width:calc(var(--ui-content) + 80px);margin-left:var(--ui-sidebar);margin-right:0;padding:0 40px 28px;text-align:left;color:var(--ui-faint)}
.hero{padding:12px 0 26px;margin-bottom:4px;border-bottom:1px solid var(--ui-line)}
.hero .tag{font-size:12px}
.heroin{margin-top:18px;gap:18px}
.hero h1{font-size:clamp(27px,3vw,36px);font-weight:750;letter-spacing:-.6px}
.hero h1 i,[data-theme="light"] .hero h1 i{background:none;color:var(--ui-action);-webkit-text-fill-color:var(--ui-action)}
.hero p{font-size:14px;max-width:70ch;margin:14px 0 20px}
.hero .ip{width:64px;height:64px;flex:0 0 64px}
.strip .s b,[data-theme="light"] .strip .s b{background:none;color:var(--ui-ink);-webkit-text-fill-color:var(--ui-ink);font-size:24px}
.strip .s{padding:16px 18px}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.pack{padding:20px;gap:14px;border-radius:var(--ui-radius-card)}
.pack .meta,.pack .dim{overflow-wrap:anywhere}
.pack .acts,.pack .mgr{flex-wrap:wrap}
.pack h3{overflow-wrap:anywhere}
.unit .nm,.rrow .tx{min-width:0;overflow-wrap:anywhere}
/* Practice shell: same navigation language and the approved vertical cards. */
.prac,[data-theme="light"] .prac{left:var(--ui-sidebar);--practice-surface:var(--ui-surface);--practice-input:var(--ui-inset);--practice-border:var(--ui-line);--practice-muted:var(--ui-muted);--practice-hint:var(--ui-faint);background:var(--ui-bg)}
.prac .ptop,[data-theme="light"] .prac .ptop{padding:16px 32px;gap:14px;background:var(--ui-surface);border-color:var(--ui-line);min-height:77px}
.practice-title{font-size:14px;font-weight:700;min-width:0;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ui-ink)}
.chip-x{background:var(--ui-surface);border-color:var(--ui-line);border-radius:var(--ui-radius-sm);color:var(--ui-muted)}
.chip-x:hover{background:var(--ui-soft);color:var(--ui-ink)}
.prac .ptop .bar{height:4px;margin:0 8px;min-width:20px}
.prac .pbody{padding:28px 32px 40px;display:block;overflow:auto}
.practice-layout,.article-layout .practice-layout{width:min(var(--ui-reading),100%);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-space-5);margin:auto}
.source-panel,.answer-panel{padding:20px 28px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);box-shadow:var(--ui-shadow)}
.answer-panel{border-top:1px solid var(--ui-line)}
.panel-eyebrow{color:var(--ui-muted);margin-bottom:16px;letter-spacing:0;font-size:14px;font-weight:650;flex-wrap:wrap}
.panel-badge{display:none}
.answer-badge,[data-theme="light"] .answer-badge{background:var(--ui-soft);color:var(--ui-action);font-size:12px}
.source-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.source-audio{display:flex;gap:8px;flex-shrink:0}
.source-audio .btn{font-size:13px;padding:8px 12px;white-space:nowrap}
.prac .ui-lang{margin:14px 0 10px;color:var(--ui-faint)}
.prac .prompt,.prac .prompt.long{font-size:clamp(23px,2.3vw,32px);line-height:1.6;font-weight:500;text-align:left;letter-spacing:0;max-width:100%;font-family:var(--ui-font-reading);color:var(--ui-ink);overflow-wrap:anywhere}
.prac .prompt.long{font-size:clamp(21px,2vw,29px)}
.prac .prompt.hid{font-family:var(--ui-font-ui);font-size:19px;color:var(--ui-muted)}
.prac .prompt .gw{border-radius:var(--ui-radius-xs)}
.prac .cn-sub{border:0;margin-top:10px;padding-top:0;font-size:15px;color:var(--ui-muted)}
.prac .analysis-toolbar{border:0;margin-top:18px;padding:0}
.prac .analysis-toolbar .btn{background:var(--ui-surface);color:var(--ui-muted);border-color:var(--ui-line)}
.prac .practice-modes{padding:4px;background:var(--ui-inset);border-color:var(--ui-line)}
.prac .practice-modes .btn.on{background:var(--ui-surface);color:var(--ui-action);border-color:var(--ui-line);box-shadow:none}
.prac .practice-modes .btn{white-space:normal}
.practice-switch{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.practice-switch .btn{padding:9px 18px;min-height:44px;font-size:14px}
.practice-switch .active{background:var(--ui-soft);border-color:var(--ui-blue);color:var(--ui-action);font-weight:700}
.answer-guide{font-size:13px;color:var(--ui-muted);margin:0 0 12px}
.prac .inbox,[data-theme="light"] .prac .inbox{background:var(--ui-inset);border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);padding:18px 20px;min-height:104px;max-height:36vh}
.prac .inbox:focus-within{border-color:var(--ui-blue);box-shadow:0 0 0 3px #0877ff14}
.prac #kbdIn,[data-theme="light"] .prac #kbdIn{background:transparent;color:transparent;caret-color:transparent;padding:18px 20px}
.prac .typed{font-family:var(--ui-font-reading);font-size:22px;line-height:1.7;letter-spacing:.1px}
.prac .typed .c-plain{color:var(--ui-ink)}
.prac .typed .c-ok,[data-theme="light"] .prac .typed .c-ok{color:var(--ui-success)}
.prac .typed .c-bad,[data-theme="light"] .prac .typed .c-bad{color:var(--ui-error);background:#b9223a0b}
.prac .typed .blk{color:var(--ui-faint)}
.prac .typed .ph{font-size:16px;color:var(--ui-faint)}
.prac .pactions{padding-top:16px;gap:10px;position:static;background:transparent;margin-top:0}
.prac .pactions .btn{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-muted);border-radius:var(--ui-radius-sm)}
.answer-helpers{flex:1 1 180px;gap:8px}
.prac #pSubmit{background:var(--ui-yellow);color:#09213f;border:1px solid var(--ui-yellow);min-width:160px;font-weight:750;box-shadow:none}
.prac #pSubmit.ready{box-shadow:0 0 0 3px #ffd31a28}
.prac .keys{font-size:11px;color:var(--ui-faint);padding:12px 0 0}
.interaction-meter{margin-top:12px;color:var(--ui-muted)}
.meter-line b{color:var(--ui-action)}
.word-meter{height:4px;background:var(--ui-line)}
.word-meter i{background:var(--ui-blue)}
.gw.word-done{color:var(--ui-action);background:var(--ui-soft)}
.gw.word-active{color:var(--ui-warm-ink);background:#ffd31a25;transform:none}
.combo,.combo.cold,[data-theme="light"] .combo{background:var(--ui-inset);color:var(--ui-muted);border-color:var(--ui-line);font-size:12px;box-shadow:none}
.prac .hint{border-color:var(--ui-border);background:var(--ui-inset);border-radius:var(--ui-radius-md);text-align:left}
.prac .hint b,.prac .hint strong{color:var(--ui-warm-ink)}
.prac .hint.hint-level-3 strong{color:var(--ui-action)}
.hint-action,.pos-filters button{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-muted)}
.pos-filters button.on{color:var(--ui-action);border-color:var(--ui-blue)}
.ck{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-ink)}
.ck:hover{background:var(--ui-soft);transform:none}
/* Feedback remains genuine, manually advanced and visually consistent. */
.fb{background:#09213f66;backdrop-filter:blur(4px)}
.fb .box,[data-theme="light"] .fb .box{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-border);box-shadow:0 16px 50px #09213f22}
.fb .ans,[data-theme="light"] .fb .ans,.bub,[data-theme="light"] .bub{background:var(--ui-inset);color:var(--ui-ink);border-color:var(--ui-line)}
.fb.perfect .verdict,[data-theme="light"] .fb.perfect .verdict{background:none;color:var(--ui-success);-webkit-text-fill-color:var(--ui-success)}
.fb.good .verdict,[data-theme="light"] .fb.good .verdict{background:none;color:var(--ui-action);-webkit-text-fill-color:var(--ui-action)}
.fb.miss .verdict,[data-theme="light"] .fb.miss .verdict{color:var(--ui-error)}
.fb .pts,[data-theme="light"] .fb .pts{color:var(--ui-warm-ink)}
.fb.inline-feedback{bottom:18px;right:24px;width:min(540px,calc(100vw - 36px))}
.fb.inline-feedback .box{border-color:var(--ui-success)}
.spk{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-ink)}
.ring::after,[data-theme="light"] .ring::after{background:var(--ui-surface)}
.gram b,[data-theme="light"] .gram b{color:var(--ui-action)}
#pIpF{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line);box-shadow:0 6px 24px #09213f15}
/* Real recording dialog: no demo wave, no fake scores. */
.oral-overlay,[data-theme="light"] .oral-overlay{--oral-surface:var(--ui-surface);--oral-inset:var(--ui-inset);--oral-border:var(--ui-line);--oral-yellow:var(--ui-warm-ink);background:#09213f88}
.oral-panel{width:min(860px,100%);padding:28px;border-radius:var(--ui-radius-dialog);box-shadow:0 24px 90px #09213f33}
.oral-head h2{font-size:24px}
.oral-reference{background:var(--ui-soft);border:1px solid var(--ui-line);padding:20px 22px;border-radius:var(--ui-radius-md);font:500 28px/1.6 var(--ui-font-reading)}
.oral-overlay button{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-ink);border-radius:var(--ui-radius-sm);font-size:14px}
#oralRecord{background:var(--ui-yellow);color:#09213f;border-color:var(--ui-yellow)}
#oralAssess{background:#075fce;color:#fff;border-color:#075fce}
.oral-capture{background:var(--ui-inset);border-color:var(--ui-line)}
.oral-score,.oral-word{background:var(--ui-surface);border-color:var(--ui-line)}
.oral-score{background:var(--ui-soft)}
.oral-needs{border-left-color:var(--ui-amber)}
.oral-muted{color:var(--ui-muted)}
.oral-cloud{border-color:var(--ui-line)}
/* Compact phone navigation and true single-column practice at every width. */
@media(min-width:1600px){main#app,.foot{margin-left:calc(var(--ui-sidebar) + (100vw - var(--ui-sidebar) - var(--ui-content) - 80px)/2)}}
@media(max-width:1050px) and (min-width:761px){.prac .ptop{padding:14px 20px;gap:8px}.practice-title{max-width:110px}.prac .pbody{padding:24px 20px}.source-panel,.answer-panel{padding:22px}.source-heading{align-items:flex-start;flex-direction:column}.prac .panel-eyebrow{gap:8px}.prac #pSubmit{min-width:145px}.prac #pSubmit kbd{display:none}}
@media(max-width:760px){
  .topbar,[data-theme="light"] .topbar{position:relative;inset:auto;width:100%;height:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-right:0;border-bottom:1px solid var(--ui-line)}
  .brand{font-size:18px;flex-wrap:nowrap;gap:9px}.brand em,.sidebar-note{display:none}.brand .mark{width:34px;height:34px;font-size:23px}
  .nav{display:flex;order:3;gap:4px;width:100%;margin:0;overflow-x:auto;flex-wrap:nowrap;padding:0}
  .nav button{flex:1 0 auto;justify-content:center;padding:9px 10px;font-size:13px;min-height:44px}
  .theme-toggle{margin:0 0 0 auto;width:auto;font-size:12px;padding:8px 10px;min-height:44px}
  main#app{margin:0;max-width:none;padding:20px 16px 36px}.foot{margin:0;padding:0 16px 24px;font-size:11px}
  .hero{padding:2px 0 22px}.hero h1{font-size:27px}.hero .ip{width:48px;height:48px;flex-basis:48px}.hero p{font-size:13px}.heroin{gap:12px}.hero .row .btn{flex:1 1 145px;font-size:13px;padding:10px 12px}
  .grid{grid-template-columns:minmax(0,1fr)}.strip{gap:10px}.strip .s{padding:13px}.pack{padding:18px}
  .prac,[data-theme="light"] .prac{left:0}.prac .ptop,[data-theme="light"] .prac .ptop{padding:10px 12px;gap:8px;min-height:65px}.practice-title{max-width:100px;font-size:13px}.prac .ptop .bar{margin:0;min-width:12px}.prac .ptop .k{font-size:11px}.combo{display:none}
  .prac .pbody{padding:16px 12px 28px}.practice-layout,.article-layout .practice-layout{width:100%;grid-template-columns:minmax(0,1fr);gap:16px}
  .source-panel,.answer-panel{padding:18px 16px;border-radius:16px}.panel-eyebrow{font-size:13px;margin-bottom:12px;gap:8px}.source-heading{flex-direction:column;align-items:stretch;gap:10px}.source-audio .btn{flex:1;padding:8px 12px}
  .prac .ui-lang{font-size:12px;margin-top:10px}.prac .prompt,.prac .prompt.long{font-size:23px;line-height:1.65}.prac .cn-sub{font-size:14px}.prac .practice-modes .btn{font-size:12px;padding:8px 5px}
  .practice-switch{gap:6px}.practice-switch .btn{flex:1;padding:9px 10px;font-size:13px}.answer-badge{font-size:11px}
  .prac .inbox{min-height:110px;max-height:none;padding:16px}.prac .typed{font-size:20px}.answer-guide{font-size:13px}
  .prac .pactions{position:static;gap:12px;padding-top:14px;margin:0}.answer-helpers{flex-basis:100%}.prac .pactions .answer-helpers .btn{flex:1;min-height:44px;padding:9px 12px;font-size:13px}
  .prac #pSubmit{width:100%;margin:0;flex-basis:100%;min-height:48px}.prac .keys{display:none}.interaction-meter{font-size:11px}.meter-line{align-items:flex-start;gap:6px}.meter-line b{font-size:11px}.analysis-toolbar>span{display:none}
  .fb.inline-feedback{left:10px;right:10px;width:auto;bottom:10px}.fb.inline-feedback .box{max-height:50dvh}
  .oral-panel{padding:18px}.oral-reference{font-size:23px;padding:16px}.oral-consent span{font-size:13px}.oral-actions{gap:8px}.oral-disclaimer{font-size:12px}
}
@media(max-width:360px){.practice-title{max-width:72px}.prac .ptop .k:last-child{display:none}.hero h1{font-size:24px}.heroin{gap:9px}.source-panel,.answer-panel{padding:16px 14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}