/* AW Chinese · V8.3 Visual & Motion Layer
   Presentation only. Semantic colors; SRS logic/data untouched. */
:root {
  --awm-blue:#2455D6; --awm-navy:#153E90; --awm-ink:#173158;
  --awm-canvas:#F6F8FD; --awm-card:#FFFFFF; --awm-line:#D9E3F1;
  --awm-muted:#506583; --awm-blue-soft:#EAF1FF;
  --awm-green:#148451; --awm-green-soft:#E7F8EF;
  --awm-orange:#AE620F; --awm-orange-soft:#FFF3DF;
  --awm-red:#BC3740; --awm-red-soft:#FFF0F0;
  --awm-purple:#7651C3; --awm-purple-soft:#F1ECFF;
  --awm-teal:#087E83; --awm-teal-soft:#E4F8F7;
  --awm-radius:20px; --awm-shadow:0 11px 34px rgba(28,62,112,.09);
  --awm-ease:cubic-bezier(.22,1,.36,1);
}
html:is([data-theme="dark"],[data-aw-theme="dark"],.dark),html[data-color-scheme="dark"],body.dark {
  --awm-blue:#90B6FF; --awm-navy:#BCD1FF; --awm-ink:#F2F6FF;
  --awm-canvas:#0D182B; --awm-card:#172A43; --awm-line:#3B5374;
  --awm-muted:#B7C8DF; --awm-blue-soft:#233C61;
  --awm-green:#75DCB1; --awm-green-soft:#193F39;
  --awm-orange:#FFCD80; --awm-orange-soft:#49331D;
  --awm-red:#FFACB4; --awm-red-soft:#493037;
  --awm-purple:#C6AAFF; --awm-purple-soft:#392E58;
  --awm-teal:#7FD9D2; --awm-teal-soft:#1B4347;
  --awm-shadow:0 12px 36px rgba(0,0,0,.25);
}
/* Shared color hierarchy: section cards stay quiet; key actions carry the brand. */
html body:has(#main) {background:var(--awm-canvas)}
#main :is(.card,.v8-panel,.v8-stat,.lesson-card,.tool-card){border-color:var(--awm-line);border-radius:var(--awm-radius)}
#main :is(.card,.tool-card,.lesson-card){box-shadow:var(--awm-shadow)}
#main :is(.card,.tool-card,.lesson-card):not(:hover){transition:box-shadow .22s var(--awm-ease),border-color .22s var(--awm-ease),transform .22s var(--awm-ease)}
#main a.card:is(:hover,:focus-visible),#main a.tool-card:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 17px 36px rgba(23,63,140,.15);border-color:var(--awm-blue)}
#main :is(.button-primary,.v8-review-main-cta){background:#2455D6;color:#fff;border-color:#2455D6;box-shadow:0 4px 0 #153E90}
#main :is(.button-primary,.v8-review-main-cta):is(:hover,:focus-visible){background:#1746BE;color:#fff}
#main :is(.button,.tool-card,.lesson-card,.nav-item), .game-main :is(button,a){-webkit-tap-highlight-color:transparent}
#main :is(.button,.tool-card,.lesson-card,.nav-item):active,.game-main :is(.answer-btn,.primary-btn,.ghost-btn):active{transform:translateY(2px) scale(.993)}
#main :is(.eyebrow,.v8-eyebrow){letter-spacing:.105em}
#main .pill{border-radius:999px}
/* Accent-color sections, not a rainbow of primary buttons. */
main[data-page="practice"] .practice-grid .tool-card:nth-child(5n+1) .icon-tile{background:var(--awm-blue-soft);color:var(--awm-blue)}
main[data-page="practice"] .practice-grid .tool-card:nth-child(5n+2) .icon-tile{background:var(--awm-teal-soft);color:var(--awm-teal)}
main[data-page="practice"] .practice-grid .tool-card:nth-child(5n+3) .icon-tile{background:var(--awm-purple-soft);color:var(--awm-purple)}
main[data-page="practice"] .practice-grid .tool-card:nth-child(5n+4) .icon-tile{background:var(--awm-orange-soft);color:var(--awm-orange)}
main[data-page="practice"] .practice-grid .tool-card:nth-child(5n+5) .icon-tile{background:var(--awm-green-soft);color:var(--awm-green)}
main[data-page="home"] .hero{box-shadow:0 18px 42px rgba(22,69,163,.2)}
main[data-page="home"] .hero :is(h1,h2,p){text-wrap:pretty}
/* Preserve intentionally BLUE brand hero. */
main[data-page="review"] .v8-review-hero{background:linear-gradient(120deg,#153E90,#2455D6 60%,#3074E7)!important;border-color:#2455D6!important;color:#fff!important}
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-stat{position:relative;overflow:hidden;background:var(--awm-card);border:1px solid var(--awm-line);box-shadow:var(--awm-shadow)}
main[data-page="review"] .v8-stat:before{content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:20px 20px 0 0;background:var(--awm-blue)}
main[data-page="review"] .v8-stat-blue:before{background:#2455D6}
main[data-page="review"] .v8-stat-orange:before{background:#EB9A3D}
main[data-page="review"] .v8-stat-violet:before{background:#8560E1}
main[data-page="review"] .v8-stat-green:before{background:#16A47F}
main[data-page="review"] .v8-stat-blue .v8-stat-icon{color:var(--awm-blue);background:var(--awm-blue-soft)}
main[data-page="review"] .v8-stat-orange .v8-stat-icon{color:var(--awm-orange);background:var(--awm-orange-soft)}
main[data-page="review"] .v8-stat-violet .v8-stat-icon{color:var(--awm-purple);background:var(--awm-purple-soft)}
main[data-page="review"] .v8-stat-green .v8-stat-icon{color:var(--awm-green);background:var(--awm-green-soft)}
main[data-page="review"] .v8-stat strong{color:var(--awm-ink)}
main[data-page="review"] :is(.v8-stat-blue,.v8-stat-orange,.v8-stat-violet,.v8-stat-green){background:var(--awm-card)!important}
main[data-page="review"] .v8-word-tag[data-status="DUE"],main[data-page="review"] .v8-word-tag[data-status="RECOVERY"]{background:var(--awm-orange-soft);color:var(--awm-orange)}
main[data-page="review"] .v8-word-tag[data-status="NEAR_DUE"]{background:var(--awm-purple-soft);color:var(--awm-purple)}
main[data-page="review"] .v8-word-tag[data-status="ON_TRACK"]{background:var(--awm-green-soft);color:var(--awm-green)}
/* The optional forecast folds away; the page starts with one clear action. */
.awm-forecast{margin:18px 0 23px;border:1px solid var(--awm-line);border-radius:var(--awm-radius);background:var(--awm-card);box-shadow:var(--awm-shadow);overflow:hidden}
.awm-forecast>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:66px;padding:14px 18px;cursor:pointer;color:var(--awm-ink);font-weight:800}
.awm-forecast>summary::-webkit-details-marker{display:none}
.awm-forecast>summary:before{content:"▦";display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:13px;color:var(--awm-teal);background:var(--awm-teal-soft);font-size:19px}
.awm-forecast>summary:after{content:"⌄";margin-left:auto;color:var(--awm-blue);font-size:22px;transition:transform .24s ease}
.awm-forecast[open]>summary:after{transform:rotate(180deg)}
.awm-forecast-content{border-top:1px solid var(--awm-line);padding:16px 18px 20px;color:var(--awm-ink)}
.awm-forecast-sub{font-size:13px;color:var(--awm-muted);font-weight:500;display:block}
.awm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.awm-metric{padding:12px 9px;border:1px solid var(--awm-line);background:var(--awm-blue-soft);border-radius:14px;text-align:center;min-width:0}
.awm-metric strong{display:block;font-size:clamp(19px,2.8vw,28px);font-variant-numeric:tabular-nums;color:var(--awm-ink)}
.awm-metric small{font-size:12px;color:var(--awm-muted)}
.awm-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:15px}
.awm-day{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 3px;border-radius:11px;border:1px solid var(--awm-line);gap:3px;min-width:0}
.awm-day small{font-size:10px;color:var(--awm-muted)}
.awm-day strong{color:var(--awm-blue);font-variant-numeric:tabular-nums}
.awm-day[data-intensity="high"]{background:var(--awm-orange-soft)}
.awm-day[data-intensity="mid"]{background:var(--awm-teal-soft)}
.awm-words{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.awm-word{padding:11px 13px;border:1px solid var(--awm-line);border-radius:12px;display:grid;gap:2px;min-width:0}
.awm-word strong{font-size:21px;color:var(--awm-ink)}
.awm-word span,.awm-word small{font-size:12px;color:var(--awm-muted);overflow-wrap:anywhere}
.awm-note{font-size:12px;color:var(--awm-muted);line-height:1.6}
/* Game setup, feedback and mobile-app tactile states. */
body:has(.game-main){background:var(--awm-canvas)}
.game-main .setup-card,.game-main .play-card,.game-main .summary-card{border:1px solid var(--awm-line);background:var(--awm-card);border-radius:24px;box-shadow:var(--awm-shadow)}
.game-main .setup-card{gap:13px;padding:clamp(17px,3vw,26px)}
.game-main .setup-card label{font-size:13px;font-weight:750}
.game-main .setup-card select{background:var(--awm-card);border:1px solid var(--awm-line);border-radius:13px;min-height:51px;color:var(--awm-ink)}
.game-main #start-btn{background:linear-gradient(118deg,#2455D6,#4949C4);box-shadow:0 5px 0 #183D90;border:1px solid #2455D6;min-height:56px;color:#fff;font-weight:800}
.game-main #start-btn:hover{filter:brightness(1.08)}
.game-main .game-top .eyebrow{color:var(--awm-blue)}
.game-main .answer-btn{border-radius:16px;transition:transform .16s var(--awm-ease),border-color .18s ease,background .18s ease,box-shadow .18s ease}
.game-main .answer-btn:not(:disabled):is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 7px 20px rgba(27,78,152,.12);border-color:var(--awm-blue)}
.game-main .answer-btn.right,.game-main .match-btn.matched{background:var(--awm-green-soft)!important;color:var(--awm-green)!important;border-color:var(--awm-green)!important}
.game-main .answer-btn.wrong,.game-main .match-btn.pair-error{background:var(--awm-red-soft)!important;color:var(--awm-red)!important;border-color:var(--awm-red)!important}
.game-main .progress-track{background:var(--awm-blue-soft);height:9px}
.game-main #progress-fill{background:linear-gradient(90deg,#2455D6,#16A99A);transition:width .38s var(--awm-ease)}
.game-main :is(.aw92-status,.aw-srs-learning-note){border-radius:12px}
.game-main .aw-srs-learning-note[data-tone="positive"]{background:var(--awm-green-soft);color:var(--awm-green);border-color:var(--awm-green)}
.game-main .aw-srs-learning-note[data-tone="guidance"]{background:var(--awm-orange-soft);color:var(--awm-orange);border-color:var(--awm-orange)}
#aw-result-layer:not([hidden]){animation:awm-backdrop .24s ease both}
#aw-result-layer:not([hidden]) .aw-result-panel{animation:awm-reveal .36s var(--awm-ease) both;transform-origin:50% 80%}
#aw-result-layer #feedback[data-state="right"] .aw-result-state-icon{background:var(--awm-green-soft)!important;color:var(--awm-green)!important}
#aw-result-layer #feedback[data-state="wrong"] .aw-result-state-icon{background:var(--awm-orange-soft)!important;color:var(--awm-orange)!important}
#aw-result-layer #next-btn{transition:transform .14s,filter .16s;box-shadow:0 4px 0 #173D93!important}
#aw-result-layer #next-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #173D93!important}
/* Result: reward, key facts first; details are available but not forced on screen. */
body.is-summary .summary-card{position:relative;max-width:760px;text-align:center;overflow:hidden;padding:clamp(20px,4vw,36px)}
body.is-summary .summary-card.awm-arrive{animation:awm-result .54s var(--awm-ease) both}
body.is-summary .summary-card .summary-kicker{color:var(--awm-purple);font-weight:850;letter-spacing:.16em}
body.is-summary .summary-card>h2{font-size:clamp(25px,4vw,36px);color:var(--awm-ink);margin:4px 0}
body.is-summary #final-score{font-size:clamp(52px,9vw,83px);font-weight:900;line-height:1.15;letter-spacing:-.055em;color:#2455D6;font-variant-numeric:tabular-nums;margin:10px auto 8px}
html[data-theme="dark"] body.is-summary #final-score{color:#9EBFFF}
body.is-summary #summary-message{color:var(--awm-muted);font-weight:550}
body.is-summary #save-status{color:var(--awm-muted)}
body.is-summary #save-status:has(.aw92-xp-confirmed){color:var(--awm-green)}
.awm-result-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:19px 0;text-align:center}
.awm-result-tile{padding:15px 8px;border:1px solid var(--awm-line);border-radius:16px;background:var(--awm-card);min-width:0}
.awm-result-tile:nth-child(1){background:var(--awm-green-soft)}
.awm-result-tile:nth-child(2){background:var(--awm-orange-soft)}
.awm-result-tile:nth-child(3){background:var(--awm-purple-soft)}
.awm-result-tile strong{display:block;font-size:clamp(23px,4vw,34px);line-height:1.3;font-variant-numeric:tabular-nums;color:var(--awm-ink)}
.awm-result-tile small{display:block;font-size:12px;line-height:1.5;color:var(--awm-muted)}
body.is-summary .awm-result-overview .awm-result-tile{animation:awm-stagger .35s var(--awm-ease) both}
body.is-summary .awm-result-overview .awm-result-tile:nth-child(2){animation-delay:.12s}
body.is-summary .awm-result-overview .awm-result-tile:nth-child(3){animation-delay:.2s}
.awm-detail-fold{margin:15px 0 20px;text-align:left;border:1px solid var(--awm-line);border-radius:16px;background:var(--awm-card)}
.awm-detail-fold>summary{list-style:none;display:flex;gap:8px;justify-content:space-between;align-items:center;padding:13px 16px;cursor:pointer;font-weight:750;color:var(--awm-ink)}
.awm-detail-fold>summary::-webkit-details-marker{display:none}
.awm-detail-fold>summary:after{content:"⌄";color:var(--awm-blue);font-size:23px;transition:transform .2s}
.awm-detail-fold[open]>summary:after{transform:rotate(180deg)}
.awm-detail-content{padding:0 13px 14px;border-top:1px solid var(--awm-line)}
.awm-detail-content .aw-srs-session-story{margin:12px 0;background:var(--awm-blue-soft);color:var(--awm-ink);border-color:var(--awm-line)}
.awm-detail-content #wrong-words{margin-top:10px}
body.is-summary #aw-memory-next-action{background:var(--awm-teal-soft);border-left-color:var(--awm-teal);color:var(--awm-ink);text-align:left;margin-top:16px}
body.is-summary .summary-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:16px auto 0}
body.is-summary .summary-actions>*{min-height:46px}
body.is-summary #retry-wrong:not([hidden]){background:#2455D6;color:#fff;border-color:#2455D6}
body.is-summary #again-btn{background:var(--awm-card);color:var(--awm-ink);border-color:var(--awm-line)}
/* Advanced data is available, not forced into the middle of a game. */
.game-main:not(:has(#summary:not([hidden]))) .v8-memory-panel{margin-top:30px}
.game-main .v8-memory-panel #aw-memory-forecast{max-height:300px;overflow:auto}
.game-main .v8-memory-panel #aw-memory-forecast .aw-memory-forecast-list{max-height:150px;overflow:auto}
/* Install prompt stays out of the learning flow: accessible from Home/Account. */
body:has(.game-main) #aw-pwa-install-button,
body:has(main[data-page="practice"]) #aw-pwa-install-button,
body:has(main[data-page="review"]) #aw-pwa-install-button,
body:has(main[data-page="progress"]) #aw-pwa-install-button{display:none!important}
/* Avoid flashy content. Deliberate fades and tiny translations only. */
@keyframes awm-backdrop{from{opacity:0}to{opacity:1}}
@keyframes awm-reveal{from{opacity:0;transform:translateY(16px) scale(.976)}to{opacity:1;transform:none}}
@keyframes awm-result{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes awm-stagger{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:640px){
 .awm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .awm-words{grid-template-columns:1fr}
 .awm-day{padding:8px 1px}.awm-week{gap:3px}
 body.is-summary .summary-card{margin:14px 0 36px;padding:20px 14px 22px}
 body.is-summary #final-score{font-size:60px}
 body.is-summary .summary-actions{flex-direction:column}
 body.is-summary .summary-actions>*{width:100%;justify-content:center}
 .awm-result-overview{gap:7px}
 .awm-result-tile{padding:13px 3px}.awm-result-tile small{font-size:11px}
 .awm-detail-content .aw-srs-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Navigation, progress and lesson tools use the same hierarchy. */
#main[data-page="progress"] .aw92-progress-explainer>.grid-3 .stat:nth-child(1){border-top:5px solid #7651C3;background:var(--awm-card)}
#main[data-page="progress"] .aw92-progress-explainer>.grid-3 .stat:nth-child(2){border-top:5px solid #E6A04B;background:var(--awm-card)}
#main[data-page="progress"] .aw92-progress-explainer>.grid-3 .stat:nth-child(3){border-top:5px solid #16A47F;background:var(--awm-card)}
#main[data-page="progress"] .stat .stat-value{color:var(--awm-ink);font-variant-numeric:tabular-nums}
#main[data-page="learn"] .lesson-card .lesson-count{color:var(--awm-purple)}
#main[data-page="tools"] .tool-card:nth-child(3n+2) .icon-tile{background:var(--awm-teal-soft);color:var(--awm-teal)}
#main[data-page="tools"] .tool-card:nth-child(3n+3) .icon-tile{background:var(--awm-purple-soft);color:var(--awm-purple)}
#main[data-page="words"] :is(.aw96-header,.aw96-practice){border-radius:var(--awm-radius)}
#main[data-page="review"] .v8-panel .v8-distribution-track>i{transition:width .45s var(--awm-ease)}
.v6-mobile-nav a:is(:active,:focus-visible){background:var(--awm-blue-soft);color:var(--awm-navy)}
.v6-mobile-nav a[aria-current="page"]{color:var(--awm-blue)}
body:has(.game-main) .v8-memory-panel .awm-detail-fold{margin-top:10px}
body:has(.game-main) .v8-memory-panel .awm-detail-content{max-height:390px;overflow:auto}
@media(max-width:640px){
 #main[data-page="progress"] .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 #main[data-page="progress"] .aw92-progress-explainer>.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #main[data-page="progress"] .aw92-progress-explainer>.grid-3 .stat{padding:11px 7px}
 #main[data-page="progress"] .aw92-progress-explainer>.grid-3 .stat .stat-value{font-size:clamp(22px,6vw,29px)}
}
/* Loading feedback and question changes: a small mobile-app rhythm, no jump-scroll. */
.game-main #load-status.awm-loading{display:flex;align-items:center;gap:10px;color:var(--awm-muted)}
.game-main #load-status.awm-loading::before{content:"";display:inline-block;width:22px;height:8px;flex-shrink:0;border-radius:10px;background:linear-gradient(90deg,var(--awm-blue-soft),var(--awm-blue),var(--awm-blue-soft));background-size:210% 100%;animation:awm-loading 1.35s ease-in-out infinite}
.game-main #question-prompt.awm-question-enter{animation:awm-question .26s var(--awm-ease) both}
@keyframes awm-loading{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes awm-question{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Progress insights: counts from retained V8 events, never interpreted as mastery. */
#main[data-page="progress"] .awm-activity{padding:clamp(17px,3vw,25px);margin:18px 0;border:1px solid var(--awm-line);border-radius:var(--awm-radius);background:var(--awm-card);box-shadow:var(--awm-shadow)}
.awm-activity h2{font-size:clamp(19px,2.2vw,25px);margin:0 0 12px;color:var(--awm-ink)}
.awm-activity-today{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:15px;background:var(--awm-purple-soft);color:var(--awm-ink)}
.awm-activity-today strong{font-size:clamp(30px,4vw,42px);line-height:1.2;font-variant-numeric:tabular-nums;color:var(--awm-purple)}
.awm-activity-today span{font-size:14px;font-weight:700}
.awm-activity-list{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.awm-activity-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--awm-line);padding:9px 2px;font-size:13px;color:var(--awm-muted)}
.awm-activity-list li strong{font-size:13px;color:var(--awm-ink);text-align:right}
@media(max-width:500px){.awm-activity-list li{flex-wrap:wrap;gap:3px}.awm-activity-list li strong{width:100%;text-align:left}}