@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

/* ═══ tokens ═══ */
:root{
  --red:#C21C35; --red-deep:#8F1022;
  --blue:#1D4E89; --blue-deep:#12365F; --enamel-hi:#2A66AE;
  --sky:#51ADDA;
  --ink:#14263B; --mut:#5B7391;
  --ok:#2E8540; --ok-deep:#1F5E2C;
  --line:rgba(29,78,137,.14);
  --glass:rgba(255,255,255,.72);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:rgba(81,173,218,.35)}
:focus-visible{outline:3px solid #0B4F87;outline-offset:2px;border-radius:10px}

body{
  min-height:100vh;margin:0;color:var(--ink);
  font-family:'Inter',sans-serif;font-size:15px;line-height:1.5;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(81,173,218,.16), transparent 60%),
    radial-gradient(720px 460px at -12% 26%, rgba(237,41,57,.08), transparent 55%),
    linear-gradient(180deg,#F7FAFE 0%,#EEF4FB 100%);
}
body::before{ /* faint dot grid, fading toward the bottom */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(rgba(29,78,137,.10) 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask-image:linear-gradient(#000 30%,transparent 95%);
          mask-image:linear-gradient(#000 30%,transparent 95%);
}
.wrap{max-width:680px;margin:0 auto;padding:18px 16px 48px}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.app-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}
.api-key-status{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:8px 11px;border:1px solid rgba(91,115,145,.22);border-radius:999px;background:rgba(255,255,255,.78);color:var(--mut);font-size:10.5px;font-weight:850;letter-spacing:.045em;white-space:nowrap;box-shadow:0 10px 24px -18px rgba(18,54,95,.7)}
.api-key-light{display:block;width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:#8a9bad;box-shadow:0 0 0 4px rgba(91,115,145,.12)}
.api-key-status.is-ready,.api-key-status.is-working{border-color:rgba(8,122,71,.24);background:rgba(231,249,239,.94);color:#08683e}
.api-key-status.is-ready .api-key-light,.api-key-status.is-working .api-key-light{background:#08a05c;box-shadow:0 0 0 4px rgba(8,160,92,.14),0 0 12px rgba(8,160,92,.55)}
.api-key-status.is-missing,.api-key-status.is-rejected{border-color:rgba(237,41,57,.25);background:rgba(255,239,241,.96);color:#b51f2c}
.api-key-status.is-missing .api-key-light,.api-key-status.is-rejected .api-key-light{background:#ed2939;box-shadow:0 0 0 4px rgba(237,41,57,.13),0 0 12px rgba(237,41,57,.45)}
.app-subtitle{font-size:13px;color:var(--mut);margin-top:3px}
.welcome-panel{display:flex;align-items:center;gap:18px;padding:20px 22px;margin-bottom:18px;border-radius:22px;background:linear-gradient(135deg,rgba(29,78,137,.96),rgba(42,102,174,.92));color:#fff;box-shadow:0 18px 38px -20px rgba(18,54,95,.75)}
.welcome-panel h2{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;line-height:1.15;margin:0 0 5px}.welcome-panel p{margin:0;color:rgba(255,255,255,.82);font-size:13.5px}
.welcome-icon{flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--blue);font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;transform:rotate(-5deg)}
.progress-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;margin-bottom:20px;border:1px solid rgba(81,173,218,.22);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 12px 30px -22px rgba(29,78,137,.5)}
.progress-card .label{margin-bottom:5px}.progress-copy{min-width:0}.progress-stats{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}.progress-stats strong{font-family:'Bricolage Grotesque',sans-serif;color:var(--blue);font-size:19px}.progress-stats span{color:var(--mut);font-size:12.5px;font-weight:650}.review-button{flex:0 0 auto;padding:10px 15px;font-size:13px}
.storage-loading{overflow:hidden}.storage-loading .wrap{visibility:hidden}.storage-boot{position:fixed;z-index:12000;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(155deg,#f5f9fd,#eaf2f9);color:var(--blue);font-size:15px}.storage-boot .spinner{margin:0}.storage-status-row{display:flex;align-items:center;gap:10px;margin:-8px 0 18px}.storage-status{flex:1;padding:11px 13px;border:1px solid rgba(81,173,218,.25);border-radius:13px;background:rgba(81,173,218,.1);color:var(--blue);font-size:12.5px;font-weight:700}.storage-status.is-ready{border-color:rgba(46,133,64,.24);background:rgba(46,133,64,.08);color:var(--ok)}.storage-status.is-warning{border-color:rgba(226,169,59,.3);background:rgba(226,169,59,.1);color:#8a5a12}.storage-status.is-error{border-color:rgba(237,41,57,.28);background:rgba(237,41,57,.08);color:var(--red)}.storage-health{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px;padding:12px 13px;border:1px solid rgba(81,173,218,.22);border-radius:14px;background:rgba(81,173,218,.07)}.storage-health>div{display:flex;min-width:0;flex-direction:column;gap:2px}.storage-health strong{color:var(--blue);font-size:13px}.storage-health strong.is-warning{color:#8a5a12}.storage-health span{color:var(--mut);font-size:11.5px}.storage-health .btn{flex:0 0 auto;padding:8px 12px;font-size:12px}.storage-action-status{min-height:19px;margin:-5px 0 9px;color:var(--mut);font-size:12px;font-weight:650}.storage-action-status.is-ready{color:var(--ok)}.storage-action-status.is-error{color:var(--red)}.storage-action-status.is-working{color:var(--blue)}
.practice-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:20px}.practice-tool-card{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:14px;margin-bottom:0;padding:20px}.practice-tool-card .label{margin-bottom:5px}.practice-tool-card .btn{width:100%}
.review-complete{text-align:center;padding:36px 24px}.review-complete h2{margin:12px 0 5px;font-size:25px}.review-complete p{max-width:430px;margin:0 auto 22px;color:var(--mut)}.review-complete-icon{display:grid;place-items:center;width:58px;height:58px;margin:auto;border-radius:50%;background:rgba(46,133,64,.11);color:var(--ok);font-size:28px;font-weight:800}
.review-saved{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:5px 9px;border-radius:999px;background:rgba(81,173,218,.12);color:var(--blue);font-size:12px;font-weight:700}
.training-card{border-color:rgba(81,173,218,.25)}
.training-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:8px}.training-heading .label{margin-bottom:4px}.training-title{font-size:19px;font-weight:800;color:var(--blue-deep)}
.training-count{flex:0 0 auto;max-width:210px;padding:6px 10px;border-radius:999px;background:rgba(81,173,218,.11);color:var(--blue);font-size:11.5px;font-weight:750;text-align:center}
.training-intro{margin:0 0 12px}.training-card textarea{display:block;width:100%;min-height:145px;resize:vertical;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;background:rgba(255,255,255,.88);color:var(--ink);font:14px/1.5 'Inter',sans-serif;transition:border-color .18s,box-shadow .18s}.training-card textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(81,173,218,.2)}
.training-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}.training-actions .btn{padding:10px 15px;font-size:13px}.training-status{min-height:20px;margin-top:9px;color:var(--mut);font-size:12.5px;font-weight:650}.training-status.is-ready{color:var(--ok)}.training-status.is-working{color:var(--blue)}.training-status.is-waiting{color:#8A5A12}.training-status.is-error{color:var(--red)}.training-note{margin-top:7px;padding-top:9px;border-top:1px solid var(--line)}
.training-audio{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.training-audio-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0}
.training-audio-row label{min-width:96px;font-size:13px;font-weight:650;color:var(--blue)}
.training-audio-row input[type=file]{flex:1;min-width:200px;font-size:13px;color:var(--mut)}
.training-ai-msg{margin:4px 0 8px;font-size:12.5px;font-weight:650}
.training-focus{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.training-focus .label{margin-bottom:4px}.training-focus p{margin:0 0 9px}.training-focus textarea{min-height:78px;margin-bottom:9px}.training-focus>.btn{padding:9px 14px;font-size:13px}.training-terms{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.training-term{display:inline-flex;align-items:center;gap:7px;padding:6px 7px 6px 10px;border:1px solid rgba(29,78,137,.17);border-radius:999px;background:#F2F7FC;color:var(--blue-deep);font-size:12.5px;font-weight:700}.training-term.is-ready{border-color:rgba(46,133,64,.25);background:rgba(46,133,64,.08);color:var(--ok-deep)}.training-term button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(29,78,137,.1);color:inherit;font:700 16px/1 'Inter',sans-serif;cursor:pointer}.training-term button:hover{background:rgba(237,41,57,.12);color:var(--red)}
.setup-step{display:flex;align-items:center;gap:10px;margin:24px 2px 12px}.setup-step>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--red);color:#fff;font-weight:800}.setup-step div{display:flex;flex-direction:column;line-height:1.2}.setup-step small{color:var(--mut);margin-top:2px}
.advanced-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:3px 0 18px;padding:17px 19px;border:1.5px solid var(--line);border-radius:17px;background:rgba(255,255,255,.7);color:var(--blue);font:inherit;text-align:left;cursor:pointer}.advanced-toggle:hover{background:#fff;border-color:rgba(29,78,137,.35)}
.advanced-toggle span:first-child{display:flex;flex-direction:column}.advanced-toggle small{color:var(--mut);font-weight:500;margin-top:2px}.toggle-icon{font-size:24px;transition:transform .2s}.advanced-toggle.is-open .toggle-icon{transform:rotate(180deg)}
.start-bar{position:sticky;z-index:20;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px 13px 18px;border:1px solid rgba(255,255,255,.8);border-radius:20px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);box-shadow:0 18px 44px -18px rgba(18,54,95,.55)}
.start-summary{display:flex;flex-direction:column;font-size:13px}.start-summary span{color:var(--mut);font-size:11.5px}.start-button{white-space:nowrap}.start-button span{opacity:.82;margin-left:5px}
#play{padding-bottom:96px}.play-primary-bar{position:fixed;z-index:80;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;width:min(640px,calc(100vw - 28px));padding:8px;border:1px solid rgba(255,255,255,.82);border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 44px -18px rgba(18,54,95,.62)}.play-secondary-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.zone-help{margin:-2px 0 8px;color:var(--mut);font-size:12.5px}.word-bank{border-style:solid;border-color:#d7e3ee;background:rgba(255,255,255,.4)}
.prefetch-status{width:max-content;max-width:100%;margin:16px 0 -8px;padding:7px 11px;border-radius:999px;background:rgba(81,173,218,.11);color:var(--mut);font-size:12px;font-weight:650}
.prefetch-status.is-ready{background:rgba(46,133,64,.1);color:var(--ok)}
.display{font-family:'Bricolage Grotesque',sans-serif}
a{color:var(--blue);font-weight:600;text-decoration-color:rgba(81,173,218,.65);text-underline-offset:2px}
a:hover{text-decoration-color:var(--blue)}

/* ═══ frosted cards ═══ */
.card{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:18px;margin-bottom:12px;
  box-shadow:0 8px 24px -14px rgba(29,78,137,.25);
  animation:fdi .4s ease both;
}
.label{
  font-weight:700;margin-bottom:12px;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--mut);
}

/* ═══ THE SIGNATURE — enamel street plaques ═══ */
.plaque{
  position:relative;overflow:hidden;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-width:112px;
  background:linear-gradient(165deg,var(--enamel-hi) 0%,var(--blue) 45%,var(--blue-deep) 100%);
  color:#fff;border-radius:14px;padding:15px 16px 10px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;letter-spacing:.015em;text-align:center;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    inset 0 0 0 4.5px var(--blue-deep),
    0 2px 3px rgba(20,38,59,.25),
    0 10px 22px -10px rgba(18,54,95,.6);
  cursor:grab;user-select:none;
  transition:transform .16s cubic-bezier(.2,.9,.35,1.3),box-shadow .16s;
}
.plaque::after{ /* enamel gloss */
  content:'';position:absolute;left:3px;right:3px;top:3px;height:46%;
  border-radius:11px 11px 40% 40%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,.02));
}
.plaque:hover{transform:translateY(-3px) scale(1.02);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 4.5px var(--blue-deep),
    0 4px 6px rgba(20,38,59,.22),0 18px 30px -12px rgba(18,54,95,.65)}
.plaque:active{transform:scale(.97);cursor:grabbing}
.plaque.small{min-width:100px;padding:13px 14px 9px;font-size:21px;border-radius:13px}
.plaque.solvedgreen{
  background:linear-gradient(165deg,#3B9E50 0%,var(--ok) 45%,var(--ok-deep) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 4.5px var(--ok-deep),
    0 2px 3px rgba(20,38,59,.2),0 10px 22px -10px rgba(31,94,44,.55);
  cursor:pointer;
}
.plaque-word{
  position:relative;z-index:2;display:block;max-width:100%;line-height:1.08;
  text-shadow:0 1px 1px rgba(0,0,0,.18);overflow-wrap:anywhere;
  padding:1px 2px 2px;
}
.plaque-word-button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}.plaque-word-button:focus-visible{outline:2px solid rgba(255,255,255,.95);outline-offset:3px;border-radius:7px}.plaque:focus-within{transform:translateY(-3px) scale(1.02)}

/* ═══ controls inside each word plaque ═══ */
.word-actions{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:4px;
  width:auto;margin:0;flex:0 0 auto;opacity:.68;
  transition:opacity .14s ease;
}
.word-control-button{
  appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;
  width:32px;height:32px;padding:0;border:0;border-radius:9px;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.92);font:700 11px/1 'Inter',sans-serif;
  box-shadow:none;
  cursor:pointer;touch-action:manipulation;transition:transform .14s ease,background .14s ease,color .14s ease;
}
.plaque:hover .word-actions,.word-actions:focus-within{opacity:1}
.word-control-button:hover{transform:translateY(-1px) scale(1.06);background:rgba(255,255,255,.22)}
.word-control-button:active{transform:scale(.92)}
.word-control-button:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:1px}
.word-info-button{font-size:11px}
.word-info-button.is-tooltip-open{background:rgba(255,255,255,.94);color:var(--blue);box-shadow:none}
.plaque.small .word-actions{gap:3px}
.plaque.small .word-control-button{width:30px;height:30px;font-size:10px}
.plaque.small .word-info-button{font-size:9px}

/* ═══ click-to-open structured glossary popup ═══ */
.has-word-tooltip{position:relative}
.word-tooltip{
  --tooltip-arrow-left:50%;
  position:fixed;z-index:10000;
  width:min(420px,calc(100vw - 24px));
  max-height:min(620px,calc(100dvh - 24px));overflow:auto;
  padding:17px;border:1px solid rgba(29,78,137,.16);border-radius:19px;
  background:rgba(255,255,255,.98);color:var(--ink);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 28px 70px -28px rgba(18,54,95,.55),0 10px 26px -16px rgba(20,38,59,.28);
  opacity:0;transform:translateY(7px) scale(.975);transform-origin:center;
  transition:opacity .14s ease,transform .17s cubic-bezier(.2,.9,.35,1.2);
  pointer-events:auto;
}
.word-tooltip[hidden]{display:none}
.word-tooltip.is-visible{opacity:1;transform:translateY(0) scale(1)}
.word-tooltip::before{
  content:'';position:absolute;left:calc(var(--tooltip-arrow-left) - 8px);width:16px;height:16px;
  background:rgba(255,255,255,.98);transform:rotate(45deg);border:1px solid rgba(29,78,137,.14);
}
.word-tooltip[data-placement="top"]::before{bottom:-9px;border-left:0;border-top:0}
.word-tooltip[data-placement="bottom"]::before{top:-9px;border-right:0;border-bottom:0}
.word-tooltip__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.word-tooltip__heading{min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.word-tooltip__word{font-family:'Bricolage Grotesque',sans-serif;color:var(--blue);font-size:23px;line-height:1.08;overflow-wrap:anywhere}
.word-tooltip__badge{flex:0 0 auto;padding:4px 9px;border-radius:999px;background:rgba(81,173,218,.14);color:var(--blue);font-size:10.5px;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
.word-tooltip__close{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:11px;background:#F3F7FC;color:var(--blue);font:800 23px/1 'Inter',sans-serif;cursor:pointer;transition:transform .14s ease,background .14s ease}
.word-tooltip__close:hover{background:#E7F0FA;transform:scale(1.05)}
.word-tooltip__close:active{transform:scale(.94)}
.word-tooltip__field{min-width:0}
.word-tooltip__field-label,.word-tooltip__section-title{margin-bottom:4px;color:var(--mut);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.word-tooltip__field-value{font-size:13.5px;font-weight:650;line-height:1.42;overflow-wrap:anywhere}
.word-tooltip__translation{padding:11px 12px;margin-bottom:12px;border-radius:12px;background:linear-gradient(150deg,rgba(81,173,218,.13),rgba(29,78,137,.06));border:1px solid rgba(81,173,218,.18)}
.word-tooltip__translation .word-tooltip__field-value{color:var(--blue-deep);font-size:16px;font-weight:750}
.word-tooltip__verb-summary,.word-tooltip__noun-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.word-tooltip__verb-summary .word-tooltip__field,.word-tooltip__noun-summary .word-tooltip__field{padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:#F7FAFE}
.word-tooltip__section{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.word-tooltip__conjugation{display:grid;grid-template-columns:minmax(105px,auto) minmax(0,1fr);gap:5px 15px;padding:10px 11px;border-radius:12px;background:rgba(247,250,254,.9);border:1px solid var(--line)}
.word-tooltip__pronoun{color:var(--mut);font-size:13px}
.word-tooltip__form{color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.word-tooltip__contraction,.word-tooltip__note,.word-tooltip__pronunciation{margin-top:11px;padding:10px 11px;border-radius:11px}
.word-tooltip__contraction{background:rgba(226,169,59,.10);border:1px solid rgba(226,169,59,.22)}
.word-tooltip__note{background:rgba(237,41,57,.065);border:1px solid rgba(237,41,57,.13)}
.word-tooltip__pronunciation{background:rgba(46,133,64,.07);border:1px solid rgba(46,133,64,.14)}
@media (max-width:560px){
  .plaque{min-width:96px;padding:13px 13px 9px;font-size:22px;gap:5px}
  .plaque.small{min-width:88px;font-size:19px;padding:11px 12px 8px}
  .word-actions{gap:3px}
  .word-control-button{width:34px;height:34px;font-size:11px}
  .plaque.small .word-control-button{width:32px;height:32px;font-size:10px}
}
@media(max-width:480px){
  .word-tooltip{padding:15px;border-radius:16px}
  .word-tooltip__verb-summary,.word-tooltip__noun-summary{grid-template-columns:1fr}
  .word-tooltip__conjugation{grid-template-columns:minmax(92px,auto) minmax(0,1fr)}
}

/* ═══ drop zones ═══ */
.dropzone{
  min-height:78px;border-radius:18px;
  border:2px dashed rgba(29,78,137,.3);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:13px;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.dropzone.correct{border:2px solid var(--ok);background:linear-gradient(160deg,#EFFAF1,#E3F4E7);
  box-shadow:0 0 0 5px rgba(46,133,64,.12),0 14px 30px -14px rgba(46,133,64,.4)}
.dropzone.wrongz{border:2px solid var(--red);background:linear-gradient(160deg,#FEF0F1,#FBE4E7);
  box-shadow:0 0 0 5px rgba(237,41,57,.12)}
.shake{animation:shk .45s ease}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ═══ buttons ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;border:none;border-radius:999px;
  padding:10px 20px;font-size:15px;letter-spacing:.01em;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.35,1.3),box-shadow .16s,filter .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.3)}
.btn-red{color:#fff;background:linear-gradient(140deg,#C9233A,#B9162E);
  box-shadow:0 10px 22px -8px rgba(237,41,57,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-red:hover{box-shadow:0 16px 30px -10px rgba(237,41,57,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-blue{color:#fff;background:linear-gradient(140deg,#2A66AE,#173F6E);
  box-shadow:0 10px 22px -8px rgba(29,78,137,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-blue:hover{box-shadow:0 16px 30px -10px rgba(29,78,137,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{color:var(--blue);background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1.5px solid var(--line);box-shadow:0 2px 8px -4px rgba(29,78,137,.2)}
.btn-ghost:hover{background:#fff;border-color:rgba(29,78,137,.4)}
.btn-amber{color:#8A5A12;background:linear-gradient(140deg,#FFEBC2,#FCDA8C);
  border:1.5px solid rgba(226,169,59,.4);
  box-shadow:0 10px 22px -10px rgba(226,169,59,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-amber:hover{background:linear-gradient(140deg,#FFF1D2,#FDE3A2);
  box-shadow:0 16px 28px -10px rgba(226,169,59,.6),inset 0 1px 0 rgba(255,255,255,.5)}

/* ═══ chips — selected ones become mini enamel plaques ═══ */
.chip{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:1.5px solid var(--line);background:rgba(255,255,255,.85);
  border-radius:999px;padding:9px 16px;cursor:pointer;text-align:center;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink);
  transition:border-color .18s,background .18s,box-shadow .18s,transform .18s,color .18s;
}
.chip:hover{border-color:rgba(29,78,137,.45)}
.chip:active{transform:scale(.96)}
.chip.on{
  color:#fff;border-color:transparent;
  background:linear-gradient(160deg,var(--enamel-hi),var(--blue-deep));
  box-shadow:0 6px 14px -6px rgba(18,54,95,.55);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ═══ motion & spinner ═══ */
.fadein{animation:fdi .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes fdi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spinner{
  width:40px;height:40px;border-radius:50%;margin:0 auto;border:none;
  background:conic-gradient(var(--red),var(--sky),var(--blue),var(--red));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));
  animation:spn .8s linear infinite;
}
.spinner.sm{width:20px;height:20px;margin:0;display:inline-block;vertical-align:middle;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
@keyframes spn{to{transform:rotate(360deg)}}

/* ═══ teacher & pronunciation panels ═══ */
.teacher{
  margin-top:14px;border-radius:18px;padding:17px 19px;
  background:linear-gradient(160deg,rgba(255,251,238,.92),rgba(255,243,213,.85));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(224,169,59,.4);border-left:5px solid #E2A93B;
  box-shadow:0 12px 28px -16px rgba(160,116,20,.4);
}
.asrbox{
  margin-top:14px;border-radius:18px;padding:17px 19px;
  background:linear-gradient(160deg,rgba(238,245,252,.9),rgba(226,238,250,.85));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(81,173,218,.4);border-left:5px solid var(--sky);
  box-shadow:0 12px 28px -16px rgba(29,78,137,.35);
}
.exline{background:rgba(255,255,255,.9);border-radius:12px;padding:10px 14px;font-size:14px;
  border-left:4px solid var(--blue);margin-top:9px;box-shadow:0 2px 6px -3px rgba(20,38,59,.15)}
.wordchip{padding:5px 12px;border-radius:999px;font-size:13.5px;font-weight:600;display:inline-block;margin:3px 4px 0 0}
.wc-ok{background:#EAF6EC;color:var(--ok);border:1.5px solid rgba(46,133,64,.55)}
.wc-no{background:#FDEDEE;color:var(--red);border:1.5px solid rgba(237,41,57,.5)}

/* ═══ teacher: sentence pattern breakdown ═══ */
.pattern-row{margin-top:13px;padding-top:12px;border-top:1px dashed rgba(226,169,59,.4)}
.pattern-label{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a6d1f;margin-bottom:7px}
.pattern-chips{display:flex;flex-wrap:wrap;gap:7px}
.pattern-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px 7px;border-radius:11px;background:rgba(255,255,255,.75);border:1px solid rgba(226,169,59,.35)}
.pattern-role{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6d1f}
.pattern-word{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:#4a3d14}

/* ═══ inputs & misc ═══ */
input[type=password],input[type=text]{
  padding:12px 14px;border-radius:13px;border:1.5px solid var(--line);
  background:rgba(255,255,255,.85);font-family:'Inter',sans-serif;font-size:14px;width:100%;
  transition:border-color .18s,box-shadow .18s;
}
input[type=password]:focus,input[type=text]:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(81,173,218,.22)}
.muted{font-size:12.5px;color:var(--mut);line-height:1.55}
.hidden{display:none !important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:560px){.wrap{padding:20px 14px calc(44px + env(safe-area-inset-bottom))}.app-header{margin-bottom:18px}.welcome-panel{align-items:flex-start;padding:18px}.welcome-icon{width:54px;height:54px}.progress-card{align-items:stretch;flex-direction:column;gap:12px}.progress-stats{align-items:flex-start;flex-direction:column;gap:0}.review-button{width:100%}.storage-status-row,.storage-health{align-items:stretch;flex-direction:column}.storage-status-row>.btn,.storage-health .btn{width:100%}.practice-tools-grid{grid-template-columns:1fr}.training-heading{flex-direction:column;gap:8px}.training-count{max-width:none}.training-actions{flex-direction:column}.training-actions .btn{width:100%}.training-card textarea,input[type=password],input[type=text]{font-size:16px}.training-term button{width:32px;height:32px}.card{padding:19px;border-radius:18px}.start-summary{display:none}.start-button{width:100%}.start-bar{padding:10px;bottom:calc(8px + env(safe-area-inset-bottom))}.play-primary-bar{bottom:calc(8px + env(safe-area-inset-bottom));width:calc(100vw - 20px)}.play-primary-bar .btn{min-width:0!important}.chip{min-height:44px}.btn{min-height:46px}}


/* v17 learning-flow additions */
.key-row{display:flex;gap:8px;align-items:stretch}.key-row input{flex:1;min-width:0}.key-row .btn{flex:0 0 auto}
.typing-zone{margin:14px 0 4px}.typing-input{width:100%;min-height:58px;padding:15px 16px;border:2px solid rgba(29,78,137,.2);border-radius:15px;background:#fff;color:var(--ink);font:600 18px/1.45 'Inter',sans-serif;resize:vertical}.typing-input:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(81,173,218,.14);outline:0}.sentence-skeleton{display:flex;flex-wrap:wrap;gap:7px 5px;padding:13px 15px;margin-bottom:10px;border-radius:13px;background:rgba(81,173,218,.08);color:var(--blue);font-size:16px;line-height:1.8}.sentence-skeleton .blank{display:inline-block;min-width:48px;border-bottom:2px solid rgba(29,78,137,.45);text-align:center;color:transparent;user-select:none}.sentence-skeleton .given{font-weight:700}.typed-solution{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.typed-solution-word{padding:6px 9px;border:1px solid rgba(29,78,137,.2);border-radius:9px;background:#fff;color:var(--blue-deep);font:700 14px/1.2 'Inter',sans-serif;cursor:pointer}.typed-solution-word:hover{background:#F2F7FC}.recall-badge{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:3px 8px;border-radius:999px;background:rgba(81,173,218,.12);color:var(--blue);font-size:11px;font-weight:800}.checking-answer{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(81,173,218,.1);color:var(--blue);font-weight:700}.review-rating{margin-top:14px;padding:13px;border:1px solid rgba(29,78,137,.14);border-radius:14px;background:rgba(255,255,255,.78)}.review-rating strong{display:block;margin-bottom:9px;color:var(--blue)}.review-rating-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.review-rating-actions .btn{padding:9px 7px;font-size:12px}.error-insight{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(194,28,53,.07);color:var(--red-deep);font-size:12.5px;font-weight:650}@media(max-width:540px){.key-row{flex-direction:column}.review-rating-actions{grid-template-columns:repeat(2,1fr)}}
.coach-card{grid-column:1/-1}.coach-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.coach-head h2{margin:5px 0 15px;font-size:23px;line-height:1.25}.coach-topics{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.coach-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.coach-actions .btn{flex:1;min-width:140px}#coachFeedback{margin-top:14px}@media(max-width:640px){.coach-head{flex-direction:column}.coach-head .btn{width:100%}}

/* ═══════════════════════════════════════════════════════════════
   v18 compact setup dashboard — important controls without scrolling
   ═══════════════════════════════════════════════════════════════ */
.wrap{max-width:1120px}
#play{max-width:680px;margin:0 auto}
#setup{padding-bottom:18px}
.setup-dashboard{margin-bottom:12px}
.compact-progress{margin:0;padding:12px 16px}.compact-progress .progress-stats{flex-wrap:wrap}.compact-progress .review-button{white-space:nowrap}
.setup-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
.setup-rail{position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;gap:10px;z-index:25}
.setup-rail-card{overflow:hidden;border:1px solid rgba(29,78,137,.15);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:0 18px 38px -24px rgba(18,54,95,.48);backdrop-filter:blur(16px)}
.setup-rail-heading{display:flex;flex-direction:column;padding:17px 17px 13px;border-bottom:1px solid var(--line)}
.setup-rail-heading strong{font-family:'Bricolage Grotesque',sans-serif;color:var(--blue-deep);font-size:18px}
.rail-kicker,.section-eyebrow{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.1em}
.rail-controls{display:flex;flex-direction:column;gap:11px;padding:13px 14px}
.rail-controls .control-field>.label{margin:0 0 5px;font-size:11px}
.setup-launch{display:flex;flex-direction:column;gap:10px;padding:11px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(246,250,254,.72),rgba(238,246,252,.92))}
.setup-launch .start-button{width:100%}
.setup-nav{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid rgba(29,78,137,.13);border-radius:20px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px)}
.setup-nav button{display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 13px;border:0;border-radius:999px;background:transparent;color:var(--mut);font:650 13px/1.2 'Inter',sans-serif;text-align:left;cursor:pointer;transition:background .16s,color .16s}
.setup-nav button:hover{background:#fff;color:var(--blue)}
.setup-nav button.is-current{background:linear-gradient(140deg,var(--enamel-hi),var(--blue-deep));color:#fff;box-shadow:0 6px 14px -6px rgba(18,54,95,.55)}
.setup-content{min-width:0;display:flex;flex-direction:column;gap:12px}
.setup-section{scroll-margin-top:14px}
.setup-content>.card{margin-bottom:0}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}
.section-heading h2{margin:3px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-size:23px;line-height:1.15;color:var(--blue-deep)}
.simple-heading{margin:4px 2px 12px}.simple-heading h2{font-size:20px}
.section-badge{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:rgba(46,133,64,.08);color:var(--ok);font-size:11px;font-weight:750}
.control-grid,.advanced-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.control-field{min-width:0}.control-field.is-wide{grid-column:1/-1}.control-field>.label{display:block;margin:0 0 6px;color:var(--blue-deep);font-size:12px}
.setup-select{display:block;width:100%;height:46px;padding:0 42px 0 13px;border:1.5px solid rgba(29,78,137,.17);border-radius:13px;background-color:rgba(255,255,255,.94);color:var(--ink);font:600 13.5px/1.2 'Inter',sans-serif;cursor:pointer;box-shadow:0 4px 12px -10px rgba(18,54,95,.4);transition:border-color .17s,box-shadow .17s}
.setup-select:hover{border-color:rgba(29,78,137,.4)}.setup-select:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 4px rgba(81,173,218,.16)}
.setup-select-small{height:40px;font-size:12.5px}
.compact-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.compact-chips .chip{min-height:44px;padding:9px 8px;text-align:center;font-size:12.5px}
.inline-tip{margin-top:16px;padding:10px 12px;border-radius:12px;background:rgba(81,173,218,.08);color:var(--mut);font-size:12px}
.compact-tools{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.compact-tools .practice-tool-card{position:relative;min-height:0;padding:14px;gap:10px}.compact-tools .practice-tool-card .btn{margin-top:auto;padding:10px 11px;font-size:12.5px}
.tool-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:2px;border-radius:13px;background:rgba(81,173,218,.11);font-size:20px}
.section-disclosure{overflow:hidden;border:1px solid rgba(29,78,137,.15);border-radius:21px;background:rgba(255,255,255,.8);box-shadow:0 14px 32px -25px rgba(18,54,95,.45)}
.section-disclosure>summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:11px;min-height:60px;padding:10px 14px;cursor:pointer;user-select:none}
.section-disclosure>summary::-webkit-details-marker,.sub-disclosure>summary::-webkit-details-marker{display:none}
.section-disclosure>summary:hover{background:rgba(81,173,218,.055)}
.summary-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,rgba(81,173,218,.16),rgba(29,78,137,.1));font-size:20px}
.summary-copy{display:flex;min-width:0;flex-direction:column}.summary-copy strong{color:var(--blue-deep);font-family:'Bricolage Grotesque',sans-serif;font-size:17px}.summary-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut);font-size:11.5px}
.summary-status{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;border-radius:999px;background:rgba(81,173,218,.09);color:var(--blue);font-size:10.5px;font-weight:750}
.summary-chevron{color:var(--blue);font-size:22px;transition:transform .18s}.section-disclosure[open]>summary .summary-chevron,.sub-disclosure[open]>summary .summary-chevron{transform:rotate(180deg)}
.section-disclosure[open]>summary{border-bottom:1px solid var(--line);background:rgba(247,251,254,.78)}
.disclosure-body{padding:14px}.training-card-body textarea{display:block;width:100%;min-height:128px;resize:vertical;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;background:rgba(255,255,255,.9);color:var(--ink);font:14px/1.5 'Inter',sans-serif}.training-card-body textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(81,173,218,.18)}
.advanced-control-grid{margin-bottom:16px}
.sub-disclosure{overflow:hidden;margin-top:10px;border:1px solid rgba(29,78,137,.12);border-radius:15px;background:rgba(248,251,254,.76)}
.sub-disclosure>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:51px;padding:11px 14px;color:var(--blue-deep);font-size:13px;font-weight:750;cursor:pointer}
.sub-disclosure>summary:hover{background:#fff}.sub-disclosure[open]>summary{border-bottom:1px solid var(--line);background:#fff}
.sub-disclosure-body{padding:15px}.provider-info{margin-top:10px;padding:10px 12px;border-left:3px solid var(--blue);border-radius:0 10px 10px 0;background:rgba(81,173,218,.08);color:var(--blue-deep);font-size:12.5px;font-weight:700;line-height:1.45}.provider-info[data-state="ready"],.provider-info[data-state="working"]{border-left-color:#08a05c;background:rgba(8,160,92,.07);color:#08683e}.provider-info[data-state="missing"],.provider-info[data-state="rejected"]{border-left-color:var(--red);background:rgba(237,41,57,.07);color:#a61e29}.key-warning{margin-top:8px;color:var(--red);font-size:12.5px;font-weight:700}
.compact-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.compact-setting-row>label{flex:0 0 auto;color:var(--mut);font-size:12px;font-weight:700}.compact-setting-row>span{flex:1;min-width:0}
.offline-pack-row,.action-row,.compact-action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.offline-pack-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.compact-action-row{margin-top:8px}.compact-action-row .btn,.action-row .btn{padding:8px 11px;font-size:12px}
.storage-warning{margin-top:8px;color:var(--red);font-size:12px;font-weight:700}.backup-nudge{margin-top:8px;color:#8a6d1f;font-size:12px;font-weight:650}.database-manager{max-height:280px;overflow:auto;margin-top:10px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .wrap{max-width:760px}
  .setup-layout{display:flex;flex-direction:column;gap:12px}
  .setup-rail{display:contents}
  .setup-nav{order:0;position:sticky;top:8px;z-index:70;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:999px;border-color:rgba(255,255,255,.88);background:rgba(255,255,255,.93);box-shadow:0 12px 28px -20px rgba(18,54,95,.55)}
  .setup-nav::-webkit-scrollbar{display:none}
  .setup-nav button{flex:0 0 auto;white-space:nowrap}
  .setup-rail-card{order:1;border-radius:20px}
  .setup-rail-heading{display:none}
  .rail-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px}
  .rail-controls .control-field:first-child{grid-column:1/-1}
  .setup-content{order:2}
  .setup-launch{position:fixed;z-index:100;left:50%;bottom:calc(8px + var(--visual-bottom-offset,0px) + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(720px,calc(100vw - 20px));display:flex;flex-direction:row;align-items:center;padding:8px;border:1px solid rgba(255,255,255,.88);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 18px 44px -16px rgba(18,54,95,.62);backdrop-filter:blur(18px)}
  .setup-launch .start-button{flex:1;min-height:50px}
  #setup{padding-bottom:92px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
@media(max-width:680px){
  .control-grid,.advanced-control-grid{grid-template-columns:1fr}.control-field.is-wide{grid-column:auto}
  .compact-tools{grid-template-columns:1fr}.compact-tools .practice-tool-card{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}.compact-tools .tool-icon{grid-row:1/3}.compact-tools .practice-tool-card .btn{grid-column:1/-1}
  .section-heading{flex-direction:column;gap:8px}.section-badge{align-self:flex-start}
  .section-disclosure>summary{grid-template-columns:auto minmax(0,1fr) auto}.summary-status{display:none}
  .compact-setting-row{align-items:stretch;flex-direction:column;gap:5px}
}
@media(max-width:560px){
  .wrap{padding-bottom:105px}.app-header{align-items:flex-start}.app-header-actions{flex-direction:column;align-items:flex-end}.api-key-status{min-height:30px;padding:6px 9px;font-size:9.5px}.setup-dashboard{margin-bottom:10px}.compact-progress{margin:0}
  .setup-nav{margin:0 -4px}.setup-nav button{min-height:40px;padding:8px 12px;font-size:12px}
  .rail-controls{padding:12px;gap:9px}.setup-select{font-size:16px}
  .setup-content{gap:13px}.setup-section{scroll-margin-top:65px}.section-heading h2{font-size:21px}
  .compact-chips .chip{padding:8px 4px;font-size:11.5px}.setup-select{font-size:16px}
  .section-disclosure>summary{min-height:70px;padding:12px 13px;gap:10px}.summary-icon{width:39px;height:39px}.summary-copy strong{font-size:15px}.summary-copy small{max-width:210px}
  .disclosure-body{padding:15px}.sub-disclosure-body{padding:13px}
  .setup-launch{padding:8px}.setup-launch .start-summary{display:none}.setup-launch .start-button{width:100%;min-width:0}
}
@supports(height:100dvh){
  @media(max-width:900px){
    .play-primary-bar{bottom:calc(8px + var(--visual-bottom-offset,0px) + env(safe-area-inset-bottom))}
  }
}

/* ================================================================
   v22 — phone-first app shell: Practice and Manage are distinct spaces
   ================================================================ */
:root{
  --app-surface:#f4f7fb;
  --app-card:rgba(255,255,255,.9);
  --app-shadow:0 24px 60px -34px rgba(18,54,95,.55);
  --app-radius:28px;
}
body{
  background:
    radial-gradient(820px 440px at 92% -10%,rgba(81,173,218,.22),transparent 63%),
    radial-gradient(620px 400px at -8% 32%,rgba(194,28,53,.075),transparent 64%),
    linear-gradient(180deg,#f8fbff 0%,var(--app-surface) 52%,#edf3f9 100%);
  transition:background .25s ease;
}
body[data-app-space="manage"]{
  background:
    radial-gradient(800px 430px at 92% -8%,rgba(92,104,201,.17),transparent 64%),
    radial-gradient(650px 430px at -8% 36%,rgba(81,173,218,.12),transparent 64%),
    linear-gradient(180deg,#fafbff 0%,#f2f4fb 52%,#edf1f8 100%);
}
.wrap{max-width:1180px;padding:22px 22px 56px}
.app-header{min-height:70px;margin-bottom:12px;padding:0 4px}
.app-header h1{letter-spacing:-.035em}
.app-subtitle{font-size:12.5px}

/* Primary destination switcher — behaves like a modern app segmented dock. */
.workspace-switcher{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  width:min(460px,100%);margin:0 auto 16px;padding:6px;
  border:1px solid rgba(255,255,255,.86);border-radius:23px;
  background:rgba(233,240,248,.78);box-shadow:0 14px 34px -28px rgba(18,54,95,.7);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.workspace-switcher button,.app-bottom-nav button{
  appearance:none;border:0;background:transparent;color:var(--mut);cursor:pointer;
  font:700 13px/1.2 'Inter',sans-serif;transition:transform .16s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.workspace-switcher button{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:8px 15px;border-radius:18px;
}
.workspace-switcher button:hover{background:rgba(255,255,255,.58);color:var(--blue)}
.workspace-switcher button:active,.app-bottom-nav button:active{transform:scale(.97)}
.workspace-switcher button.is-current{
  background:#fff;color:var(--blue-deep);box-shadow:0 10px 24px -17px rgba(18,54,95,.66);
}
.workspace-switcher button>span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.workspace-switcher strong{font-size:13px}.workspace-switcher small{margin-top:2px;color:var(--mut);font-size:10.5px;font-weight:600}
.workspace-switcher svg,.app-bottom-nav svg,.space-hero svg{
  width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.workspace-switcher button[data-app-space-button="practice"] svg,.app-bottom-nav button[data-app-space-button="practice"] svg,.practice-hero svg{fill:currentColor;stroke:none}

.app-space{animation:space-enter .28s cubic-bezier(.2,.8,.3,1) both}
@keyframes space-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.space-hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:18px;
  margin-bottom:15px;padding:23px 25px;border-radius:var(--app-radius);color:#fff;
  box-shadow:0 25px 54px -32px rgba(18,54,95,.8);
}
.space-hero::after{
  content:'';position:absolute;z-index:-1;right:-54px;top:-74px;width:230px;height:230px;border-radius:50%;
  border:42px solid rgba(255,255,255,.075);
}
.practice-hero{background:linear-gradient(135deg,#12365f 0%,#1d4e89 55%,#397fbd 100%)}
.manage-hero{background:linear-gradient(135deg,#202b52 0%,#3d4f86 55%,#6174b7 100%)}
.space-hero-icon{
  display:grid;place-items:center;flex:0 0 auto;width:58px;height:58px;border:1px solid rgba(255,255,255,.22);
  border-radius:19px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.space-hero-icon svg{width:26px;height:26px}
.space-eyebrow{display:block;margin-bottom:3px;color:rgba(255,255,255,.7);font-size:10px;font-weight:850;letter-spacing:.15em}
.space-hero h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:25px;line-height:1.15;letter-spacing:-.025em}
.space-hero p{max-width:680px;margin:5px 0 0;color:rgba(255,255,255,.76);font-size:12.5px;line-height:1.5}

.practice-space .setup-dashboard{margin-bottom:11px}
.practice-space .compact-progress{border-color:rgba(255,255,255,.85);background:var(--app-card);box-shadow:var(--app-shadow)}
.setup-layout{grid-template-columns:292px minmax(0,1fr);gap:16px}
.setup-rail-card,.section-disclosure,.practice-tool-card{
  border-color:rgba(29,78,137,.12);background:var(--app-card);box-shadow:var(--app-shadow);
}
.setup-rail-card{border-radius:25px}
.setup-rail-heading{padding:19px 18px 14px}
.rail-controls{padding:15px 16px;gap:13px}
.setup-select{height:48px;border-radius:15px;background-color:#fff;box-shadow:0 8px 18px -17px rgba(18,54,95,.75)}
.setup-launch{padding:12px;background:linear-gradient(180deg,rgba(246,250,254,.82),#edf5fb)}
.setup-launch .start-button{min-height:50px;border-radius:16px;box-shadow:0 14px 25px -15px rgba(194,28,53,.8)}
.practice-boundary-note{
  display:flex;align-items:flex-start;gap:9px;padding:13px 14px;border:1px solid rgba(29,78,137,.1);border-radius:18px;
  background:rgba(255,255,255,.58);color:var(--mut);font-size:11.5px;line-height:1.45;
}
.practice-boundary-note>span{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:8px;background:rgba(46,133,64,.1);color:var(--ok);font-weight:900}
.practice-boundary-note p{margin:0}.practice-boundary-note strong{color:var(--blue-deep)}
.setup-content{gap:15px}
.simple-heading{margin:3px 4px 11px}
.compact-tools{gap:12px}
.compact-tools .practice-tool-card{min-height:190px;padding:17px;border-radius:22px;transition:transform .18s ease,box-shadow .18s ease}
.compact-tools .practice-tool-card:hover{transform:translateY(-2px);box-shadow:0 25px 50px -30px rgba(18,54,95,.58)}
.tool-icon{width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,rgba(81,173,218,.15),rgba(29,78,137,.08))}
.practice-options-card{border-radius:23px}
.practice-options-card .advanced-control-grid{margin:0}
.section-disclosure{border-radius:24px}
.section-disclosure>summary{min-height:72px;padding:12px 16px}
.summary-icon{width:47px;height:47px;border-radius:16px}
.summary-copy strong{font-size:18px}.summary-copy small{margin-top:2px}

/* Management is a calm, focused administration workspace. */
.manage-content{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:16px;max-width:1040px;margin:0 auto}
.manage-content>#storageStatusRow{grid-column:1/-1;align-self:start;margin-bottom:0}
.manage-content>#trainingSection{grid-row:span 2}
.manage-content>#advancedSection{align-self:start}
.manage-content .section-disclosure{background:rgba(255,255,255,.92)}
.manage-content .section-disclosure>summary{min-height:82px}
.manage-content .sub-disclosure{border-radius:18px;background:rgba(246,248,253,.85)}
.manage-content .sub-disclosure>summary{min-height:58px;padding:13px 15px}
.manage-content .disclosure-body{padding:18px}
.manage-content .training-audio,.manage-content .training-focus{margin-top:20px;padding-top:18px}
.manage-content textarea{background:#fff}
.app-bottom-nav{display:none}

/* The game itself is one clean task at a time. */
#play{max-width:760px;padding-bottom:112px}
#gameBox>.card:first-child{margin-bottom:18px;padding:21px 23px!important;border-radius:25px;background:linear-gradient(145deg,#fff,rgba(244,249,253,.96));box-shadow:var(--app-shadow)}
#sourceSentence{letter-spacing:-.018em}
.dropzone{min-height:104px;border-width:1.5px;border-radius:24px;padding:16px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.word-bank{background:rgba(235,242,249,.72)}
.play-primary-bar{width:min(720px,calc(100vw - 30px));padding:9px;border-radius:22px}
.play-primary-bar .btn{min-height:48px;border-radius:15px}
.play-primary-bar #checkBtn,.play-primary-bar #nextBtn{flex:1.5}
.play-primary-bar #hintBtn,.play-primary-bar #revealBtn{flex:.75}
.play-secondary-actions .btn{border-radius:14px}
.keyboard-help{display:inline}

@media(max-width:980px){
  .manage-content{grid-template-columns:1fr;max-width:760px}
  .manage-content>#trainingSection{grid-row:auto}
}

@media(max-width:900px){
  .wrap{max-width:780px;padding:16px 16px 132px}
  .app-header{min-height:62px;margin-bottom:9px}
  .workspace-switcher{display:none}
  .space-hero{margin-bottom:12px;padding:20px 21px;border-radius:25px}
  .setup-layout{display:flex;flex-direction:column;gap:14px}
  .setup-rail{position:static;display:flex;order:initial;width:100%;z-index:auto}
  .setup-rail-card{order:initial;width:100%}
  .setup-rail-heading{display:flex}
  .rail-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}
  .setup-content{order:initial;width:100%}
  .setup-launch{
    position:fixed;z-index:100;left:50%;bottom:calc(86px + var(--visual-bottom-offset,0px) + env(safe-area-inset-bottom));
    width:min(740px,calc(100vw - 24px));padding:7px;border-radius:21px;transform:translateX(-50%);
  }
  .setup-launch .start-button{min-height:52px}
  #setup{padding-bottom:106px}
  #setup.is-manage{padding-bottom:78px}
  #setup.is-manage .setup-launch{display:none}
  .practice-boundary-note{display:none}
  .app-bottom-nav{
    position:fixed;z-index:120;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:min(390px,calc(100vw - 24px));padding:6px;
    border:1px solid rgba(255,255,255,.9);border-radius:24px;background:rgba(250,252,255,.92);
    box-shadow:0 22px 52px -22px rgba(18,54,95,.75);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  }
  .app-bottom-nav button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;border-radius:18px}
  .app-bottom-nav button.is-current{background:var(--blue-deep);color:#fff;box-shadow:0 10px 20px -13px rgba(18,54,95,.86)}
  body[data-app-space="manage"] .app-bottom-nav button.is-current{background:#344578}
  .app-bottom-nav svg{width:20px;height:20px}.app-bottom-nav span{font-size:12px}
  .manage-content{max-width:none}
  .manage-content .section-disclosure>summary{min-height:76px}
}

@media(max-width:680px){
  .compact-tools .practice-tool-card{min-height:0;padding:16px;grid-template-columns:48px minmax(0,1fr)}
  .compact-tools .practice-tool-card .btn{min-height:45px}
  .space-hero p{max-width:520px}
  .section-disclosure>summary{grid-template-columns:auto minmax(0,1fr) auto}
}

@media(max-width:560px){
  .wrap{padding:13px 12px 132px}
  .app-header{align-items:center;padding:0 2px}.app-header h1{font-size:27px!important}.app-subtitle{display:none}
  .app-header-actions{flex-direction:row;align-items:center}.api-key-status{max-width:128px;overflow:hidden}.api-key-status span:last-child{overflow:hidden;text-overflow:ellipsis}
  .space-hero{align-items:flex-start;gap:13px;padding:17px;border-radius:23px}
  .space-hero-icon{width:47px;height:47px;border-radius:16px}.space-hero-icon svg{width:22px;height:22px}
  .space-hero h2{font-size:20px}.space-hero p{font-size:11.5px;line-height:1.45}
  .compact-progress{padding:14px 15px}.compact-progress .progress-stats{gap:2px}
  .setup-rail-card{border-radius:23px}.setup-rail-heading{padding:16px 15px 11px}
  .rail-controls{grid-template-columns:1fr 1fr;padding:12px;gap:10px}
  .rail-controls .control-field:first-child{grid-column:1/-1}
  .setup-select{height:50px;font-size:16px}
  .setup-launch{bottom:calc(84px + var(--visual-bottom-offset,0px) + env(safe-area-inset-bottom));width:calc(100vw - 20px)}
  .app-bottom-nav{width:calc(100vw - 20px)}
  .section-heading h2{font-size:20px}.section-disclosure>summary{min-height:72px;padding:11px 12px}
  .summary-icon{width:41px;height:41px;border-radius:14px}.summary-copy strong{font-size:15.5px}.summary-copy small{max-width:185px}
  .manage-content .disclosure-body{padding:14px}.manage-content .sub-disclosure-body{padding:14px}
  .training-card-body textarea{font-size:16px}
  #play{padding-bottom:164px}
  #gameBox>.card:first-child{padding:18px!important;border-radius:22px}
  #sourceSentence{font-size:20px!important}
  .dropzone{min-height:94px;padding:13px;border-radius:21px}
  .play-primary-bar{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:calc(100vw - 20px);padding:7px;border-radius:21px;
  }
  .play-primary-bar .btn{width:100%;min-height:46px}
  .play-primary-bar #checkBtn,.play-primary-bar #nextBtn{grid-column:1/-1;grid-row:1}
  .play-primary-bar #hintBtn,.play-primary-bar #revealBtn{grid-row:2}
}

@media(pointer:coarse){.keyboard-help{display:none}}

/* ================================================================
   v26 — focused practice home
   The setup landing page is intentionally quiet and contained. These
   rules are scoped so the Manage workspace and active game keep their
   existing shell and controls.
   ================================================================ */
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell){
  background:
    radial-gradient(760px 420px at 100% -4%,rgba(82,153,222,.18),transparent 68%),
    radial-gradient(560px 360px at -8% 34%,rgba(194,28,53,.045),transparent 70%),
    linear-gradient(180deg,#f8fbff 0%,#f2f7fc 54%,#edf4fa 100%);
}
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell)::before{
  opacity:.42;
  -webkit-mask-image:linear-gradient(#000 0%,transparent 72%);
          mask-image:linear-gradient(#000 0%,transparent 72%);
}
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell) .wrap{
  max-width:808px;
  padding:clamp(22px,5vw,48px) 24px max(38px,env(safe-area-inset-bottom));
  /* the clean home is just the chat — keep it centred in the viewport */
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100svh;
  box-sizing:border-box;
}
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell) .wrap>.app-header,
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell) .workspace-switcher,
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell) .app-bottom-nav{
  display:none!important;
}
body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell) #setup{
  padding-bottom:0;
}
/* The home page is ONLY the chat box. These cards live in ⚙ App settings —
   setup.js moves them there at boot. While they are still inside the home
   shell (before boot, or if boot ever fails) they must never render here. */
.practice-home-shell>#practiceTools,
.practice-home-shell>#manageShortcuts,
.practice-home-shell>#practiceSetupCard{display:none!important}

.practice-home-shell{
  --home-blue:#1d5596;
  --home-blue-deep:#10345e;
  --home-blue-bright:#347cc4;
  --home-border:rgba(24,72,126,.13);
  --home-shadow:0 22px 54px -38px rgba(12,49,91,.58);
  display:grid;
  gap:clamp(15px,2.5vw,21px);
  width:min(100%,760px);
  margin:0 auto;
}
.practice-home-shell>*{min-width:0}

/* Greeting and lightweight destination controls. */
.practice-home-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:18px;
  padding:2px 4px 3px;
}
.practice-home-kicker{
  display:block;
  margin-bottom:7px;
  color:var(--home-blue);
  font-size:10px;
  font-weight:850;
  letter-spacing:.14em;
  line-height:1.3;
}
.practice-home-header h2{
  margin:0;
  color:var(--home-blue-deep);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(30px,5.2vw,43px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.02;
}
.practice-home-header h2 span{color:#356da7;font-weight:700}
.practice-home-header p{
  margin:9px 0 0;
  color:var(--mut);
  font-size:clamp(13.5px,2.1vw,16px);
  line-height:1.45;
}
.practice-home-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}
.home-streak{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(187,119,18,.13);
  border-radius:999px;
  background:linear-gradient(145deg,#fff7e8,#f9e8c9);
  color:#85500c;
  box-shadow:0 12px 26px -20px rgba(132,79,9,.55),inset 0 1px 0 rgba(255,255,255,.9);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
}
.practice-manage-button{
  appearance:none;
  display:grid;
  place-items:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--home-border);
  border-radius:16px;
  background:rgba(255,255,255,.84);
  color:var(--home-blue);
  box-shadow:0 14px 30px -23px rgba(18,54,95,.7),inset 0 1px 0 #fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.practice-manage-button svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* The primary practice action stays dominant without becoming a fixed CTA. */
.practice-start-card{
  appearance:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  width:100%;
  min-height:clamp(218px,34vw,258px);
  padding:31px 82px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:32px;
  background:linear-gradient(140deg,#123c70 0%,#1d5b9f 51%,#3b88ca 100%);
  color:#fff;
  box-shadow:0 30px 64px -34px rgba(12,50,94,.88),inset 0 1px 0 rgba(255,255,255,.25);
  font:inherit;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,filter .22s ease;
}
.practice-start-card::before,
.practice-start-card::after{
  content:'';
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
.practice-start-card::before{
  width:270px;
  height:270px;
  top:-168px;
  right:-64px;
  border:44px solid rgba(255,255,255,.065);
}
.practice-start-card::after{
  width:190px;
  height:190px;
  bottom:-132px;
  left:-52px;
  background:rgba(81,173,218,.17);
  box-shadow:0 0 0 35px rgba(255,255,255,.035);
}
.practice-start-card>span{position:relative;z-index:1}
.practice-start-orb{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:23px;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px -19px rgba(6,34,68,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.practice-start-orb svg{
  width:37px;
  height:37px;
  fill:none;
  stroke:currentColor;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.practice-start-copy{display:flex;min-width:0;flex-direction:column;align-items:center}
.practice-start-copy strong{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(29px,5vw,38px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.05;
}
.practice-start-copy>span{
  margin-top:7px;
  color:rgba(255,255,255,.78);
  font-size:clamp(13px,2.1vw,15.5px);
  font-weight:650;
  letter-spacing:.015em;
}
.practice-start-copy small{
  max-width:520px;
  margin-top:4px;
  color:rgba(255,255,255,.66);
  font-size:11.5px;
  line-height:1.35;
}
.practice-start-copy small:empty{display:none}
.practice-start-arrow{
  position:absolute!important;
  right:22px;
  bottom:22px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:24px;
  line-height:1;
  transition:transform .2s ease,background .2s ease;
}
.practice-start-card:disabled{cursor:not-allowed;filter:saturate(.55);opacity:.65}

/* Four concise routes: icon first, explanation second, with no nested CTA. */
.practice-shortcuts-section{display:grid;gap:12px}
.practice-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:1px 4px 0;
}
.practice-section-heading>div>span{
  display:block;
  margin-bottom:3px;
  color:var(--home-blue);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.14em;
}
.practice-section-heading h3{
  margin:0;
  color:var(--home-blue-deep);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(19px,3vw,24px);
  letter-spacing:-.025em;
  line-height:1.15;
}
.practice-section-heading>small{color:var(--mut);font-size:11.5px;font-weight:650;white-space:nowrap}
.practice-shortcuts-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.practice-shortcut{
  appearance:none;
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto 1fr;
  align-items:start;
  gap:12px;
  min-width:0;
  min-height:144px;
  padding:17px;
  border:1px solid var(--home-border);
  border-radius:23px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,252,255,.9));
  color:var(--ink);
  box-shadow:var(--home-shadow),inset 0 1px 0 #fff;
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.shortcut-icon{
  display:grid;
  place-items:center;
  width:47px;
  height:47px;
  border-radius:16px;
  background:rgba(44,111,177,.1);
  color:var(--home-blue);
}
.shortcut-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.shortcut-speaking .shortcut-icon{background:rgba(77,93,181,.1);color:#4d5db5}
.shortcut-verbs .shortcut-icon{background:rgba(37,132,102,.1);color:#217a60}
.shortcut-text .shortcut-icon{background:rgba(182,106,28,.1);color:#a05f1c}
.shortcut-copy{
  grid-column:1/-1;
  align-self:end;
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.shortcut-copy strong{
  color:var(--home-blue-deep);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:18px;
  font-weight:750;
  letter-spacing:-.015em;
  line-height:1.2;
}
.shortcut-copy small{color:var(--mut);font-size:11.5px;line-height:1.35}
.shortcut-arrow{
  grid-column:3;
  grid-row:1;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:#f0f5fa;
  color:var(--home-blue);
  font-size:17px;
  line-height:1;
  transition:transform .18s ease,background .18s ease;
}
.shortcut-admin-tag{
  grid-column:3;
  grid-row:1;
  align-self:start;
  padding:6px 8px;
  border-radius:999px;
  background:#f5eee4;
  color:#8c591e;
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  line-height:1;
}
.practice-shortcut:disabled{
  cursor:not-allowed;
  opacity:.58;
  filter:saturate(.65);
  box-shadow:none;
}

/* A compact daily summary; the legacy expanded chart stays off this home. */
.home-progress-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:19px 20px;
  border:1px solid var(--home-border);
  border-radius:23px;
  background:rgba(255,255,255,.9);
  box-shadow:var(--home-shadow),inset 0 1px 0 #fff;
}
.home-progress-copy{min-width:0}
.home-progress-label{
  display:block;
  margin-bottom:4px;
  color:var(--mut);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.home-progress-stats{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 8px;line-height:1.25}
.home-progress-stats strong{
  color:var(--home-blue-deep);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:20px;
  letter-spacing:-.02em;
}
.home-progress-stats span{color:#9aabbd}
.home-progress-stats b{color:var(--ink);font-size:13px;font-weight:750}
.home-review-summary{margin-top:5px;color:var(--mut);font-size:10.5px;line-height:1.4}
.home-review-button{
  appearance:none;
  min-height:48px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:15px;
  background:linear-gradient(140deg,#2469ac,#17497f);
  color:#fff;
  box-shadow:0 13px 24px -18px rgba(17,62,108,.85);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.home-review-button:disabled{
  border-color:rgba(24,72,126,.1);
  background:#edf3f8;
  color:#71859b;
  box-shadow:none;
  cursor:not-allowed;
}
.home-progress-expand{display:none}
.home-progress-details{display:none!important}

/* In-flow settings sheet: collapsible, polished, and never covers a CTA. */
.practice-settings-sheet{
  overflow:hidden;
  border:1px solid var(--home-border);
  border-radius:25px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--home-shadow),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.practice-settings-sheet>summary{
  list-style:none;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px 13px;
  min-height:88px;
  padding:10px 18px 16px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease;
}
.practice-settings-sheet>summary::-webkit-details-marker,
.practice-options-card>summary::-webkit-details-marker{display:none}
.sheet-handle{
  grid-column:1/-1;
  justify-self:center;
  width:58px;
  height:5px;
  margin:0 0 1px;
  border-radius:999px;
  background:#d5e1ec;
}
.sheet-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:15px;
  background:#edf4fa;
  color:var(--home-blue);
}
.sheet-icon svg,.sheet-chevron svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sheet-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.sheet-copy strong{
  color:var(--home-blue-deep);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:17px;
  letter-spacing:-.015em;
}
.sheet-copy small{overflow:hidden;color:var(--mut);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
.sheet-chevron{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  color:var(--home-blue);
  transition:transform .2s ease,background .2s ease;
}
.practice-settings-sheet[open]>summary{border-bottom:1px solid var(--home-border);background:rgba(244,249,253,.72)}
.practice-settings-sheet[open]>summary .sheet-chevron{transform:rotate(180deg);background:#eaf2f9}
.practice-settings-body{padding:16px}
.practice-settings-sheet .rail-controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding:0;
}
.practice-settings-sheet .rail-controls .control-field:first-child{grid-column:1/-1}
.practice-settings-sheet .control-field>.label{margin-bottom:6px;font-size:10.5px;letter-spacing:.08em}
.practice-settings-sheet .setup-select{
  height:48px;
  min-height:48px;
  border-radius:14px;
  background-color:#fff;
  font-size:13px;
}
.practice-settings-sheet .compact-chips .chip{min-height:48px}
.practice-options-card{
  overflow:hidden;
  margin-top:14px;
  border:1px solid rgba(24,72,126,.11);
  border-radius:17px;
  background:#f7fafd;
}
.practice-options-card>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:11px 14px;
  color:var(--home-blue-deep);
  font-size:12.5px;
  font-weight:750;
  cursor:pointer;
}
.practice-options-card .summary-chevron{transition:transform .18s ease}
.practice-options-card[open]>summary{border-bottom:1px solid rgba(24,72,126,.1);background:#fff}
.practice-options-card[open]>summary .summary-chevron{transform:rotate(180deg)}
.practice-options-body{padding:14px}

@media(hover:hover) and (pointer:fine){
  .practice-manage-button:hover{transform:translateY(-2px);border-color:rgba(29,85,150,.26);background:#fff;box-shadow:0 18px 32px -23px rgba(18,54,95,.8)}
  .practice-start-card:not(:disabled):hover{transform:translateY(-3px);filter:saturate(1.06);box-shadow:0 38px 72px -34px rgba(12,50,94,.94),inset 0 1px 0 rgba(255,255,255,.28)}
  .practice-start-card:not(:disabled):hover .practice-start-arrow{transform:translateX(3px);background:rgba(255,255,255,.2)}
  .practice-shortcut:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(29,85,150,.25);background:#fff;box-shadow:0 26px 54px -34px rgba(12,49,91,.7)}
  .practice-shortcut:not(:disabled):hover .shortcut-arrow{transform:translate(2px,-2px);background:#e6f0f8}
  .home-review-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 18px 28px -18px rgba(17,62,108,.9)}
  .practice-settings-sheet>summary:hover{background:rgba(244,249,253,.7)}
  .practice-options-card>summary:hover{background:#fff}
}
.practice-manage-button:active,
.practice-start-card:not(:disabled):active,
.practice-shortcut:not(:disabled):active,
.home-review-button:not(:disabled):active{transform:scale(.98)}

@media(max-width:620px){
  body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell) .wrap{
    padding:20px 14px max(30px,env(safe-area-inset-bottom));
  }
  .practice-home-shell{gap:15px}
  .practice-home-header{gap:11px;padding-inline:2px}
  .practice-home-kicker{font-size:9px;letter-spacing:.11em}
  .practice-home-actions{gap:7px}
  .home-streak{min-height:42px;padding-inline:11px;font-size:11.5px}
  .practice-manage-button{flex-basis:44px;width:44px;height:44px;border-radius:14px}
  .practice-start-card{min-height:210px;padding:27px 68px;border-radius:27px}
  .practice-start-orb{width:61px;height:61px;border-radius:20px}
  .practice-start-orb svg{width:33px;height:33px}
  .practice-start-arrow{right:17px;bottom:17px;width:43px;height:43px;border-radius:14px}
  .practice-section-heading>small{display:none}
  .practice-shortcuts-grid{gap:10px}
  .practice-shortcut{min-height:137px;padding:15px;border-radius:20px}
  .shortcut-icon{width:44px;height:44px;border-radius:15px}
  .shortcut-copy strong{font-size:17px}
  .home-progress-card{padding:17px 16px;border-radius:20px}
  .practice-settings-sheet{border-radius:22px}
}

@media(max-width:480px){
  .practice-home-header{grid-template-columns:minmax(0,1fr) auto}
  .practice-home-header h2{font-size:29px}
  .practice-home-header h2 span{display:block;margin-top:2px;font-size:.75em;letter-spacing:-.025em}
  .practice-home-header p{margin-top:7px;font-size:13px}
  .practice-home-actions{align-items:flex-end;flex-direction:column-reverse}
  .home-streak{min-height:34px;padding-inline:9px;font-size:10.5px}
  .practice-start-card{min-height:196px;padding:24px 58px 27px}
  .practice-start-orb{width:56px;height:56px;border-radius:19px}
  .practice-start-copy strong{font-size:28px}
  .practice-start-copy>span{font-size:12px}
  .practice-start-arrow{right:14px;bottom:14px;width:40px;height:40px}
  .practice-section-heading h3{font-size:18px}
  .practice-shortcut{min-height:128px;padding:13px;gap:9px}
  .shortcut-icon{width:42px;height:42px}
  .shortcut-arrow{width:32px;height:32px}
  .shortcut-copy strong{font-size:16px}
  .shortcut-copy small{font-size:10.5px}
  .shortcut-admin-tag{padding:5px 6px;font-size:7px}
  .home-progress-card{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:15px}
  .home-review-button{max-width:132px;padding-inline:12px;white-space:normal;line-height:1.15}
  .practice-settings-sheet>summary{padding-inline:14px}
  .practice-settings-body{padding:13px}
  .practice-settings-sheet .rail-controls{grid-template-columns:1fr}
  .practice-settings-sheet .rail-controls .control-field:first-child{grid-column:auto}
}

@media(max-width:350px){
  .practice-home-header{grid-template-columns:1fr}
  .practice-home-actions{align-items:center;flex-direction:row;justify-content:flex-start}
  .practice-shortcuts-grid{grid-template-columns:1fr}
  .practice-shortcut{min-height:120px}
  .home-progress-card{grid-template-columns:1fr}
  .home-review-button{width:100%;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .practice-manage-button,
  .practice-start-card,
  .practice-start-arrow,
  .practice-shortcut,
  .shortcut-arrow,
  .home-review-button,
  .sheet-chevron{transition:none!important}
  .practice-manage-button:hover,
  .practice-start-card:hover,
  .practice-shortcut:hover,
  .home-review-button:hover{transform:none!important}
}

/* Editable uploaded sentences */
.training-library{margin-top:14px}
.training-library>summary>span:first-child{flex:1;min-width:0}
.training-library-count{flex:0 0 auto;color:var(--mut);font-size:11px;font-weight:700}
.training-library-search{display:block;width:100%;height:44px;margin-bottom:10px;padding:0 13px;border:1.5px solid rgba(29,78,137,.17);border-radius:12px;background:#fff;color:var(--ink);font:600 13px/1.2 'Inter',sans-serif}
.training-library-search:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 4px rgba(81,173,218,.14)}
.training-sentence-list{display:flex;max-height:430px;overflow:auto;flex-direction:column;gap:8px;padding-right:3px}
.training-sentence-row{padding:12px;border:1px solid rgba(29,78,137,.13);border-radius:14px;background:rgba(255,255,255,.86)}
.training-sentence-head{display:flex;align-items:flex-start;gap:12px}
.training-sentence-copy{flex:1;min-width:0}
.training-sentence-lux{color:var(--blue-deep);font-size:14px;font-weight:750;line-height:1.4;overflow-wrap:anywhere}
.training-sentence-source{margin-top:3px;color:var(--mut);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.training-sentence-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;color:var(--mut);font-size:10.5px;font-weight:700}
.training-sentence-actions{display:flex;flex:0 0 auto;gap:6px}
.training-sentence-actions .btn{min-height:36px;padding:7px 10px;font-size:11.5px}
.training-sentence-edit{display:grid;grid-template-columns:1fr;gap:7px}
.training-sentence-edit label,.sentence-edit-form label{color:var(--blue-deep);font-size:11.5px;font-weight:750}
.training-sentence-edit textarea,.sentence-edit-form textarea{display:block;width:100%;min-height:60px;padding:10px 11px;border:1.5px solid rgba(29,78,137,.2);border-radius:11px;background:#fff;color:var(--ink);font:600 14px/1.45 'Inter',sans-serif;resize:vertical}
.training-sentence-edit textarea:focus,.sentence-edit-form textarea:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 3px rgba(81,173,218,.14)}
.training-sentence-empty{padding:18px 6px;color:var(--mut);font-size:13px;text-align:center}

/* In-game correction editor */
.game-prompt-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:7px}
.game-prompt-heading #roundInfo{flex:1;min-width:0}
.sentence-edit-trigger{flex:0 0 auto;padding:5px 9px;border:1px solid rgba(29,78,137,.18);border-radius:999px;background:rgba(255,255,255,.8);color:var(--blue);font:750 11px/1.2 'Inter',sans-serif;cursor:pointer}
.sentence-edit-trigger:hover{border-color:rgba(29,78,137,.38);background:#fff}
.sentence-edit-trigger:focus-visible{outline:3px solid rgba(81,173,218,.26);outline-offset:2px}
.sentence-edit-trigger:disabled{cursor:not-allowed;opacity:.48}
.game-sentence-editor{margin-top:14px;padding-top:14px;border-top:1px solid rgba(29,78,137,.13)}
.sentence-edit-form{display:grid;grid-template-columns:1fr;gap:7px}
.sentence-edit-intro{margin:0 0 3px;color:var(--mut);font-size:12px;line-height:1.45}
.sentence-edit-message{min-height:17px;color:var(--red);font-size:11.5px;font-weight:700}
.sentence-edit-actions{display:flex;gap:8px;flex-wrap:wrap}
.sentence-edit-actions .btn{min-height:40px;padding:8px 13px;font-size:12px}
.game-edit-confirmation{margin-top:12px;padding:10px 12px;border:1px solid rgba(46,133,64,.18);border-radius:12px;background:rgba(46,133,64,.08);color:var(--ok);font-size:13px;font-weight:750}
.sentence-edit-form select{display:block;width:100%;max-width:320px;padding:9px 11px;border:1.5px solid rgba(29,78,137,.2);border-radius:11px;background:#fff;color:var(--ink);font:600 13.5px/1.4 'Inter',sans-serif}
.sentence-edit-form select:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 3px rgba(81,173,218,.14)}
.sentence-delete-button{color:var(--red);border-color:rgba(237,41,57,.3)}
.sentence-delete-button:hover{background:rgba(237,41,57,.08)}
.training-sentence-remove{color:var(--red)}

/* Audio alignment inside the sentence editor */
.audio-align{margin:2px 0;padding:10px 12px;border:1.5px dashed rgba(29,78,137,.22);border-radius:12px}
.audio-align legend{padding:0 6px;color:var(--blue-deep);font-size:11.5px;font-weight:750}
.audio-align-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.audio-align-row label{margin:0}
.audio-align-row input[type=number]{width:96px;padding:8px 10px;border:1.5px solid rgba(29,78,137,.2);border-radius:10px;background:#fff;color:var(--ink);font:650 13.5px/1.3 'Inter',sans-serif}
.audio-align-row input[type=number]:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 3px rgba(81,173,218,.14)}
.audio-align-row .btn{min-height:38px;padding:7px 12px;font-size:12px}

/* Download link for LuxASR-generated subtitles */
.training-srt-download{display:inline-block;margin-left:6px;color:var(--blue);font-weight:750;text-decoration:underline}

/* Sentence machines on the practice home */
.machines-list{display:flex;flex-direction:column;gap:10px}
.machine-home-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid rgba(29,78,137,.14);border-radius:14px;background:rgba(255,255,255,.8)}
.machine-home-copy{flex:1;min-width:0}
.machine-home-model{font-size:14.5px;font-weight:800;line-height:1.35;color:var(--ink)}
.machine-home-meta{margin-top:2px;font-size:12px;color:var(--mut);font-weight:600}
.machine-home-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.machine-home-drill{flex:0 0 auto;min-height:38px;padding:8px 14px;font-size:13px}
.machine-home-delete{flex:0 0 auto;min-height:38px;padding:8px 10px;font-size:13px;color:var(--red)}
@media(max-width:560px){.machine-home-row{flex-wrap:wrap}.machine-home-copy{flex-basis:100%}}

/* Slot skeleton shown above the puzzle during a machine drill */
.machine-slots{margin-top:10px;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.machine-slots .pattern-chips{display:flex;flex-wrap:wrap;gap:4px}
.machine-slots-label{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--blue-deep);letter-spacing:.04em;padding-top:4px}

/* Sentence machine panel: everything one Sazmaschinn produced */
.machine-panel{margin-top:14px;padding:14px 16px;border:1.5px solid rgba(29,78,137,.16);border-radius:14px;background:rgba(255,255,255,.82)}
.machine-title{color:var(--blue-deep);font-size:13px;font-weight:800}
.machine-model{margin-top:4px;color:var(--mut);font-size:12px;font-weight:650}
.machine-list{margin-top:8px}
.machine-row{display:flex;align-items:flex-start;gap:8px;padding:8px 6px;border-bottom:1px solid rgba(29,78,137,.1)}
.machine-row:last-child{border-bottom:0}
.machine-row.is-current{background:rgba(81,173,218,.1);border-radius:10px}
.machine-row-copy{flex:1;min-width:0}
.machine-row-lux{font-size:13.5px;font-weight:750;line-height:1.35}
.machine-row-source{font-size:12px;margin-top:2px}
.machine-row-button{flex:0 0 auto;min-height:34px;padding:5px 9px;font-size:13px}

@media(max-width:560px){
  .training-sentence-head{flex-direction:column}
  .training-sentence-actions{width:100%}
  .training-sentence-actions .btn{flex:1}
  .game-prompt-heading{align-items:center}
  .sentence-edit-trigger{padding:7px 9px}
  .sentence-edit-actions .btn{flex:1}
}

/* ═══════════════════════════════════════════════════════════════════
   MODERN UNIFORM CARD LAYER
   One card recipe, one radius scale, calm flat background.
   Loaded last so it re-skins every component consistently.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --surface:#ffffff;
  --surface-border:#E3EAF2;
  --surface-border-strong:#CFDBE8;
  --card-radius:20px;
  --inner-radius:14px;
  --card-shadow:0 1px 2px rgba(15,42,74,.04),0 16px 36px -28px rgba(15,42,74,.28);
  --card-shadow-hover:0 2px 4px rgba(15,42,74,.05),0 22px 44px -26px rgba(15,42,74,.34);
  --kicker:#C21C35;
}
body{background:#F3F6FA}
body::before{content:none}

/* ── one card recipe everywhere ── */
.card,.practice-shortcut,.home-progress-card,.practice-settings-sheet,.section-disclosure,
.practice-options-card,.machine-home-row,.machine-panel,.storage-health,.practice-boundary-note,
.progress-card,.practice-tool-card,.setup-rail-card,.space-hero,.welcome-panel,.start-bar,
.review-complete,#errorBox{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.practice-shortcut:hover,.practice-tool-card:hover,.machine-home-row:hover{
  border-color:var(--surface-border-strong);
  box-shadow:var(--card-shadow-hover);
}
.section-disclosure[open]>summary{background:#F8FAFD;border-bottom:1px solid var(--surface-border)}
.section-disclosure>summary:hover,.practice-settings-sheet>summary:hover{background:#F8FAFD}
.manage-content .section-disclosure{background:var(--surface)}
.manage-content .sub-disclosure{border:1px solid var(--surface-border);border-radius:var(--inner-radius);background:#F8FAFD}

/* ── uniform kickers (small red section labels, like the mockup) ── */
.practice-home-kicker,.practice-section-heading>div>span,.space-eyebrow,.home-progress-label{
  color:var(--kicker);
  font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;
}

/* ── header tabs become clean pills: active = solid navy ── */
.workspace-switcher{
  width:min(430px,100%);padding:0;gap:8px;
  border:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.workspace-switcher button{
  min-height:52px;padding:8px 16px;border:1px solid var(--surface-border);border-radius:999px;
  background:var(--surface);box-shadow:var(--card-shadow);
}
.workspace-switcher button:hover{background:#F8FAFD;color:var(--blue)}
.workspace-switcher button.is-current{
  border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 14px 28px -18px rgba(18,54,95,.65);
}
.workspace-switcher button.is-current small{color:rgba(255,255,255,.75)}

/* ── start card: one bold, clean action ── */
.practice-start-card{
  min-height:150px;gap:11px;padding:26px 30px;
  border:0;border-radius:var(--card-radius);
  background:linear-gradient(135deg,#CA2039 0%,#A5142B 100%);
  box-shadow:0 2px 4px rgba(143,16,34,.14),0 20px 42px -22px rgba(194,28,53,.6);
}
.practice-start-card::before,.practice-start-card::after{content:none}
.practice-start-orb{width:54px;height:54px;border-radius:17px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:none;backdrop-filter:none}
.practice-start-orb svg{width:29px;height:29px}

/* ── shortcuts: flat white cards with colored icon tiles ── */
.practice-shortcut{min-height:132px;background:var(--surface)}
.shortcut-icon,.sheet-icon,.summary-icon,.tool-icon,.space-hero-icon{border-radius:var(--inner-radius)}

/* ── manage hero flattened into the same card language ── */
.space-hero{padding:20px 22px;color:var(--ink)}
.space-hero::after{content:none}
.practice-hero,.manage-hero{background:var(--surface)}
.space-hero h2{color:var(--blue-deep)}
.space-hero p{color:var(--mut)}
.space-hero-icon{border:0;background:#EDF4FA;color:var(--blue);box-shadow:none}

/* ── welcome panel keeps its role but joins the card language ── */
.welcome-panel{color:var(--ink)}
.welcome-panel p{color:var(--mut)}

/* ── uniform buttons: pills, flatter color, softer shadows ── */
.btn{border-radius:999px}
.btn-red{background:linear-gradient(135deg,#C9233A,#AD1830);box-shadow:0 1px 2px rgba(143,16,34,.18),0 12px 24px -14px rgba(194,28,53,.55)}
.btn-blue{background:linear-gradient(135deg,#24619F,#173F6E);box-shadow:0 1px 2px rgba(18,54,95,.18),0 12px 24px -14px rgba(29,78,137,.55)}
.btn-ghost{background:var(--surface);border:1px solid var(--surface-border);box-shadow:0 1px 2px rgba(15,42,74,.05)}
.btn-ghost:hover{background:#F8FAFD;border-color:var(--surface-border-strong)}
.btn-amber{box-shadow:0 1px 2px rgba(138,90,18,.15),0 12px 24px -14px rgba(226,169,59,.5)}
.btn:hover{transform:translateY(-1px)}
.home-review-button{border-radius:999px;background:linear-gradient(135deg,#24619F,#173F6E);box-shadow:0 1px 2px rgba(18,54,95,.18),0 12px 24px -14px rgba(29,78,137,.55)}
.home-review-button:disabled{background:#EFF4F9;border-color:var(--surface-border);box-shadow:none}

/* ── inputs, selects, chips ── */
.setup-select{border:1px solid var(--surface-border);border-radius:var(--inner-radius);box-shadow:0 1px 2px rgba(15,42,74,.05)}
.training-card textarea,.typing-input,
.training-sentence-edit textarea,.sentence-edit-form textarea,.sentence-edit-form select{border-radius:var(--inner-radius)}
.api-key-status{border-color:var(--surface-border);background:var(--surface);box-shadow:0 1px 2px rgba(15,42,74,.05)}

/* ── play screen joins the card language ── */
#gameBox>.card:first-child{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.play-primary-bar{border:1px solid var(--surface-border);background:rgba(255,255,255,.97);box-shadow:0 2px 4px rgba(15,42,74,.06),0 20px 44px -22px rgba(15,42,74,.4)}
.dropzone{border-radius:16px}
.word-bank{background:#F8FAFD;border-color:var(--surface-border-strong)}
.machine-panel{margin-top:14px}
.machine-home-row{border-radius:var(--card-radius)}
.machine-slots .pattern-chip{background:#F8FAFD;border-color:var(--surface-border)}
.teacher,.asrbox{border-radius:var(--card-radius)}
.prefetch-status{background:var(--surface);border:1px solid var(--surface-border)}

/* ── mobile bottom nav: clean white bar ── */
.app-bottom-nav{border-top:1px solid var(--surface-border);background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ── manage sub-pages: one page per job ── */
.manage-subnav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.manage-subnav button{
  appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:9px 18px;
  border:1px solid var(--surface-border);border-radius:999px;background:var(--surface);color:var(--mut);
  font:700 13px/1.2 'Inter',sans-serif;cursor:pointer;box-shadow:var(--card-shadow);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .16s ease;
}
.manage-subnav button:hover{background:#F8FAFD;color:var(--blue)}
.manage-subnav button:active{transform:scale(.97)}
.manage-subnav button.is-current{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 14px 28px -18px rgba(18,54,95,.65)}
.manage-content{display:block;max-width:820px;margin:0 auto}
.manage-page{display:grid;gap:14px}
.manage-page>.card,.manage-page>.section-disclosure{margin-bottom:0}
.manage-card>.label{margin-bottom:8px;color:var(--kicker)}
.manage-page .sub-disclosure.training-library{border:1px solid var(--surface-border);border-radius:var(--inner-radius);background:#F8FAFD}
.shortcut-library .shortcut-icon{background:rgba(182,106,28,.1);color:#a05f1c}
.shortcut-sentences .shortcut-icon{background:rgba(29,78,137,.09);color:var(--blue)}
.manage-home-button{font-weight:800}
.manage-subnav .manage-home-button:hover{color:var(--blue-deep)}
#practiceTools .practice-shortcuts-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* focus items live with the game filters now */
.practice-options-body .training-focus{margin-top:16px;padding-top:16px;border-top:1px dashed var(--surface-border-strong)}
.training-focus textarea{display:block;width:100%;min-height:78px;resize:vertical;padding:11px 12px;border:1.5px solid var(--surface-border);border-radius:var(--inner-radius);background:#fff;color:var(--ink);font:14px/1.5 'Inter',sans-serif}
.training-focus textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(81,173,218,.14)}
/* link imports */
.training-link-import{margin-top:14px;padding-top:12px;border-top:1px dashed var(--surface-border-strong)}
.manage-card .training-link-import{margin-top:0;padding-top:0;border-top:0} /* on its own page there is nothing above to divide */
/* the official-transcript fields on the audio and link import pages */
#trainingLinkTranscript,#trainingAudioTranscript{display:block;width:100%;resize:vertical;margin-top:2px;padding:11px 12px;border:1.5px solid var(--surface-border);border-radius:var(--inner-radius);background:#fff;color:var(--ink);font:13.5px/1.5 'Inter',sans-serif}
#trainingLinkTranscript:focus,#trainingAudioTranscript:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(81,173,218,.14)}
@media(prefers-color-scheme:dark){
  #trainingLinkTranscript,#trainingAudioTranscript{background:#111A25;border-color:var(--surface-border);color:var(--ink)}
}
.training-link-import .label{margin-bottom:4px}
.training-link-import p{margin:0 0 9px}
.training-link-import input[type=url]{flex:1;min-width:220px;padding:11px 12px;border:1.5px solid var(--surface-border);border-radius:var(--inner-radius);background:#fff;color:var(--ink);font:600 13.5px/1.4 'Inter',sans-serif}
.training-link-import input[type=url]:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(81,173,218,.14)}
.training-link-import code{padding:2px 6px;border-radius:6px;background:#EDF2F8;font-size:12px}
/* import result: presents the sentences created from a link or file import */
.training-import-result{margin-top:12px;padding:12px;border:1.5px solid var(--surface-border);border-radius:var(--inner-radius);background:rgba(255,255,255,.7)}
.training-import-result-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.training-import-result-head strong{font-size:14px;color:var(--blue-deep)}
.training-import-result-head span{flex:0 0 auto;color:var(--mut);font-size:12px;font-weight:650}
.training-import-sentences{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;padding-right:4px}
.training-import-sentence{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--surface-border);border-radius:10px;background:#fff;font-size:13.5px;line-height:1.45}
.training-import-num{flex:0 0 auto;min-width:22px;text-align:center;padding:1px 4px;border-radius:7px;background:rgba(81,173,218,.12);color:var(--blue);font-size:11.5px;font-weight:750}
.training-import-text{flex:1;display:flex;flex-direction:column}
.training-import-translation{margin-top:2px;color:var(--mut);font-size:12px}
.training-import-play{flex:0 0 auto;padding:4px 10px;font-size:12px}
.training-import-result-foot{margin-top:9px;font-size:12.5px}

/* ── phone polish: hide desktop-only and technical chrome ── */
@media(hover:none){.keyboard-help{display:none}}
@media(max-width:620px){
  .keyboard-help{display:none}
  #apiKeyStatusText{display:none}                 /* the colored light alone tells the story */
  .api-key-status{min-height:30px;padding:8px;gap:0}
  .app-subtitle{display:none}
  #dbCountLive{display:none}
  .app-header{margin-bottom:8px}
  .wrap{padding:14px 12px 40px}
}

/* ── minimal home: no marketing headings ── */
.home-slim-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0}
/* AI-controlled home: everything except the chat starts collapsed. The AI
   (or a "show …" command) reveals a card by removing this class. */
.ai-collapsed{display:none!important}
/* when nothing in the header row is revealed, the row itself disappears too */
.home-slim-header:not(:has(> :not(.ai-collapsed))){display:none}
.home-mini-label{padding:0 4px;color:var(--mut);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.space-hero{padding:14px 18px;margin-bottom:12px}
.space-hero h2{font-size:19px}
.space-hero-icon{width:42px;height:42px}
.space-hero-icon svg{width:21px;height:21px}

/* ── machine mastery + daily goal ── */
.machine-mastery-row{display:flex;align-items:center;gap:8px;margin-top:7px;max-width:260px}
.machine-mastery{flex:1;height:7px;border-radius:999px;background:#E8EEF5;overflow:hidden}
.machine-mastery span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#51ADDA,#1D4E89);transition:width .4s ease}
.machine-mastery.is-strong span{background:linear-gradient(90deg,#3FA25C,#2E8540)}
.machine-mastery-label{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--mut)}
.home-progress-card{grid-template-columns:minmax(0,1fr) auto auto}
.today-goal{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--goal-pct,0)*1%),#E6EDF5 0)}
.today-goal::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)}
.today-goal span{position:relative;font-size:10.5px;font-weight:850;color:var(--blue-deep);letter-spacing:-.02em}
.today-goal.is-done{background:conic-gradient(var(--ok) 100%,#E6EDF5 0)}
.today-goal.is-done span{color:var(--ok-deep)}
@media(max-width:560px){.home-progress-card{grid-template-columns:minmax(0,1fr) auto}.home-review-button{grid-column:1/-1}}
.ai-offline-note{margin-top:12px;padding:9px 12px;border:1px solid var(--surface-border);border-radius:12px;background:#F8FAFD;color:var(--mut);font-size:12.5px;font-weight:650}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — follows the device setting automatically
   Built on the same tokens as the card system, so every card, page and
   control switches together.
   ═══════════════════════════════════════════════════════════════════ */
@media(prefers-color-scheme:dark){
  :root{
    --surface:#161F2B;
    --surface-border:#2A3646;
    --surface-border-strong:#38465A;
    --card-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 36px -26px rgba(0,0,0,.55);
    --card-shadow-hover:0 2px 4px rgba(0,0,0,.35),0 22px 44px -26px rgba(0,0,0,.6);
    --ink:#E8EEF5;
    --mut:#96A7BA;
    --blue:#5B9BD8;
    --blue-deep:#BFD7EE;
    --sky:#5FB6E2;
    --kicker:#F2637A;
    --red:#F2637A;
    --ok:#5CBF74;
    --ok-deep:#7ED496;
    --line:rgba(160,190,220,.16);
  }
  body{background:#0E141C;color:var(--ink)}
  /* header */
  #scorebox{background:var(--surface)!important;border-color:var(--surface-border)!important}
  #scoreval{color:var(--blue-deep)!important}
  .api-key-status{background:var(--surface);border-color:var(--surface-border)}
  .home-streak{background:#2A2210;border-color:#4A3B14;color:#E8C367}
  /* inputs and selects */
  .setup-select,.typing-input,.training-card textarea,.training-focus textarea,
  .training-sentence-edit textarea,.sentence-edit-form textarea,.sentence-edit-form select,
  .training-library-search,.training-link-import input[type=url],.key-row input,
  .audio-align-row input[type=number],#dbManageSearch{
    background:#111A25;color:var(--ink);border-color:var(--surface-border);
  }
  .setup-select{background-color:#111A25}
  input::placeholder,textarea::placeholder{color:#5E7288}
  /* quiet inner panels */
  .word-bank,.manage-content .sub-disclosure,.manage-page .sub-disclosure.training-library,
  .machine-slots .pattern-chip,.section-disclosure[open]>summary,.ai-offline-note,
  .today-goal::before{background:#111A25}
  .section-disclosure>summary:hover,.practice-settings-sheet>summary:hover,.btn-ghost:hover{background:#1C2634}
  .machine-mastery{background:#243040}
  .today-goal{background:conic-gradient(var(--blue) calc(var(--goal-pct,0)*1%),#243040 0)}
  .today-goal.is-done{background:conic-gradient(#3FA25C 100%,#243040 0)}
  .shortcut-icon,.sheet-icon,.summary-icon,.tool-icon,.space-hero-icon,.practice-manage-button{background:#1C2A3B;color:var(--blue)}
  .shortcut-library .shortcut-icon{background:#2A2210;color:#E8C367}
  .shortcut-admin-tag{background:#2A2210;color:#E8C367}
  /* buttons */
  .btn-ghost{background:var(--surface);color:var(--blue-deep);border-color:var(--surface-border)}
  .btn-amber{color:#3A2E08}
  .workspace-switcher button,.manage-subnav button{background:var(--surface);color:var(--mut);border-color:var(--surface-border)}
  .manage-subnav button:hover{background:#1C2634}
  .chip{background:#1C2634;border-color:var(--surface-border);color:var(--ink)}
  .training-term{background:#1C2634;border-color:var(--surface-border);color:var(--blue-deep)}
  .training-import-result{background:var(--surface);border-color:var(--surface-border)}
  .training-import-sentence{background:#111A25;border-color:var(--surface-border)}
  /* game surfaces */
  .dropzone{background:#111A25;border-color:var(--surface-border-strong)}
  .dropzone.correct{background:rgba(46,133,64,.16)}
  .teacher{background:#241D0C;border-color:#4A3B14}
  .teacher *:not(.pattern-chip):not(.pattern-role):not(.pattern-word){color:#E3D2A1!important}
  .pattern-chip{background:#1C2634;border-color:#4A3B14}
  .pattern-word{color:#E3D2A1}
  .pattern-role{color:#C9A94E}
  .typed-solution-word{background:#1C2634;color:var(--ink)}
  .sentence-skeleton .given{color:var(--ink)}
  .prefetch-status{background:var(--surface);border-color:var(--surface-border)}
  .play-primary-bar{background:rgba(22,31,43,.97);border-color:var(--surface-border)}
  .review-saved{background:#132638;color:var(--blue)}
  .checking-answer{color:var(--mut)}
  .game-edit-confirmation{background:rgba(46,133,64,.14)}
  .audio-align{border-color:var(--surface-border-strong)}
  .training-srt-download{color:var(--blue)}
  .storage-boot{background:#0E141C;color:var(--blue-deep)}
  .app-bottom-nav{background:rgba(22,31,43,.97);border-color:var(--surface-border)}
  .home-mini-label{color:var(--mut)}
  .machine-home-meta,.machine-row-source{color:var(--mut)}
  .today-goal span{color:var(--blue-deep)}
  .today-goal.is-done span{color:var(--ok-deep)}
}
@media(prefers-color-scheme:dark){
  /* beat the page-specific light gradients with matching specificity */
  body,
  body[data-app-space="manage"],
  body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell){
    background:#0E141C;
  }
  body:has(#setup:not(.hidden) #practiceSpace:not(.hidden) .practice-home-shell)::before{content:none}
  /* home cards inherit the dark palette */
  .practice-home-shell{
    --home-blue:#5B9BD8;
    --home-blue-deep:#D9E6F4;
    --home-blue-bright:#6FB1E8;
    --home-border:var(--surface-border);
    --home-shadow:var(--card-shadow);
  }
  .practice-shortcut{background:var(--surface);color:var(--ink)}
  .home-progress-stats b{color:var(--ink)}
  /* the enamel word tiles keep their signature deep blue */
  .plaque{--blue:#1D4E89;--blue-deep:#12365F;--enamel-hi:#2A66AE;--sky:#51ADDA}
  /* settings status lines readable on dark */
  .provider-info{background:#16222E;color:var(--blue-deep)}
  .provider-info[data-state="ready"],.provider-info[data-state="working"]{background:#12281B;color:#8FD6A8}
  .provider-info[data-state="missing"],.provider-info[data-state="rejected"]{background:#2C161A;color:#F1A0AC}
  .api-key-status.is-ready,.api-key-status.is-working{background:#12281B;color:#8FD6A8;border-color:#1F4630}
  .api-key-status.is-missing,.api-key-status.is-rejected{background:#2C161A;color:#F1A0AC;border-color:#4A2228}
  .storage-status{background:#16222E;color:var(--blue-deep);border-color:var(--surface-border)}
  .storage-health{background:#16222E;border-color:var(--surface-border)}
  .training-note,.zone-help{color:var(--mut)}
}
@media(prefers-color-scheme:dark){
  .plaque.solvedgreen{--ok:#2E8540;--ok-deep:#1F5E2C} /* solved tiles stay deep green in the dark */
}

/* ═══ professional polish layer ═══ */
/* one button scale: consistent height, weight, and press feel */
.btn{min-height:44px;font-weight:750;letter-spacing:.01em}
.btn:active{transform:scale(.975)}
/* crisp numerals in scores, counters, timers */
#scoreval,.machine-mastery-label,#todayGoalText,.home-progress-stats strong,#examTimer{font-variant-numeric:tabular-nums}
/* brand-colored focus rings everywhere */
:focus-visible{outline:3px solid rgba(81,173,218,.55);outline-offset:2px}
/* cards get a hairline top light for gentle depth (light mode) */
@media(prefers-color-scheme:light){
  .card,.practice-shortcut,.home-progress-card,.section-disclosure,.machine-home-row,.machine-panel{
    box-shadow:inset 0 1px 0 #fff,var(--card-shadow);
  }
}
/* start card: refined depth and a clearer call to action */
.practice-start-card{transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease,filter .2s ease}
.practice-start-card:hover{transform:translateY(-2px);box-shadow:0 3px 6px rgba(143,16,34,.16),0 26px 52px -24px rgba(194,28,53,.7)}
.practice-start-card:active{transform:scale(.985)}
.practice-start-copy strong{letter-spacing:-.02em}
/* headline rhythm */
.practice-section-heading h3,.space-hero h2,.training-title{letter-spacing:-.025em}
/* section labels share one voice */
.home-mini-label,.label,.home-progress-label{letter-spacing:.11em;font-size:10.5px;font-weight:850;text-transform:uppercase}
/* quiet scrollbars on desktop */
*{scrollbar-width:thin;scrollbar-color:rgba(120,145,175,.4) transparent}

/* compact manage cards: present but not dominant */
.shortcut-compact{grid-template-rows:auto;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:66px;padding:12px 14px}
.shortcut-compact .shortcut-icon{width:36px;height:36px;border-radius:11px}
.shortcut-compact .shortcut-icon svg{width:19px;height:19px}
.shortcut-compact .shortcut-copy{grid-column:2;margin-top:0}
.shortcut-compact .shortcut-copy strong{font-size:14px}
.shortcut-compact .shortcut-admin-tag{position:static;justify-self:end}
/* slim manage header: back + page name, once */
.manage-header{display:flex;align-items:center;gap:12px;max-width:820px;margin:2px auto 14px}
.manage-back-button{appearance:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--surface-border);border-radius:999px;background:var(--surface);color:var(--blue-deep);font:800 18px/1 'Inter',sans-serif;cursor:pointer;box-shadow:var(--card-shadow)}
.manage-back-button:hover{background:#F8FAFD}
.manage-header h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:22px;letter-spacing:-.02em;color:var(--blue-deep)}
@media(prefers-color-scheme:dark){.manage-back-button:hover{background:#1C2634}}
/* first-run tip */
.first-run-tip{margin-top:12px;padding:13px 14px;border:1px solid rgba(81,173,218,.35);border-radius:14px;background:rgba(81,173,218,.09);color:var(--ink);font-size:13.5px;line-height:1.55}
.first-run-tip .first-run-dismiss{display:block;margin-top:9px;min-height:36px;padding:6px 14px;font-size:12.5px}

/* ═══ native-phone feel ═══ */
html{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:contain}
button,select,summary,a,.plaque{touch-action:manipulation} /* no double-tap zoom on controls */
@media(max-width:620px){
  /* the Start action lives at the thumb: pinned to the bottom of the home */
  .practice-home-shell{padding-bottom:8px}
  .practice-start-card{
    order:99;
    position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;
    flex-direction:row;justify-content:flex-start;gap:14px;
    min-height:86px;padding:16px 20px;text-align:left;
    box-shadow:0 4px 10px rgba(143,16,34,.25),0 24px 48px -18px rgba(194,28,53,.75);
  }
  .practice-start-orb{width:46px;height:46px;border-radius:14px;flex:0 0 auto}
  .practice-start-orb svg{width:24px;height:24px}
  .practice-start-copy{align-items:flex-start;text-align:left}
  .practice-start-copy strong{font-size:21px}
  .practice-start-copy span{font-size:11px}
  .practice-start-arrow{margin-left:auto}
  /* in the game, the header shrinks to just the score — like a real app */
  body:has(#play:not(.hidden)) .app-header>div:first-child{display:none}
  body:has(#play:not(.hidden)) #apiKeyStatus{display:none}
  body:has(#play:not(.hidden)) .app-header{justify-content:flex-end;margin-bottom:4px}
  #scorebox{padding:8px 14px}
  #scoreval{font-size:22px}
}
/* installed on the home screen → trim the last browser-like chrome */
@media(display-mode:standalone) and (max-width:620px){
  .wrap{padding-top:calc(10px + env(safe-area-inset-top))}
  .app-subtitle{display:none}
}

/* ═══ gentle page transitions — moving between screens feels like a native app ═══ */
@media(prefers-reduced-motion:no-preference){
  @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .app-space:not(.hidden),.manage-page:not(.hidden),#play:not(.hidden){animation:pageIn .26s ease both}
}

/* ═══ machine chooser: search, show-all, and the "next Start" marker ═══ */
.machines-search-row{margin:2px 0 10px}
.machines-search-row input{width:100%;padding:9px 12px;font-size:14px;border-radius:12px;border:1px solid var(--surface-border,#d7e3ee);background:var(--surface,#fff)}
.machines-show-all{width:100%;margin-top:8px;font-size:13.5px}
.machine-home-row.is-next{outline:2px solid rgba(29,78,137,.35);outline-offset:-2px}

/* ═══ in-game machine bar + switcher ═══ */
#machineSlots{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#machineSlots.hidden{display:none}
.machine-slots-model{font-weight:700;color:var(--blue,#1D4E89);font-size:14px}
.machine-switch-btn{margin-left:auto;padding:6px 12px;font-size:12.5px;white-space:nowrap}
.machine-switch-overlay{position:fixed;inset:0;background:rgba(14,26,40,.45);z-index:11000;display:flex;align-items:flex-end;justify-content:center}
.machine-switch-sheet{width:min(560px,100%);max-height:76vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px;background:var(--surface,#fff)}
@media(min-width:621px){
  .machine-switch-overlay{align-items:center;padding:20px}
  .machine-switch-sheet{border-radius:20px}
}
.machine-switch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.machine-switch-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px;border:1px solid var(--surface-border,#d7e3ee);border-radius:14px;background:transparent;cursor:pointer;margin-bottom:8px;font:inherit;color:inherit}
.machine-switch-row.is-current{outline:2px solid rgba(29,78,137,.4)}
.machine-switch-row .msr-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.machine-switch-row .msr-model{font-weight:700;font-size:14.5px}
.machine-switch-row .msr-meta{font-size:12px;color:#5b7391}

/* skeleton chips inside the machine switcher rows */
.msr-chips{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.machine-switch-search{width:100%;padding:9px 12px;font-size:14px;border-radius:12px;border:1px solid var(--surface-border,#d7e3ee);background:var(--surface,#fff);margin-bottom:10px}

/* the recall badge is a tappable control now */
button.recall-badge-btn{cursor:pointer;font:inherit;border:1px solid var(--surface-border,#d7e3ee)}
button.recall-badge-btn:disabled{cursor:default;opacity:.7}

/* ═══ B1 practice setup card — clean & light, always visible ═══ */
.practice-setup-card{padding:16px 16px 14px}
.setup-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#5b7391;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.setup-kicker-meta{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:#8aa5c4}
.practice-setup-card .control-field{margin-bottom:12px}
.practice-setup-card .control-field:last-child{margin-bottom:0}
.setup-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.setup-row2 .control-field{min-width:0}
.seg-control{display:flex;background:#eef4fb;border-radius:12px;padding:4px;gap:4px}
.seg-option{flex:1;min-width:0;text-align:center;padding:9px 2px;border-radius:9px;font-size:12.5px;font-weight:700;color:#5b7391;border:0;background:transparent;cursor:pointer;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.seg-option.is-on{background:#fff;color:#1D4E89;box-shadow:0 3px 8px -3px rgba(29,78,137,.35)}
.practice-setup-card .setup-select{width:100%;border:1.5px solid #e3ecf5;border-radius:14px;padding:11px 12px;font-size:13.5px;font-weight:700;background:#fff;color:inherit}
.setup-divider{height:1px;background:#edf3fa;margin:14px -16px}
.setup-focus-words{margin-top:12px}
.setup-focus-words .training-focus{padding-top:8px}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .seg-control{background:#182434}
  body:not([data-theme="light"]) .seg-option{color:#8fa5bd}
  body:not([data-theme="light"]) .seg-option.is-on{background:#24405e;color:#d8e8f8;box-shadow:none}
  body:not([data-theme="light"]) .practice-setup-card .setup-select{background:#101a26;border-color:#233850;color:#d8e8f8}
  body:not([data-theme="light"]) .setup-divider{background:#1d2c3e}
  body:not([data-theme="light"]) .setup-kicker-meta{color:#7189a5}
}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .setup-focus-words>summary{background:#182434;color:#d8e8f8}
  body:not([data-theme="light"]) .setup-focus-words>summary .summary-chevron{color:#7189a5}
}

/* ═══ Cards 2: every filter is its own card ═══ */
.setup-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.setup-tile{position:relative;text-align:left;background:var(--surface,#fff);border:1px solid #e3ecf5;border-radius:16px;padding:12px 13px;cursor:pointer;font-family:inherit;color:inherit;box-shadow:0 8px 20px -16px rgba(29,78,137,.4);min-width:0}
.setup-tile .st-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px}
.st-gold{background:#fdf6e3}.st-sky{background:#e8f5fb}.st-violet{background:#f1ecfd}.st-red{background:#fdecef}.st-green{background:#eaf7ee}.st-blue{background:#eaf2fc}
.setup-tile small{display:block;font-size:10.5px;font-weight:800;color:#8aa5c4;text-transform:uppercase;letter-spacing:.06em}
.setup-tile b{font-size:14px;color:#16283c;display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setup-tile .st-car{position:absolute;top:13px;right:12px;color:#c3d4e8;font-size:11px}
.setup-tile.is-set{background:linear-gradient(135deg,#eaf2fc,#fff);outline:2px solid rgba(29,78,137,.25);outline-offset:-2px}
.setup-tile.is-set b{color:#1D4E89}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .setup-tile{background:#101a26;border-color:#233850;box-shadow:none}
  body:not([data-theme="light"]) .setup-tile b{color:#d8e8f8}
  body:not([data-theme="light"]) .setup-tile.is-set{background:linear-gradient(135deg,#182a40,#101a26);outline-color:rgba(120,170,220,.35)}
  body:not([data-theme="light"]) .setup-tile .st-ic{background:#182434}
}

/* ═══ collapsible practice setup card ═══ */
.practice-setup-card>.setup-summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.practice-setup-card>.setup-summary::-webkit-details-marker{display:none}
.setup-kicker-title{font-size:13px;color:#16283c;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.practice-setup-card>.setup-summary .setup-kicker-meta{margin-left:auto;font-size:11.5px;font-weight:700;color:#8aa5c4;text-align:right}
.practice-setup-card>.setup-summary .summary-chevron{color:#8aa5c4;transition:transform .2s;font-size:15px}
.practice-setup-card[open]>.setup-summary .summary-chevron{transform:rotate(180deg)}
.practice-setup-card[open]>.setup-summary{margin-bottom:12px}
.setup-body>.control-field{margin-bottom:12px}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .setup-kicker-title{color:#d8e8f8}
}

/* ═══ uniform home cards & icons — one family for everything ═══ */
.practice-setup-card{border:1px solid var(--home-border);border-radius:23px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,252,255,.9));box-shadow:var(--home-shadow),inset 0 1px 0 #fff;padding:15px 17px}
.practice-setup-card>.setup-summary{display:flex;align-items:center;gap:12px;margin:0}
.practice-setup-card[open]>.setup-summary{margin-bottom:14px}
.setup-icon{display:grid;place-items:center;width:47px;height:47px;border-radius:16px;background:rgba(44,111,177,.1);color:var(--home-blue);flex:0 0 auto}
.setup-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.setup-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.setup-copy strong{color:var(--home-blue-deep);font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:750;letter-spacing:-.015em;line-height:1.2}
.setup-copy small{color:var(--mut);font-size:11.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setup-chevron{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(44,111,177,.08);color:var(--home-blue);flex:0 0 auto;transition:transform .2s}
.setup-chevron svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.practice-setup-card[open] .setup-chevron{transform:rotate(180deg)}
/* the filter tiles speak the same icon language as the big shortcut cards */
.setup-tile{border:1px solid var(--home-border);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,252,255,.9));box-shadow:var(--home-shadow)}
.setup-tile .st-ic{width:40px;height:40px;border-radius:14px;font-size:19px}
/* machine rows join the family too */
.machine-home-row{border:1px solid var(--home-border);background:rgba(255,255,255,.9);box-shadow:var(--home-shadow)}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .practice-setup-card,body:not([data-theme="light"]) .setup-tile{background:#101a26;border-color:#233850;box-shadow:none}
  body:not([data-theme="light"]) .setup-copy strong{color:#d8e8f8}
  body:not([data-theme="light"]) .setup-icon,body:not([data-theme="light"]) .setup-chevron{background:#182434;color:#8fb4dd}
  body:not([data-theme="light"]) .machine-home-row{background:#101a26;border-color:#233850;box-shadow:none}
}

/* remember-key checkbox (phone use without the PC) */
.key-remember{display:flex;gap:9px;align-items:flex-start;margin-top:9px;font-size:12.5px;line-height:1.45;color:#5b7391;cursor:pointer}
.key-remember input{margin-top:2px;width:16px;height:16px;accent-color:#1D4E89;flex:0 0 auto}

/* ═══ AI practice setup — tell the AI what to practise ═══ */
.ai-setup-card{border:1px solid var(--home-border);border-radius:23px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,252,255,.9));box-shadow:var(--home-shadow),inset 0 1px 0 #fff;padding:15px 17px;display:flex;flex-direction:column;gap:11px}
.ai-setup-head{display:flex;align-items:center;gap:12px}
.ai-setup-icon{background:linear-gradient(145deg,rgba(199,60,102,.14),rgba(44,111,177,.12));color:#B0345C}
#aiSetupInput{width:100%;box-sizing:border-box;border:1px solid var(--home-border);border-radius:15px;padding:11px 13px;font:500 14.5px/1.45 Inter,sans-serif;color:var(--ink);background:rgba(255,255,255,.85);resize:none;min-height:58px}
#aiSetupInput:focus{outline:2px solid rgba(44,111,177,.4);outline-offset:1px}
.ai-setup-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.ai-setup-actions .btn-primary{flex:1;min-width:150px}
#aiSetupHelpBtn{min-width:44px;padding:10px 0;font-size:17px} /* just the ❔ — compact and round */
.ai-manual-toggle{font-size:12.5px}
.ai-setup-status{font-size:12.5px;line-height:1.45;min-height:0}
.ai-setup-status:empty{display:none}
.ai-setup-status.is-working{color:#1D4E89}
.ai-setup-status.is-ready{color:#1F7A4D;font-weight:600}
.ai-setup-status.is-warn{color:#B0345C;font-weight:600}
/* the command guide: what you can say to the AI box */
.ai-setup-help{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px dashed var(--home-border)}
.ai-setup-help-intro{color:var(--mut);font-size:12.5px}
.ai-setup-help-row{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border:1px solid var(--home-border);border-radius:12px;background:rgba(255,255,255,.85);text-align:left;cursor:pointer;font:inherit}
.ai-setup-help-row:hover{border-color:var(--blue)}
.ai-setup-help-row strong{font-size:13.5px;color:var(--blue-deep)}
.ai-setup-help-row span{font-size:12px;color:var(--mut)}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .ai-setup-card{background:#101a26;border-color:#233850;box-shadow:none}
  body:not([data-theme="light"]) #aiSetupInput{background:#0b1420;border-color:#233850;color:#d8e8f8}
  body:not([data-theme="light"]) .ai-setup-icon{background:#241a28;color:#e08bab}
  body:not([data-theme="light"]) .ai-setup-help-row{background:#0b1420;border-color:#233850}
}

/* ═══ accounts: sign-in overlay + user administration ═══ */
.auth-overlay{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(14,20,28,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.auth-locked{overflow:hidden}
.auth-card{width:min(400px,94vw);margin:0;padding:24px 22px}
.auth-card h2{margin:0 0 6px;font-size:22px}
.auth-card .muted{margin:0 0 16px;font-size:13px}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-form label{font-size:12.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.auth-form input{padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:500 14.5px/1.4 'Inter',sans-serif}
.auth-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(81,173,218,.2)}
.auth-form .btn{margin-top:8px}
.auth-error{min-height:18px;color:var(--red);font-size:12.5px;font-weight:650}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--mut);font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.1em}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-google-host{display:flex;justify-content:center;min-height:44px}
.auth-who{margin-bottom:10px;font-weight:650;font-size:13.5px;color:var(--blue-deep)}
.auth-status{min-height:18px;margin-top:8px;font-size:12.5px}
.auth-user-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.auth-user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.8);font-size:13.5px}
.auth-user-actions{display:flex;gap:6px}
.auth-user-actions .btn{padding:5px 10px;font-size:12px;min-height:0}
.auth-create-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.auth-create-form input:not([type=checkbox]){flex:1;min-width:130px;padding:9px 11px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font:500 13.5px/1.4 'Inter',sans-serif}
.auth-admin-check{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--mut)}
@media(prefers-color-scheme:dark){
  body:not([data-theme="light"]) .auth-form input,
  body:not([data-theme="light"]) .auth-create-form input:not([type=checkbox]){background:#111A25;border-color:#233850;color:#d8e8f8}
  body:not([data-theme="light"]) .auth-user-row{background:#111A25;border-color:#233850}
}

/* ═══ phone: chat-first layout — the AI box becomes a composer pinned to
   the bottom of the screen, like a messaging app ═══ */
@media(max-width:620px){
  #practiceSpace{padding-bottom:132px} /* scrolled content never hides behind the composer */
  .ai-setup-card{
    position:fixed;left:10px;right:10px;z-index:900;
    bottom:calc(10px + env(safe-area-inset-bottom) + var(--visual-bottom-offset,0px));
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;
    padding:10px;border-radius:28px;
    box-shadow:0 18px 44px -16px rgba(18,54,95,.55);
  }
  /* like the Claude app: the message box alone on top, buttons on a row below */
  .ai-setup-card{display:flex;flex-direction:column;align-items:stretch}
  .ai-setup-card .ai-setup-head{display:none} /* the composer speaks for itself */
  #aiSetupInput{width:100%;min-height:46px;height:46px;max-height:130px;border-radius:23px;padding:12px 15px}
  @supports (field-sizing: content){ /* the input grows with the message */
    #aiSetupInput{height:auto;field-sizing:content}
  }
  .ai-setup-card .ai-setup-actions{display:flex;width:100%;align-items:center;justify-content:space-between;margin:0}
  #aiSetupHelpBtn{flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}
  #aiSetupBtn{flex:0 0 48px;width:48px;min-width:48px;height:48px;padding:0;border-radius:50%;font-size:0}
  #aiSetupBtn::before{content:'✨';font-size:20px}
  .ai-setup-status{margin:0 6px}
  #aiSetupHelp{max-height:45vh;overflow-y:auto;overscroll-behavior:contain}
}

/* ═══ polish layer: lighter, calmer, more tactile ═══ */
:root{accent-color:var(--blue);color-scheme:light dark}
*{-webkit-tap-highlight-color:transparent}
h1,h2,h3,.display{text-wrap:balance;font-optical-sizing:auto}
.app-header h1.display{ /* the wordmark gets a quiet enamel gradient */
  color:var(--blue-deep);
  background:linear-gradient(135deg,var(--blue-deep),var(--enamel-hi) 55%,var(--sky) 115%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media (prefers-color-scheme: dark){
  body:not([data-theme="light"]) .app-header h1.display{
    background:linear-gradient(135deg,#A9CEEC,#51ADDA 55%,#8AD4FF 115%);
    -webkit-background-clip:text;background-clip:text;
  }
}
/* light theme: airier background, feather-light borders, softer depth */
@media (prefers-color-scheme: light){
  body{background:
    radial-gradient(1000px 560px at 90% -14%, rgba(81,173,218,.11), transparent 62%),
    radial-gradient(760px 480px at -14% 24%, rgba(237,41,57,.05), transparent 55%),
    linear-gradient(180deg,#FBFDFF 0%,#F1F6FC 100%)}
  body::before{opacity:.55}
  .card{background:rgba(255,255,255,.93);border-color:rgba(255,255,255,.85);
    box-shadow:0 1px 2px rgba(18,54,95,.04),0 18px 44px -30px rgba(29,78,137,.4)}
  .btn-red{box-shadow:0 1px 2px rgba(143,16,34,.14),0 10px 24px -12px rgba(194,28,53,.45)}
  .btn-blue{box-shadow:0 1px 2px rgba(18,54,95,.14),0 10px 24px -12px rgba(29,78,137,.45)}
  .btn-amber{box-shadow:0 1px 2px rgba(138,90,18,.12),0 10px 22px -12px rgba(226,169,59,.4)}
  .btn-ghost{border-width:1px}
  .chip{border-width:1px;background:rgba(255,255,255,.92)}
}
/* the big cards invite touch: gentle lift, soft settle */
.practice-shortcut,.practice-start-card,.ai-setup-help-row,.training-import-sentence{
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s,background .18s}
.practice-shortcut:hover,.practice-start-card:hover{transform:translateY(-2px)}
.practice-shortcut:active,.practice-start-card:active,.ai-setup-help-row:active{transform:translateY(0) scale(.99)}
/* card grids ease in one after the other */
.practice-shortcuts-grid>*{animation:fdi .4s cubic-bezier(.2,.8,.3,1) both}
.practice-shortcuts-grid>*:nth-child(2){animation-delay:.05s}
.practice-shortcuts-grid>*:nth-child(3){animation-delay:.1s}
.practice-shortcuts-grid>*:nth-child(4){animation-delay:.15s}
/* opening a section eases its content in */
details[open]>.disclosure-body,details[open]>.sub-disclosure-body{animation:fdi .26s cubic-bezier(.2,.8,.3,1) both}
/* slim, quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(91,115,145,.35) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(91,115,145,.3);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(91,115,145,.5);border:2px solid transparent;background-clip:content-box}
/* no rubber-band scroll chaining behind the app */
html,body{overscroll-behavior-y:contain}
/* anyone who asks for less motion gets exactly that */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}