/* AW Chinese — Frontend V1, AW Blue Design System
   Scope: PHP/Vanilla JS existing screens. Presentation only; zero API or data changes.
   Loaded last via app/subfolder_paths.php, not via duplicated head injectors.
*/
:root {
  /* Primitive / brand */
  --aw-royal:#2455D6;--aw-deep:#153E90;--aw-sky:#58B5FF;
  --aw-blue-700:#1A46B4;--aw-blue-100:#E7F0FF;--aw-ink:#142747;
  --aw-surface:#FFFFFF;--aw-ground:#F3F7FE;--aw-soft:#EAF2FF;
  --aw-border:#D3E1F5;--aw-muted:#526580;--aw-success:#11724B;
  --aw-error:#AF3151;--aw-warning:#946100;--aw-radius-s:12px;
  --aw-radius-m:18px;--aw-radius-l:24px;
  --aw-shadow:0 7px 24px rgba(25,67,127,.075);
  --aw-shadow-raised:0 5px 0 rgba(21,62,144,.12),0 12px 30px rgba(25,67,127,.1);
  --aw-focus:#F6C341;--aw-text:var(--aw-ink);
  color-scheme:light;
}
html[data-theme="dark"],html[data-aw-theme="dark"],html.dark,body.dark,
html[data-color-scheme="dark"] {
  --aw-royal:#7FB4FF;--aw-deep:#B8D3FF;--aw-sky:#66BDFF;
  --aw-blue-700:#93BEFF;--aw-blue-100:#213B63;--aw-ink:#F0F5FF;
  --aw-surface:#152640;--aw-ground:#0C1930;--aw-soft:#1A3355;
  --aw-border:#385375;--aw-muted:#B8C9DE;--aw-success:#71D4A7;
  --aw-error:#FFA1AD;--aw-warning:#F8CE77;--aw-text:var(--aw-ink);
  --aw-shadow:0 8px 28px rgba(0,0,0,.22);
  --aw-shadow-raised:0 5px 0 rgba(0,0,0,.22),0 12px 30px rgba(0,0,0,.18);
  color-scheme:dark;
}
html{scroll-behavior:auto!important;scroll-padding-top:12px}
body{font-family:"Noto Sans Thai","Sarabun","Segoe UI",system-ui,sans-serif}
[lang="zh"],.hero-symbol,.hanzi,.question-prompt,.feedback-chinese{font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif}
:where(a,button,input,select,textarea,summary,[role="button"]):focus-visible{outline:3px solid var(--aw-focus)!important;outline-offset:3px!important}
:where(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(button,input,select,textarea){font:inherit}
:where(button,a){touch-action:manipulation}
:where(button,[role="button"]):disabled{cursor:not-allowed;opacity:.55}
:where(h1,h2,h3,p){overflow-wrap:break-word}
:where(.muted,.description,.source-note){color:var(--aw-muted)}
[hidden]{display:none!important}
/* Shared shell — reference-specific styling; avoid touching independent Files app. */
body:has(> #sidebar):not(:has(.game-main)) {background:var(--aw-ground);color:var(--aw-text)}
body:has(> #sidebar) #sidebar{background:var(--aw-surface);border-right:1px solid var(--aw-border);box-shadow:2px 0 20px rgba(17,57,108,.035)}
body:has(> #sidebar) #sidebar .brand{color:var(--aw-ink);text-decoration:none}
body:has(> #sidebar) #sidebar .logo{background:linear-gradient(150deg,#153e90,#2455d6);color:#fff;border-radius:13px}
body:has(> #sidebar) #sidebar nav a{min-height:43px}
body:has(> #sidebar) #sidebar .nav-item{display:flex;gap:10px;align-items:center;border-radius:12px;color:var(--aw-text);font-weight:650;text-decoration:none;transition:background .16s,color .16s}
body:has(> #sidebar) #sidebar .nav-item:hover{background:var(--aw-blue-100);color:var(--aw-deep)}
body:has(> #sidebar) #sidebar .nav-item.active{background:var(--aw-blue-100);color:var(--aw-deep);box-shadow:inset 3px 0 var(--aw-royal);font-weight:800}
body:has(> #sidebar) #sidebar .v6-more-links{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding-top:12px;border-top:1px solid var(--aw-border)}
body:has(> #sidebar) #sidebar .v6-more-links a{display:flex;align-items:center;text-decoration:none;color:var(--aw-muted);font-size:14px;padding:10px 12px;border-radius:10px;line-height:1.4}
body:has(> #sidebar) #sidebar .v6-more-links a:hover,body:has(> #sidebar) #sidebar .v6-more-links a:focus-visible{background:var(--aw-blue-100);color:var(--aw-deep)}
body:has(> #sidebar) .topbar{background:var(--aw-surface);color:var(--aw-text);border-bottom:1px solid var(--aw-border)}
body:has(> #sidebar) .breadcrumb{color:var(--aw-muted);font-size:13px}
body:has(> #sidebar) .breadcrumb strong{color:var(--aw-text);font-weight:750}
body:has(> #sidebar) .header-actions{gap:12px}
body:has(> #sidebar) .header-actions > a:not(.button){font-weight:650}
body:has(> #sidebar) .context-wrap{background:var(--aw-surface);border:1px solid var(--aw-border);border-radius:var(--aw-radius-m);box-shadow:var(--aw-shadow);margin-block:17px}
body:has(> #sidebar) .context{align-items:end}
body:has(> #sidebar) .context select{background:var(--aw-surface);color:var(--aw-text);border:1px solid var(--aw-border);border-radius:10px;min-height:42px}
body:has(> #sidebar) #main{color:var(--aw-text)}
body:has(> #sidebar) #main > h1{font-size:clamp(28px,3.2vw,38px);line-height:1.3;letter-spacing:-.025em;color:var(--aw-text);margin-bottom:8px}
body:has(> #sidebar) #main > .muted{font-size:15px;line-height:1.8}
body:has(> #sidebar) #main .section-head{gap:12px;margin-top:24px;margin-bottom:14px}
body:has(> #sidebar) #main .section-head h2{font-size:clamp(19px,2.1vw,24px);color:var(--aw-text)}
body:has(> #sidebar) #main .card:not(.hero){border:1px solid var(--aw-border);border-radius:var(--aw-radius-m);background:var(--aw-surface);color:var(--aw-text);box-shadow:var(--aw-shadow)}
body:has(> #sidebar) #main .card h2,body:has(> #sidebar) #main .card h3{color:var(--aw-text)}
body:has(> #sidebar) #main .card p,body:has(> #sidebar) #main .card small{line-height:1.6}
body:has(> #sidebar) #main .tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:22px;text-decoration:none;min-width:0;transition:border-color .17s,transform .17s,box-shadow .17s}
body:has(> #sidebar) #main .tool-card:hover{border-color:var(--aw-sky);transform:translateY(-2px);box-shadow:var(--aw-shadow-raised)}
body:has(> #sidebar) #main .tool-card .icon-tile{display:grid;place-items:center;background:var(--aw-blue-100);color:var(--aw-deep);width:48px;height:48px;border-radius:14px;font-weight:850}
body:has(> #sidebar) #main .tool-card h3{font-weight:800;margin:0}
body:has(> #sidebar) #main .tool-card p{color:var(--aw-muted);line-height:1.7;margin:0}
body:has(> #sidebar) #main .button,body:has(> #sidebar) #main button.button{border-radius:11px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;text-decoration:none;padding:10px 17px;line-height:1.4}
body:has(> #sidebar) #main .button-primary{background:#2455D6;color:#fff;border:1px solid #2455D6;box-shadow:0 3px 0 #163C91}
body:has(> #sidebar) #main .button-primary:hover{background:#1848C2}
body:has(> #sidebar) #main .button-secondary,body:has(> #sidebar) #main .ghost-btn{background:var(--aw-surface);color:var(--aw-deep);border:1px solid var(--aw-border)}
body:has(> #sidebar) #main .stat{padding:19px 21px}
body:has(> #sidebar) #main .stat small{color:var(--aw-muted);font-size:13px}
body:has(> #sidebar) #main .stat-value{font-size:clamp(30px,3.3vw,40px);line-height:1.2;font-weight:850;color:var(--aw-deep);font-variant-numeric:tabular-nums}
body:has(> #sidebar) #main :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){background:var(--aw-surface);color:var(--aw-text);border:1px solid var(--aw-border);border-radius:11px;min-height:44px}
body:has(> #sidebar) #main :is(input,select,textarea):focus{border-color:var(--aw-royal)}
body:has(> #sidebar) #main .pill{background:var(--aw-soft);color:var(--aw-deep);border:1px solid var(--aw-border)}
body:has(> #sidebar) .site-footer{color:var(--aw-muted);border-top:1px solid var(--aw-border)}
/* Homepage: brand hero is ALWAYS blue, never white-on-white. */
main[data-page="home"] .hero{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:clamp(24px,4vw,42px);border-radius:24px;background:linear-gradient(112deg,#153E90 3%,#2455D6 58%,#347DEB 100%)!important;color:#fff!important;border:1px solid #2455D6!important;box-shadow:0 15px 35px rgba(23,73,162,.17)}
main[data-page="home"] .hero :is(h2,p,.eyebrow){color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}
main[data-page="home"] .hero h2{font-size:clamp(27px,3.3vw,43px);line-height:1.25;letter-spacing:-.035em;margin:10px 0}
main[data-page="home"] .hero p{font-size:15px;line-height:1.7}
main[data-page="home"] .hero .eyebrow{color:#D3E8FF!important;-webkit-text-fill-color:#D3E8FF!important}
main[data-page="home"] .hero .hero-symbol-wrap{min-width:clamp(90px,18vw,225px);opacity:.9}
main[data-page="home"] .hero .hero-symbol{color:#F2F8FF!important;-webkit-text-fill-color:#F2F8FF!important}
main[data-page="home"] .hero .hero-orbit-char{color:#C7E2FF!important;-webkit-text-fill-color:#C7E2FF!important}
main[data-page="home"] .hero a.button-light{background:#fff!important;border:1px solid #fff!important;color:#153E90!important;-webkit-text-fill-color:#153E90!important;box-shadow:0 4px 0 #A7C6F7}
main[data-page="home"] .hero a.button-outline-light{background:rgba(255,255,255,.12)!important;border:1px solid #E6F2FF!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
main[data-page="home"] .aw-files-entry{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 26px;margin:23px 0;border-radius:20px;text-decoration:none!important;color:#fff!important;background:linear-gradient(105deg,#153E90,#2455D6 69%,#4394F1);box-shadow:0 11px 26px rgba(27,77,160,.17);transition:transform .16s,box-shadow .16s}
main[data-page="home"] .aw-files-entry:hover{transform:translateY(-2px);box-shadow:0 15px 32px rgba(27,77,160,.22)}
main[data-page="home"] .aw-files-entry__lead{display:flex;align-items:center;gap:18px;min-width:0}
main[data-page="home"] .aw-files-entry__icon{width:61px;height:61px;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:16px}
main[data-page="home"] .aw-files-entry__icon svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
main[data-page="home"] .aw-files-entry__text{display:flex;flex-direction:column;gap:3px}
main[data-page="home"] .aw-files-entry__overline{font-size:11px;color:#CEE5FF;font-weight:800;letter-spacing:.09em}
main[data-page="home"] .aw-files-entry__text strong{font-size:clamp(19px,2vw,25px);color:#fff!important}
main[data-page="home"] .aw-files-entry__text small{color:#EFF6FF!important;font-size:14px;line-height:1.6}
main[data-page="home"] .aw-files-entry__action{display:inline-flex;gap:10px;align-items:center;white-space:nowrap;color:#153E90;background:#fff;border-radius:11px;padding:12px 16px;font-size:14px;font-weight:800}
/* Library, course, practice and progress work areas */
main[data-page="learn"] .lesson-grid .lesson-card{padding:22px}
main[data-page="learn"] .lesson-card .lesson-count{color:var(--aw-deep);font-weight:850}
main[data-page="practice"] .practice-grid .tool-card{position:relative;min-height:190px}
main[data-page="practice"] .practice-grid .tool-card .text-link{margin-top:auto;color:var(--aw-deep);font-weight:800}
main[data-page="practice"] .practice-grid .tool-card[data-practice-mode="listening"] .icon-tile{background:#E4F8FF;color:#166E9A}
main[data-page="practice"] .practice-grid .tool-card[data-practice-mode="matching"] .icon-tile{background:#EDE8FF;color:#5E48AA}
main[data-page="practice"] .practice-grid .tool-card[data-practice-mode="sentences"] .icon-tile{background:#E4F8EC;color:#217954}
main[data-page="review"] .v8-review-hero{background:linear-gradient(110deg,#153E90,#2455D6);color:#fff;border:1px solid #2455D6;border-radius:22px}
main[data-page="review"] .v8-review-hero :is(h1,p,.v8-eyebrow){color:#fff!important;-webkit-text-fill-color:#fff!important}
main[data-page="review"] .v8-review-stats article,main[data-page="review"] .v8-panel{border-radius:var(--aw-radius-m);border:1px solid var(--aw-border);box-shadow:var(--aw-shadow)}
main[data-page="words"] .aw96-vocab{color:var(--aw-text)}
main[data-page="words"] .aw96-header,main[data-page="words"] .aw96-workspace,main[data-page="words"] .aw96-summary{border-radius:var(--aw-radius-m)}
main[data-page="words"] .aw96-search input{min-width:0}
main[data-page="tools"] .aw-files-tools-link{display:flex;align-items:center;gap:14px;text-decoration:none;border-radius:16px;padding:17px 19px;border:1px solid #9CBDF0;background:linear-gradient(110deg,#E6F1FF,#fff);color:#153E90;box-shadow:var(--aw-shadow);margin-bottom:20px}
main[data-page="tools"] .aw-files-tools-link__icon{font-size:28px}
main[data-page="tools"] .aw-files-tools-link__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
main[data-page="tools"] .aw-files-tools-link__body strong{color:#153E90;font-size:17px}
main[data-page="tools"] .aw-files-tools-link__body small{color:#435D84;font-size:13px}
main[data-page="tools"] .aw-files-tools-link__arrow{font-size:22px}
main[data-page="account"] .profile-hero,main[data-page="account"] .avatar-studio,main[data-page="account"] .photo-upload-card{border-radius:var(--aw-radius-l)}
main[data-page="account"] .avatar-option button{border-radius:14px;min-height:44px}
main[data-page="feedback"] .aw9-feedback-card{max-width:800px}
main[data-page="support"] .bank-number{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Standalone game shells: do not disturb original JS selectors or IDs. */
body:has(.game-main){background:var(--aw-ground)!important;color:var(--aw-text)!important}
body:has(.game-main) .game-header{background:var(--aw-surface);color:var(--aw-text);border-bottom:1px solid var(--aw-border)}
body:has(.game-main) .game-header a{color:var(--aw-text)}
body:has(.game-main) .game-main{width:min(100% - 32px,1040px);margin-inline:auto}
body:has(.game-main) .game-top{gap:18px;align-items:center}
body:has(.game-main) .game-top h1{color:var(--aw-text);font-size:clamp(27px,3vw,38px);line-height:1.25}
body:has(.game-main) .game-top .description{color:var(--aw-muted);line-height:1.7}
body:has(.game-main) .setup-card,body:has(.game-main) .play-card,body:has(.game-main) .summary-card{background:var(--aw-surface);color:var(--aw-text);border:1px solid var(--aw-border);border-radius:22px;box-shadow:var(--aw-shadow)}
body:has(.game-main) .setup-card label{color:var(--aw-text)}
body:has(.game-main) .setup-card :is(select,input){background:var(--aw-surface);border:1px solid var(--aw-border);color:var(--aw-text);min-height:44px;border-radius:11px}
body:has(.game-main) .play-card{position:relative;isolation:isolate;overflow:visible;min-height:310px;overflow-anchor:none}
body:has(.game-main) .progress-track{background:var(--aw-blue-100);border-radius:999px;overflow:hidden}
body:has(.game-main) .progress-track #progress-fill{background:#2455D6}
body:has(.game-main) .question-prompt{font-size:clamp(31px,5vw,58px);color:var(--aw-text);overflow-wrap:anywhere}
body:has(.game-main) .answers{gap:12px}
body:has(.game-main) .answers button{min-height:51px;border-radius:13px;background:var(--aw-surface);border:1px solid var(--aw-border);color:var(--aw-text);font-weight:650}
body:has(.game-main) .answers button:hover:not(:disabled){border-color:var(--aw-royal);background:var(--aw-blue-100)}
body:has(.game-main) .primary-btn{min-height:48px;border-radius:12px;background:#2455D6;color:#fff;border:1px solid #2455D6;font-weight:800}
body:has(.game-main) .primary-btn:hover:not(:disabled){background:#1948C1}
body:has(.game-main) .listen-btn{min-height:44px;border-radius:12px}
body:has(.game-main) .learning-note,body:has(.game-main) .v8-memory-panel{background:var(--aw-surface);border:1px solid var(--aw-border);border-radius:18px}
/* In-place result layer. No scroll anchoring or DOM relocation. */
#aw-result-layer[hidden]{display:none!important}
#aw-result-layer{position:fixed!important;inset:0!important;z-index:12000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;background:rgba(8,27,58,.58)!important;overscroll-behavior:contain!important}
#aw-result-layer .aw-result-panel{width:min(100%,610px)!important;max-height:calc(100vh - 32px)!important;max-height:calc(100dvh - 32px - env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overscroll-behavior:contain!important;background:var(--aw-surface)!important;color:var(--aw-text)!important;border:1px solid var(--aw-border)!important;border-radius:23px!important;padding:clamp(18px,3vw,30px)!important;box-shadow:0 26px 90px rgba(5,22,56,.36)!important;box-sizing:border-box!important}
#aw-result-layer #feedback{display:flex!important;flex-direction:column;gap:10px;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--aw-text)!important;margin:0!important;padding:0!important;position:static!important;max-height:none!important;width:100%!important;transform:none!important}
#aw-result-layer #feedback-title{font-size:clamp(22px,3.2vw,29px);line-height:1.3;color:var(--aw-text)}
#aw-result-layer #feedback[data-state="right"] #feedback-title{color:var(--aw-success)!important}
#aw-result-layer #feedback[data-state="wrong"] #feedback-title{color:var(--aw-error)!important}
#aw-result-layer #feedback-explain{color:var(--aw-muted)!important;font-size:15px;line-height:1.8;margin:0}
#aw-result-layer #feedback-chinese{font-size:clamp(34px,5vw,52px);font-weight:800;line-height:1.35;color:var(--aw-text)!important}
#aw-result-layer #next-btn{width:100%!important;min-height:53px!important;margin-top:12px!important;box-shadow:0 4px 0 #173D93!important;background:#2455D6!important;color:#fff!important;border:1px solid #153E90!important;flex-shrink:0!important}
#aw-result-layer #next-btn:focus-visible{outline-color:var(--aw-focus)!important}
html.aw-result-open{scroll-behavior:auto!important}
/* Pinyin / Flashcard extra polish, only existing structural classes. */
body:has(.pinyin-tabs) .pinyin-tab{min-height:44px;border-radius:12px}
body:has(.pinyin-tabs) .pinyin-tab:focus-visible{outline-offset:2px}
body:has(.pinyin-tabs) .pinyin-chart-tools :is(select,input){min-height:44px}
body:has(.pinyin-tabs) .pinyin-panel{min-width:0}
body:has(.studio) .studio{color:var(--aw-text)}
body:has(.studio) .studio .hero{background:linear-gradient(110deg,#153E90,#2455D6);border-radius:20px;color:#fff;box-shadow:var(--aw-shadow)}
body:has(.studio) .studio .hero :is(h1,p){color:#fff!important}
body:has(.studio) .studio .studycard{touch-action:manipulation}
body:has(.studio) .studio :is(button,a){min-height:42px}
/* Accessible reduced motion and responsive typography. */
@media(max-width:760px){
  main[data-page="home"] .hero{padding:23px 19px;gap:12px;align-items:flex-start}
  main[data-page="home"] .hero .hero-symbol-wrap{min-width:72px;max-width:90px;opacity:.65}
  main[data-page="home"] .aw-files-entry{padding:18px;flex-direction:column;align-items:stretch;gap:16px}
  main[data-page="home"] .aw-files-entry__icon{width:52px;height:52px}
  main[data-page="home"] .aw-files-entry__action{justify-content:center}
  body:has(> #sidebar) .v6-mobile-nav{background:var(--aw-surface);border-top:1px solid var(--aw-border);box-shadow:0 -5px 25px rgba(15,47,97,.09);padding-bottom:env(safe-area-inset-bottom,0px)}
  body:has(> #sidebar) .v6-mobile-nav a{min-height:48px;color:var(--aw-muted)}
  body:has(> #sidebar) .v6-mobile-nav a[aria-current="page"]{color:var(--aw-deep)}
  body:has(.game-main) .game-main{width:min(100% - 22px,1040px)}
  body:has(.game-main) .game-top{align-items:flex-start}
  body:has(.game-main) .setup-card{gap:10px}
  body:has(.game-main) .play-card{padding:18px;min-height:280px}
  #aw-result-layer{padding:12px 10px calc(12px + env(safe-area-inset-bottom,0px))!important}
  #aw-result-layer .aw-result-panel{border-radius:19px!important;padding:20px 18px!important}
}
@media(max-width:430px){
  main[data-page="home"] .hero .hero-symbol-wrap{display:none}
  main[data-page="home"] .hero .row{display:flex;flex-wrap:wrap;gap:10px}
  main[data-page="home"] .hero a.button{flex:1 1 130px}
  body:has(> #sidebar) #main .tool-card{padding:18px}
  body:has(> #sidebar) #main .grid-3{grid-template-columns:minmax(0,1fr)}
  body:has(.game-main) .answers{grid-template-columns:minmax(0,1fr)}
}
@media(max-height:470px){#aw-result-layer{align-items:flex-start!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{#aw-result-layer{display:none!important}body{background:#fff!important}}
/* Authentication: compact, legible, no JS contract changes. */
body.auth-page{background:radial-gradient(circle at 20% 0%,#E2EFFF 0%,transparent 42%),var(--aw-ground);color:var(--aw-text);min-height:100vh}
body.auth-page .auth-card{background:var(--aw-surface);color:var(--aw-text);border:1px solid var(--aw-border);border-radius:24px;box-shadow:0 25px 75px rgba(13,48,103,.13);padding:clamp(22px,3.4vw,36px)}
body.auth-page .auth-card h1{font-size:clamp(25px,3vw,33px);line-height:1.3;color:var(--aw-text)}
body.auth-page .auth-card .muted{color:var(--aw-muted);line-height:1.7}
body.auth-page .auth-card :is(input,select){min-height:46px;border-radius:11px;border:1px solid var(--aw-border);background:var(--aw-surface);color:var(--aw-text)}
body.auth-page .auth-card .form-field{gap:7px;color:var(--aw-text);font-size:14px;font-weight:650}
body.auth-page .auth-card .field-help{font-size:12px;color:var(--aw-muted)}
body.auth-page .auth-card .field-help.invalid{color:var(--aw-error)}
body.auth-page .auth-card .field-help.valid{color:var(--aw-success)}
body.auth-page .auth-card .social-button{min-height:48px;border:1px solid var(--aw-border);border-radius:12px;background:var(--aw-surface);color:var(--aw-text)}
body.auth-page .auth-card #auth-submit{min-height:50px;background:#2455D6;border-radius:12px;color:#fff;font-weight:800}
/* Admin surfaces: preserve legacy Tailwind and real data tables, improve contrast/inputs. */
html[data-aw-surface="admin"] body{background:var(--aw-ground);color:var(--aw-text)}
html[data-aw-surface="admin"] :is(main,section,article).bg-white{background:var(--aw-surface);color:var(--aw-text);border-color:var(--aw-border)}
html[data-aw-surface="admin"] :is(button,input,select,textarea){min-height:42px}
html[data-aw-surface="admin"] :is(input,select,textarea){border-radius:10px;max-width:100%}
html[data-aw-surface="admin"] table{width:100%;border-collapse:collapse}
html[data-aw-surface="admin"] th{font-weight:800;text-align:left}
html[data-aw-surface="admin"] th,html[data-aw-surface="admin"] td{padding:10px 13px;border-bottom:1px solid var(--aw-border)}
/* Copybook and handwriting: light touch. No changes to printable paper layouts. */
@media screen{
 html[data-aw-theme-page="copybook"] :is(button,select,input):focus-visible{outline:3px solid #F6C341;outline-offset:3px}
 html[data-aw-theme-page="copybook"] :is(button,select){min-height:40px}
 html[data-aw-theme-page="copybook"] :is(.toolbar,.control-panel,.settings-panel){border-radius:14px}
 body:has(.page-main) .page-main{min-width:0}
 body:has(.page-main) :is(button,select,input):focus-visible{outline:3px solid var(--aw-focus);outline-offset:2px}
}
/* Dark mode bridge: respect existing theme toggler while retaining contrast. */
html[data-theme="dark"] main[data-page="home"] .aw-files-entry{background:linear-gradient(105deg,#12316E,#2455D6 65%,#326BCC)}
html[data-theme="dark"] main[data-page="tools"] .aw-files-tools-link{background:linear-gradient(105deg,#1A3557,#152640);border-color:var(--aw-border);color:#F0F5FF}
html[data-theme="dark"] main[data-page="tools"] .aw-files-tools-link__body :is(strong,small){color:#F0F5FF}
html[data-theme="dark"] main[data-page="practice"] .practice-grid .tool-card .icon-tile{background:var(--aw-blue-100);color:var(--aw-deep)}

/* AW Chinese Frontend V2.1 — Stable source extension (no framework migrations) */
:root{--aw-ink:#132849;--aw-blue:#2455D6;--aw-navy:#153E90;--aw-soft:#edf5ff;--aw-paper:#fff;--aw-radius:18px}
/* Navigation is authored by PHP; exactly one library entry in secondary links. */
#sidebar nav .v6-more-links{display:flex;flex-direction:column;align-items:stretch;gap:2px}
#sidebar nav .v6-more-links a{display:flex;align-items:center;min-height:43px;padding:9px 12px;border-radius:11px;text-decoration:none;color:var(--aw-text,#132849);font-size:14px;line-height:1.4}
#sidebar nav .v6-more-links a:hover,#sidebar nav .v6-more-links a:focus-visible{background:var(--aw-blue-100,#eaf2ff);color:var(--aw-deep,#153E90)}
#sidebar nav .v6-more-links a.aw-files-nav-link{position:relative;font-weight:750;border:1px solid var(--aw-border,#cbd9ee);background:var(--aw-blue-100,#eaf2ff);color:var(--aw-deep,#153e90);padding-left:37px}
#sidebar nav .v6-more-links a.aw-files-nav-link::before{content:'▤';position:absolute;left:13px;font-size:18px;line-height:1}
#sidebar nav .v6-more-links a.aw-files-nav-link:hover{border-color:var(--aw-royal,#2455d6)}
/* Shared shell: spacing, card hierarchy, contrast and focus across Home, Lessons, SRS, Tools, Account etc. */
#main{min-width:0;max-width:1320px;margin-inline:auto;line-height:1.7}
#main>h1,#main>.page-head h1,#main .aw96-header h1{font-size:clamp(27px,3vw,38px);line-height:1.25;letter-spacing:-.02em;color:var(--aw-text,#132849)}
#main>.muted,#main .page-head .muted{max-width:72ch;line-height:1.75}
#main .section-head{gap:12px;flex-wrap:wrap}
#main .section-head h2{font-size:clamp(19px,2vw,25px);line-height:1.35}
#main :is(.card,.lesson-card,.tool-card,.v8-panel,.aw96-summary,.profile-hero){min-width:0}
#main :is(.grid-2,.grid-3,.lesson-grid,.tools-hub,.practice-grid)>*{min-width:0}
#main :is(input,select,textarea):not([type=checkbox]):not([type=radio]){max-width:100%;color:var(--aw-text,#132849)}
#main :is(.button,.primary-btn,.aw96-practice){min-height:44px;align-items:center;justify-content:center;gap:8px}
#main a:focus-visible,#main button:focus-visible,#sidebar a:focus-visible{outline:3px solid #e3a72b;outline-offset:3px}
#main :is(.card,.lesson-card,.tool-card){border-radius:18px}
#main .tool-card h3{margin-block:10px 5px;line-height:1.4}
#main .tool-card p{line-height:1.75}
#main .stat-value{font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:-.025em}
#main .pagination{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#main .table-wrap{max-width:100%;overflow-x:auto}
#main .avatar-grid{max-width:100%}
#main .aw96-search input{width:100%}
#main .aw96-tools{gap:12px}
#main .v8-review-panels>*{min-width:0}
#main .v8-stat strong{font-variant-numeric:tabular-nums}
#main .aw-files-tools-link:focus-visible,#main .aw-files-entry:focus-visible{outline:3px solid #e3a72b;outline-offset:3px}
main[data-page="home"] .hero{background:linear-gradient(110deg,#153e90 0%,#2455d6 70%,#3679e7 100%)!important;color:#fff!important;overflow:hidden}
main[data-page="home"] .hero :is(h2,p,.eyebrow){color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.08)}
main[data-page="home"] .hero .button-light{background:#fff!important;color:#153e90!important}
main[data-page="home"] .hero .button-outline-light{border:1px solid rgba(255,255,255,.8)!important;color:#fff!important}
main[data-page="home"] .aw-files-entry{isolation:isolate;position:relative;overflow:hidden}
main[data-page="home"] .aw-files-entry__lead{flex:1}
main[data-page="home"] .aw-files-entry__text small{display:block}
main[data-page="home"] .aw-files-entry__action{font-size:14px}
/* Game-focused screen: avoid forcing learners past a large setup card once play begins. */
body:has(.game-main){background:var(--aw-bg,#f7f9fc);color:var(--aw-text,#132849)}
body:has(.game-main) .game-main{width:min(100% - 32px,1090px);max-width:1090px;margin-inline:auto}
body.is-playing .game-main .setup-card,body.is-summary .game-main .setup-card{display:none!important}
body.is-playing .game-main .game-top,body.is-summary .game-main .game-top{padding-block:8px!important;margin-bottom:8px!important}
body.is-playing .game-main .game-top .description,body.is-summary .game-main .game-top .description{display:none!important}
body.is-playing .game-main .game-top h1{font-size:clamp(19px,2.4vw,26px)!important}
body.is-playing .game-main .play-card{max-width:950px;margin-inline:auto;padding:clamp(16px,2.2vw,30px)!important}
body.is-playing .game-main .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.is-playing .game-main .answers[hidden]{display:none!important}
body.is-playing .game-main .answers .answer-btn{padding:14px 18px!important;text-align:center!important;line-height:1.5!important;min-height:62px!important;white-space:normal;overflow-wrap:anywhere}
body.is-playing .game-main .progress-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
body.is-playing .game-main .prompt-wrap{padding-block:10px}
body.is-playing .game-main .question-prompt{line-height:1.25!important}
body.is-playing .game-main #audio-state{min-height:0}
/* Fixed feedback dialog: stable viewport position on PCs and phones. Its body alone may scroll. */
#aw-result-layer[hidden],#aw-result-layer #feedback[hidden]{display:none!important}
#aw-result-layer{position:fixed!important;inset:0!important;z-index:14000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(12px,2.6vw,26px)!important;background:rgba(11,30,62,.68)!important;overscroll-behavior:contain!important;box-sizing:border-box!important;backdrop-filter:blur(5px)}
#aw-result-layer .aw-result-panel{width:min(100%,780px)!important;max-height:calc(100dvh - 24px)!important;min-height:0!important;display:flex;flex-direction:column;overflow:hidden!important;padding:0!important;border:1px solid rgba(255,255,255,.65)!important;border-radius:23px!important;background:var(--aw-surface,#fff)!important;color:var(--aw-text,#132849)!important;box-shadow:0 28px 90px rgba(4,17,45,.42)!important}
#aw-result-layer .aw-result-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(105deg,#153e90,#2455d6);color:#fff;font-size:12px;font-weight:800;letter-spacing:.01em;padding:12px clamp(18px,3vw,28px);flex-shrink:0}
#aw-result-layer #aw-result-step{opacity:.86;font-variant-numeric:tabular-nums}
#aw-result-layer #feedback{display:flex!important;flex-direction:column;gap:0!important;padding:0!important;margin:0!important;min-height:0;max-height:none!important;overflow:hidden!important;background:var(--aw-surface,#fff)!important;border:0!important;box-shadow:none!important;position:relative!important;color:var(--aw-text,#132849)!important}
#aw-result-layer .aw-result-heading{display:flex;align-items:center;gap:13px;padding:clamp(16px,3vw,24px) clamp(18px,3vw,28px) 12px;flex-shrink:0}
#aw-result-layer .aw-result-state-icon{width:43px;height:43px;display:grid;place-items:center;flex-shrink:0;border-radius:13px;font-size:24px;font-weight:900;color:#14643a;background:#e2f8ea}
#aw-result-layer #feedback[data-state="right"] .aw-result-state-icon::before{content:'✓'}
#aw-result-layer #feedback[data-state="wrong"] .aw-result-state-icon::before{content:'!'}
#aw-result-layer #feedback[data-state="wrong"] .aw-result-state-icon{background:#fff0ee;color:#aa3026}
#aw-result-layer #feedback-title{color:var(--aw-text,#132849)!important;font-size:clamp(20px,2.5vw,26px)!important;line-height:1.3!important}
#aw-result-layer #feedback[data-state="right"] #feedback-title{color:#16713f!important}
#aw-result-layer #feedback[data-state="wrong"] #feedback-title{color:#a8342f!important}
#aw-result-layer .aw-result-content{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:16px;padding:4px clamp(18px,3vw,28px) 18px;align-items:start}
#aw-result-layer .aw-result-word{min-width:0;background:var(--aw-blue-100,#edf5ff);padding:16px;border:1px solid var(--aw-border,#cbd9ee);border-radius:15px;text-align:center;overflow-wrap:anywhere}
#aw-result-layer .aw-result-word-label,#aw-result-layer .aw-result-explain-label{font-size:12px;font-weight:800;letter-spacing:.015em;color:var(--aw-muted,#52657f)}
#aw-result-layer #feedback-chinese{font-size:clamp(40px,5vw,70px)!important;font-weight:800!important;line-height:1.35!important;color:var(--aw-text,#132849)!important;padding:8px 0!important;text-align:center}
#aw-result-layer #feedback-audio{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;padding:10px 14px;margin:4px auto 0;min-height:43px}
#aw-result-layer #feedback-audio[hidden]{display:none!important}
#aw-result-layer .aw-result-detail{min-width:0;padding:12px 2px}
#aw-result-layer #feedback-explain{font-size:clamp(14px,1.7vw,16px)!important;color:var(--aw-text,#132849)!important;line-height:1.85!important;overflow-wrap:anywhere}
#aw-result-layer .aw-result-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(18px,3vw,28px) calc(15px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--aw-border,#cbd9ee);background:var(--aw-surface,#fff);flex-shrink:0}
#aw-result-layer .aw-result-hint{font-size:13px;color:var(--aw-muted,#52657f);line-height:1.5}
#aw-result-layer #next-btn{min-width:190px;width:auto!important;flex-shrink:0;min-height:51px!important;padding:12px 21px!important;border-radius:12px!important;background:#2455d6!important;border:1px solid #153e90!important;color:#fff!important;box-shadow:0 4px 0 #153e90!important;font-weight:800;cursor:pointer}
#aw-result-layer #next-btn:hover{background:#1947bc!important}
#aw-result-layer #next-btn:focus-visible{outline:3px solid #edb333!important;outline-offset:3px}
#aw-result-layer #aw-hanzi-feedback{max-width:100%}
html.aw-result-open{scroll-behavior:auto!important}
@media(max-width:700px){
 body.is-playing .game-main .answers{grid-template-columns:1fr}
 body.is-playing .game-main .answers .answer-btn{min-height:56px!important}
 #aw-result-layer{padding:10px!important}
 #aw-result-layer .aw-result-panel{max-height:calc(100dvh - 20px)!important;border-radius:19px!important}
 #aw-result-layer .aw-result-content{grid-template-columns:1fr;gap:10px}
 #aw-result-layer .aw-result-word{padding:10px 14px}
 #aw-result-layer #feedback-chinese{font-size:clamp(37px,9vw,56px)!important;padding:0!important}
 #aw-result-layer .aw-result-heading{padding:14px 16px 8px}
 #aw-result-layer .aw-result-topline{padding:11px 16px}
 #aw-result-layer .aw-result-content{padding:4px 16px 14px}
 #aw-result-layer .aw-result-footer{padding:11px 16px calc(12px + env(safe-area-inset-bottom,0px))}
 #aw-result-layer .aw-result-hint{display:none}
 #aw-result-layer #next-btn{width:100%!important}
}
@media(max-width:420px){main[data-page="home"] .aw-files-entry{padding:16px}#main .section-head{align-items:flex-start}}
@media(max-height:540px){#aw-result-layer{align-items:center!important}#aw-result-layer .aw-result-heading{padding-top:10px;padding-bottom:6px}#aw-result-layer .aw-result-word{padding:8px}#aw-result-layer #feedback-chinese{font-size:36px!important;padding:2px!important}}
@media(prefers-reduced-motion:reduce){#aw-result-layer{backdrop-filter:none}}
/* Header, forms and utilities remain readable in dark mode. */
html:is([data-theme="dark"],[data-aw-theme="dark"],.dark) #sidebar nav .v6-more-links a.aw-files-nav-link{background:#1b3557;color:#f0f5ff;border-color:#42618d}
html:is([data-theme="dark"],[data-aw-theme="dark"],.dark) #aw-result-layer .aw-result-word{background:#183352;border-color:#416085}
html:is([data-theme="dark"],[data-aw-theme="dark"],.dark) #aw-result-layer .aw-result-topline{background:linear-gradient(100deg,#15346c,#2455d6)}
@media print{#aw-result-layer{display:none!important}}
/* V2.1.1: prevent legacy audio-button styles from stacking Thai syllables vertically. */
#aw-result-layer #feedback-audio:not([hidden]){
  display:inline-flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:center!important;gap:8px!important;width:auto!important;
  min-width:152px!important;max-width:100%!important;min-height:44px!important;
  white-space:nowrap!important;flex-wrap:nowrap!important;line-height:1.3!important;
  padding:9px 14px!important;
}
#aw-result-layer #feedback-audio :is(span,.aw84-label){
  display:inline!important;width:auto!important;flex:0 0 auto!important;
  white-space:nowrap!important;word-break:normal!important;
}
#aw-result-layer #feedback-audio svg{display:inline-block!important;flex:0 0 20px!important;width:20px!important;height:20px!important}
/* Sidebar links have to beat the two-ID legacy shell selectors. */
body:has(> #sidebar) #sidebar nav .v6-more-links a.aw-files-nav-link{
  padding:11px 13px 11px 42px!important;
  font-weight:800!important;position:relative!important;letter-spacing:0!important;
}
body:has(> #sidebar) #sidebar nav .v6-more-links a.aw-files-nav-link::before{
  position:absolute!important;inset:auto auto auto 14px!important;
  font-size:18px!important;line-height:1!important;letter-spacing:0!important;
}