:root {
  --ink: #102a43;
  --muted: #627d98;
  --paper: #f5f7f4;
  --white: #ffffff;
  --teal: #0f766e;
  --teal-light: #ccfbf1;
  --gold: #f2b84b;
  --line: #d9e2ec;
  --shadow: 0 18px 50px rgba(16, 42, 67, 0.10);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { min-height: 68px; padding: 0 6vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(245,247,244,.92); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); }
.brand { color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.top-actions { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.text-button { border: 0; background: none; color: var(--teal); font-weight: 700; margin-right: 16px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
main { width: min(1180px, 90vw); margin: 0 auto; }
.hero { padding: 64px 0 42px; display: grid; grid-template-columns: 1fr 180px; gap: 40px; align-items: end; }
.eyebrow { margin: 0 0 10px; color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; max-width: 850px; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.lede { max-width: 780px; color: var(--muted); line-height: 1.7; font-size: 1.08rem; }
.sprint-ring { aspect-ratio: 1; border-radius: 50%; border: 12px solid var(--teal-light); border-top-color: var(--teal); display: grid; place-content: center; text-align: center; background: var(--white); box-shadow: var(--shadow); }
.sprint-ring strong { font-size: 3rem; line-height: 1; }
.sprint-ring span { color: var(--muted); }
.workspace { display: grid; grid-template-columns: 320px 1fr; background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.setup { padding: 30px; background: #edf7f5; border-right: 1px solid var(--line); }
h2 { margin: 0 0 22px; font-size: 1.55rem; letter-spacing: -.025em; }
label, legend { display: block; margin: 20px 0 8px; font-size: .85rem; font-weight: 750; }
select, textarea, input { width: 100%; border: 1px solid #bcccdc; border-radius: 12px; background: var(--white); padding: 12px 14px; color: var(--ink); }
textarea { resize: vertical; line-height: 1.45; }
fieldset { border: 0; padding: 0; margin: 0; }
.confidence { display: flex; gap: 8px; }
.confidence button { width: 42px; height: 42px; border: 1px solid #9fb3c8; background: var(--white); border-radius: 10px; color: var(--ink); }
.confidence button.selected { background: var(--ink); color: var(--white); border-color: var(--ink); }
.primary { width: 100%; margin-top: 24px; padding: 14px; border: 0; border-radius: 12px; background: var(--teal); color: var(--white); font-weight: 800; }
.privacy { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.coach { min-height: 560px; display: flex; flex-direction: column; }
.coach-header { padding: 26px 30px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.coach-header h2 { margin: 0; }
.timer { text-align: right; }
.timer span { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer small { color: var(--muted); }
.chat { padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; flex: 1; max-height: 390px; overflow-y: auto; }
.message { max-width: 78%; padding: 16px 18px; border-radius: 18px; line-height: 1.55; }
.message p { margin: 4px 0 0; }
.speaker { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.coach-message { background: #e6fffa; border-bottom-left-radius: 4px; }
.learner-message { background: var(--ink); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.reply { padding: 0 30px 16px; display: flex; gap: 10px; }
.reply button { border: 0; border-radius: 12px; padding: 0 20px; color: var(--white); background: var(--ink); font-weight: 750; }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 30px 26px; }
.quick-actions button { border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--teal); padding: 9px 14px; font-size: .84rem; font-weight: 750; }
.evidence { margin: 36px 0 70px; padding: 34px 38px; background: var(--ink); color: var(--white); border-radius: 24px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 26px 44px; }
.evidence .eyebrow { color: #5eead4; }
.progress-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.progress-row strong { display: block; font-size: 2rem; }
.progress-row span { color: #bcccdc; font-size: .82rem; }
.bar { grid-column: 1 / -1; height: 10px; background: #334e68; border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--gold); transition: width .5s ease; }
.evidence > p:last-child { grid-column: 1 / -1; margin: -8px 0 0; color: #d9e2ec; }
footer { min-height: 90px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 6vw; color: var(--muted); font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; }
  .sprint-ring { width: 140px; }
  .workspace { grid-template-columns: 1fr; }
  .setup { border-right: 0; border-bottom: 1px solid var(--line); }
  .evidence { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  main { width: min(94vw, 1180px); }
  .hero { padding-top: 40px; }
  .progress-row { grid-template-columns: 1fr; }
  .message { max-width: 92%; }
  footer { padding: 22px 5vw; gap: 16px; flex-direction: column; align-items: flex-start; }
}

/* Desktop-window mode */
html, body { width: 100%; height: 100%; }
body { overflow: hidden; background: #dbe4e8; }
.desktop-stage {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(15,118,110,.15), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(242,184,75,.20), transparent 26%),
    linear-gradient(135deg, #eaf0ef 0%, #cbd9de 100%);
}
.desktop-stage::before {
  content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none;
  background-image: linear-gradient(rgba(16,42,67,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(16,42,67,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.app-window {
  container-type: size; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 40px)); height: min(800px, calc(100vh - 40px));
  min-width: 680px; min-height: 520px; max-width: 100vw; max-height: 100vh;
  display: flex; flex-direction: column; overflow: hidden; resize: both;
  border: 1px solid rgba(255,255,255,.72); border-radius: 15px; background: var(--paper); box-shadow: 0 24px 70px rgba(16,42,67,.22);
}
.app-window.maximized { inset: 0; width: 100vw !important; height: 100vh !important; max-width: none; max-height: none; transform: none !important; resize: none; border-radius: 0; }
.app-window.is-dragging { user-select: none; cursor: grabbing; }
.app-window[hidden] { display: none; }
.window-titlebar {
  flex: 0 0 48px; min-height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: #edf7f5; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.14); cursor: grab;
}
.window-identity { display: flex; align-items: center; gap: 10px; padding-left: 14px; min-width: 0; }
.window-identity strong, .window-identity small { display: block; }
.window-identity strong { font-size: .86rem; }
.window-identity small { color: #9fb3c8; font-size: .65rem; }
.app-mark { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; background: var(--teal); color: white; font-size: .7rem; font-weight: 900; }
.window-size { min-width: 112px; padding: 5px 12px; border-radius: 999px; text-align: center; color: #d9e2ec; background: rgba(255,255,255,.08); font-size: .74rem; font-variant-numeric: tabular-nums; }
.window-controls { justify-self: end; align-self: stretch; display: flex; }
.window-controls button { min-width: 58px; padding: 0 15px; border: 0; border-left: 1px solid rgba(255,255,255,.09); color: #edf7f5; background: transparent; font-size: .76rem; }
.window-controls button:hover { background: rgba(255,255,255,.12); }
.window-controls .close-button { min-width: 50px; font-size: 1.25rem; }
.window-controls .close-button:hover { background: #c43d4b; }
.app-frame { min-height: 0; flex: 1; display: grid; grid-template-rows: 54px minmax(0, 1fr) 40px; }
.app-window .topbar { min-height: 0; height: 54px; padding: 0 22px; position: static; background: rgba(255,255,255,.94); }
.app-window .brand { font-size: 1.08rem; }
.app-window .top-actions { font-size: .78rem; }
.app-window .text-button { margin-right: 10px; }
.app-content { min-height: 0; width: 100%; margin: 0; padding: 18px 22px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; overflow: hidden; }
.app-window .hero { min-height: 108px; padding: 0; display: grid; grid-template-columns: 1fr 92px; gap: 22px; align-items: center; }
.app-window .eyebrow { margin: 0 0 5px; font-size: .63rem; }
.app-window h1 { max-width: 880px; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.02; }
.app-window .lede { margin: 7px 0 0; max-width: 920px; line-height: 1.45; font-size: .84rem; }
.app-window .sprint-ring { width: 82px; height: 82px; border-width: 8px; }
.app-window .sprint-ring strong { font-size: 1.65rem; }
.app-window .sprint-ring span { font-size: .68rem; }
.app-window .workspace { min-height: 0; height: 100%; grid-template-columns: 285px minmax(0, 1fr); border-radius: 16px; box-shadow: 0 10px 28px rgba(16,42,67,.08); }
.app-window .setup { min-height: 0; padding: 18px 20px; overflow-y: auto; scrollbar-width: thin; }
.app-window h2 { margin: 0 0 12px; font-size: 1.15rem; }
.app-window label, .app-window legend { margin: 11px 0 5px; font-size: .72rem; }
.app-window select, .app-window textarea, .app-window input { padding: 8px 10px; border-radius: 9px; font-size: .78rem; }
.app-window textarea { resize: none; }
.app-window .confidence { gap: 6px; }
.app-window .confidence button { width: 34px; height: 32px; border-radius: 8px; font-size: .75rem; }
.app-window .primary { margin-top: 14px; padding: 9px; border-radius: 9px; font-size: .8rem; }
.app-window .privacy { margin: 9px 0 0; font-size: .64rem; }
.app-window .coach { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; }
.app-window .coach-header { padding: 15px 18px 11px; }
.app-window .coach-header h2 { margin: 0; }
.app-window .timer span { font-size: 1.15rem; }
.app-window .timer small { font-size: .65rem; }
.app-window .chat { min-height: 0; max-height: none; padding: 14px 18px; gap: 10px; overflow-y: auto; scrollbar-width: thin; }
.app-window .message { max-width: 80%; padding: 10px 12px; border-radius: 12px; font-size: .78rem; }
.app-window .speaker { font-size: .58rem; }
.app-window .reply { padding: 0 18px 9px; gap: 8px; }
.app-window .reply button { border-radius: 9px; padding: 0 16px; font-size: .75rem; }
.app-window .quick-actions { gap: 7px; padding: 0 18px 13px; }
.app-window .quick-actions button { padding: 6px 10px; font-size: .67rem; }
.app-window .evidence { margin: 0; padding: 13px 18px; border-radius: 14px; grid-template-columns: .9fr 1.2fr; gap: 10px 28px; }
.app-window .evidence h2 { margin: 0; font-size: .95rem; }
.app-window .progress-row { gap: 12px; }
.app-window .progress-row strong { font-size: 1.15rem; }
.app-window .progress-row span { font-size: .62rem; }
.app-window .bar { height: 6px; }
.app-window .evidence > p:last-child { margin: 0; font-size: .68rem; }
.app-footer { min-height: 0; padding: 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; border-top: 1px solid var(--line); color: var(--muted); background: #fff; font-size: .65rem; }
.app-footer > span:last-child { text-align: right; }
.footer-center { display: flex; align-items: center; gap: 7px; color: var(--teal); font-weight: 750; }
.footer-center .status-dot { width: 6px; height: 6px; box-shadow: none; }
.app-launcher { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 20px; border: 0; border-radius: 12px; color: white; background: var(--ink); box-shadow: var(--shadow); font-weight: 800; }
.app-launcher span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 7px; background: var(--teal); font-size: .7rem; }

@container (max-width: 840px) {
  .window-identity small { display: none; }
  .window-controls button { min-width: 45px; padding: 0 9px; }
  .app-window .workspace { grid-template-columns: 235px minmax(0, 1fr); }
  .app-window .setup { padding: 15px; }
  .app-window .sprint-ring { display: none; }
  .app-window .hero { grid-template-columns: 1fr; }
  .app-footer { grid-template-columns: 1fr auto; }
  .app-footer > span:last-child { display: none; }
}
@container (max-height: 660px) {
  .app-frame { grid-template-rows: 48px minmax(0, 1fr) 34px; }
  .app-content { padding: 10px 16px; gap: 9px; }
  .app-window .hero { min-height: auto; }
  .app-window .hero .lede, .app-window .sprint-ring { display: none; }
  .app-window h1 { font-size: 1.55rem; }
  .app-window .evidence { padding: 9px 14px; grid-template-columns: .8fr 1.2fr; }
  .app-window .evidence .bar, .app-window .evidence > p:last-child { display: none; }
  .app-window .setup { padding-block: 12px; }
}
@media (max-width: 700px), (max-height: 540px) {
  .app-window { inset: 0; width: 100vw; height: 100vh; min-width: 0; min-height: 0; transform: none; resize: none; border-radius: 0; }
  .window-titlebar { grid-template-columns: 1fr auto; }
  .window-size { display: none; }
  .window-controls #normalButton { display: none; }
  .app-content { overflow-y: auto; grid-template-rows: auto auto auto; }
  .app-window .workspace { height: 600px; grid-template-columns: 1fr; grid-template-rows: auto minmax(340px, 1fr); }
  .app-window .setup { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-window .evidence { grid-template-columns: 1fr; }
}

/* Professional multilingual finish */
:root {
  --ink: #0b2239;
  --muted: #64748b;
  --paper: #f7f9fc;
  --teal: #0d9488;
  --teal-light: #ccfbf1;
  --gold: #f6bd4a;
  --line: #d7e0ea;
  --shadow: 0 28px 80px rgba(8, 30, 52, .22);
  --accent-2: #087f79;
  --stage-a: #eef5f7;
  --stage-b: #d7e3e8;
  --stage-c: #e8edf2;
  --panel-tint: #e8f5f4;
  --evidence-a: #0b2239;
  --evidence-b: #123b5d;
}
body {
  font-family: "Segoe UI Variable Text", "Noto Sans", "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
.desktop-stage {
  background:
    radial-gradient(circle at 12% 12%, rgba(20,184,166,.15), transparent 27%),
    radial-gradient(circle at 86% 82%, rgba(59,130,246,.13), transparent 30%),
    linear-gradient(145deg, var(--stage-a) 0%, var(--stage-b) 52%, var(--stage-c) 100%);
}
.desktop-stage::before { opacity: .18; background-size: 32px 32px; }
.app-window {
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(248,250,252,.98);
  box-shadow: 0 30px 90px rgba(8,30,52,.24), 0 2px 10px rgba(8,30,52,.12);
}
.window-titlebar {
  direction: ltr;
  background: linear-gradient(90deg, #0b2239, #102f4d 58%, #0c2843);
}
.app-mark, .app-launcher span { background: linear-gradient(135deg, var(--teal), var(--accent-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.window-size { color: #e2e8f0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); }
.app-window .topbar {
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 0 rgba(15,23,42,.05);
}
.top-actions { gap: 9px; flex-wrap: nowrap; white-space: nowrap; }
.app-window .top-actions { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.app-window .top-actions::-webkit-scrollbar { display: none; }
.language-control { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); pointer-events: none; }
.language-buttons {
  direction: ltr; display: inline-flex; flex: 0 0 auto; align-items: center; height: 34px;
  padding: 3px; border: 1px solid #cbd8e5; border-radius: 10px; background: #f3f6f9;
  box-shadow: 0 2px 7px rgba(15,23,42,.06);
}
.language-buttons button {
  height: 26px; padding: 0 9px; border: 0; border-radius: 7px; color: #52667a;
  background: transparent; font-size: .68rem; font-weight: 750; white-space: nowrap;
  transition: color .16s, background .16s, box-shadow .16s;
}
.language-buttons button:hover { color: var(--ink); background: rgba(255,255,255,.72); }
.language-buttons button.active { color: #fff; background: linear-gradient(135deg, var(--teal), var(--accent-2)); box-shadow: 0 3px 8px rgba(15,23,42,.16); }
.language-control { margin: 0 12px 0 0; position: relative; }
.language-control::before {
  content: "◉"; position: absolute; left: 11px; top: 50%; transform: translateY(-52%);
  color: var(--teal); font-size: .66rem; pointer-events: none; z-index: 1;
}
.language-control select {
  min-width: 138px; height: 34px; margin: 0; padding: 0 32px 0 27px;
  border: 1px solid #cbd8e5; border-radius: 9px; color: var(--ink);
  background: linear-gradient(#fff,#f8fafc); box-shadow: 0 2px 7px rgba(15,23,42,.06);
  font-size: .76rem; font-weight: 700; cursor: pointer;
}
.theme-control { position: relative; margin-right: 8px; }
.theme-button {
  height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  border: 1px solid #cbd8e5; border-radius: 9px; color: var(--ink); background: linear-gradient(#fff,#f8fafc);
  box-shadow: 0 2px 7px rgba(15,23,42,.06); font-size: .74rem; font-weight: 750;
}
.palette-icon { color: var(--teal); font-size: 1rem; }
.theme-panel {
  position: fixed; z-index: 1000; top: 0; left: 0; right: auto; direction: ltr;
  display: grid; grid-template-columns: repeat(10, 28px); gap: 7px;
  padding: 11px; border: 1px solid #cbd8e5; border-radius: 12px;
  background: rgba(255,255,255,.98); box-shadow: 0 18px 45px rgba(15,23,42,.18);
}
.theme-panel[hidden] { display: none; }
.theme-panel button {
  width: 28px; height: 28px; padding: 0; border: 3px solid #fff; border-radius: 50%;
  background: var(--swatch); box-shadow: 0 0 0 1px #b8c8d8, 0 3px 7px rgba(15,23,42,.12);
  transition: transform .16s, box-shadow .16s;
}
.theme-panel button:hover { transform: translateY(-2px) scale(1.06); }
.theme-panel button.active { box-shadow: 0 0 0 2px var(--ink), 0 4px 9px rgba(15,23,42,.18); }
.status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(34,197,94,.13); }
.app-window .hero { border-radius: 14px; }
.app-window h1 { color: #0b2239; letter-spacing: -.045em; }
.app-window .workspace { border-color: #d4dfeb; box-shadow: 0 14px 36px rgba(30,64,96,.10); }
.app-window .setup { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-tint) 76%, white), var(--panel-tint)); scrollbar-color: #9db5c6 transparent; }
.app-window select, .app-window textarea, .app-window input {
  border-color: #b8c8d8; box-shadow: inset 0 1px 2px rgba(15,23,42,.025); transition: border-color .18s, box-shadow .18s;
}
.app-window select:focus, .app-window textarea:focus, .app-window input:focus {
  outline: none; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.13);
}
.app-window .primary { background: linear-gradient(135deg, var(--teal), var(--accent-2)); box-shadow: 0 6px 16px rgba(13,148,136,.2); transition: transform .18s, box-shadow .18s; }
.app-window .primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(13,148,136,.28); }
.app-window .privacy { display: none; }
.coach-message { background: linear-gradient(135deg, #e6fffa, #ecfeff); border: 1px solid rgba(20,184,166,.12); }
.learner-message { background: linear-gradient(135deg, #102f4d, #0b2239); }
.app-window .reply button { background: linear-gradient(135deg, #102f4d, #0b2239); }
.app-window .quick-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.app-window .quick-actions::-webkit-scrollbar { display: none; }
.app-window .quick-actions button { flex: 0 0 auto; border-color: #cbd8e5; transition: color .18s, border-color .18s, background .18s; }
.app-window .quick-actions button:hover { color: #0b2239; border-color: #72cfc6; background: #f0fdfa; }
.app-window .evidence { background: linear-gradient(120deg, var(--evidence-a), var(--evidence-b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.app-window .bar { background: rgba(148,163,184,.28); }
.app-footer { background: rgba(255,255,255,.97); }
.app-launcher { background: linear-gradient(135deg, #102f4d, #0b2239); }
.app-launcher b { font-weight: 750; }
.rtl .app-frame { direction: rtl; }
.rtl .language-control { margin: 0 0 0 12px; }
.rtl .theme-control { margin: 0 0 0 8px; }
.rtl .theme-panel { right: auto; }
.rtl .language-control::before { left: auto; right: 11px; }
.rtl .language-control select { padding: 0 27px 0 32px; }
.rtl .timer { text-align: left; }
.rtl .app-footer > span:last-child { text-align: left; }
.rtl .footer-center { direction: rtl; }

@container (min-height: 730px) {
  .app-window .setup { overflow-y: hidden; }
}

html[data-theme="emerald"] { --ink:#073b36; --teal:#059669; --accent-2:#047857; --teal-light:#d1fae5; --gold:#f59e0b; --stage-a:#effcf6; --stage-b:#d4e9df; --stage-c:#edf5f1; --panel-tint:#e4f7ef; --evidence-a:#073b36; --evidence-b:#0c5b4f; }
html[data-theme="violet"] { --ink:#281547; --teal:#7c3aed; --accent-2:#6d28d9; --teal-light:#ede9fe; --gold:#f59e0b; --stage-a:#f7f4ff; --stage-b:#e3ddf2; --stage-c:#f0edf7; --panel-tint:#f0ebff; --evidence-a:#281547; --evidence-b:#4c2780; }
html[data-theme="rose"] { --ink:#3f1522; --teal:#e11d48; --accent-2:#be123c; --teal-light:#ffe4e6; --gold:#f59e0b; --stage-a:#fff5f7; --stage-b:#efdde2; --stage-c:#f8edef; --panel-tint:#fff0f2; --evidence-a:#3f1522; --evidence-b:#7f1d3d; }
html[data-theme="amber"] { --ink:#3b2810; --teal:#d97706; --accent-2:#b45309; --teal-light:#fef3c7; --gold:#fbbf24; --stage-a:#fffbeb; --stage-b:#ece1c9; --stage-c:#f7f1e5; --panel-tint:#fff6d9; --evidence-a:#3b2810; --evidence-b:#684516; }
html[data-theme="sky"] { --ink:#102a43; --teal:#0284c7; --accent-2:#0369a1; --teal-light:#e0f2fe; --gold:#f59e0b; --stage-a:#f0f9ff; --stage-b:#d8e8f1; --stage-c:#edf5f9; --panel-tint:#eaf7ff; --evidence-a:#102a43; --evidence-b:#124d73; }
html[data-theme="graphite"] { --ink:#111827; --teal:#64748b; --accent-2:#475569; --teal-light:#e2e8f0; --gold:#f59e0b; --stage-a:#f8fafc; --stage-b:#dde2e8; --stage-c:#eef0f3; --panel-tint:#edf0f4; --evidence-a:#111827; --evidence-b:#334155; }
html[data-theme="cocoa"] { --ink:#3a241d; --teal:#9a5b3a; --accent-2:#7c452d; --teal-light:#f5e6dc; --gold:#d9a441; --stage-a:#faf6f2; --stage-b:#e9ddd5; --stage-c:#f4eee9; --panel-tint:#f5e9e1; --evidence-a:#3a241d; --evidence-b:#674032; }
html[data-theme="nordic"] { --ink:#243447; --teal:#0f766e; --accent-2:#115e59; --teal-light:#d9f3ee; --gold:#d7a73b; --stage-a:#f2f7f6; --stage-b:#d5e2e1; --stage-c:#ebf0f1; --panel-tint:#e5f2ef; --evidence-a:#243447; --evidence-b:#34566a; }
html[data-theme="midnight"] { --ink:#0f172a; --teal:#4f46e5; --accent-2:#4338ca; --teal-light:#e0e7ff; --gold:#fbbf24; --stage-a:#edf0ff; --stage-b:#d5d9eb; --stage-c:#e9ebf4; --panel-tint:#edf0ff; --evidence-a:#0f172a; --evidence-b:#272b57; }

/* Full-app color theme system */
:root {
  --surface: color-mix(in srgb, var(--panel-tint) 22%, white);
  --surface-soft: color-mix(in srgb, var(--panel-tint) 58%, white);
  --surface-strong: color-mix(in srgb, var(--panel-tint) 78%, white);
  --input-surface: color-mix(in srgb, var(--panel-tint) 10%, white);
  --theme-border: color-mix(in srgb, var(--teal) 20%, #cbd5e1);
  --theme-muted: color-mix(in srgb, var(--ink) 62%, white);
  --theme-shadow: color-mix(in srgb, var(--evidence-a) 22%, transparent);
}

body { color: var(--ink); background: var(--stage-b); }
.desktop-stage {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 29%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 31%),
    linear-gradient(145deg, var(--stage-a) 0%, var(--stage-b) 52%, var(--stage-c) 100%);
}
.desktop-stage::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
}
.app-window {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--teal) 20%, white);
  background: var(--surface);
  box-shadow: 0 30px 90px var(--theme-shadow), 0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent);
}
.window-titlebar { background: linear-gradient(100deg, var(--evidence-a), var(--evidence-b) 62%, var(--accent-2)); }
.window-identity small { color: color-mix(in srgb, var(--teal-light) 72%, white); }
.app-frame { background: linear-gradient(145deg, var(--surface), var(--surface-soft)); }
.app-window .topbar {
  color: var(--ink);
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.app-content { background: linear-gradient(145deg, color-mix(in srgb, var(--stage-a) 58%, white), var(--surface-soft)); }
.app-window h1, .brand { color: var(--ink); }
.lede, .top-actions, .timer small, .sprint-ring span, .app-footer { color: var(--theme-muted); }
.app-window .sprint-ring {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--teal-light);
  border-top-color: var(--teal);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--teal) 18%, transparent);
}
.app-window .workspace {
  color: var(--ink);
  border-color: var(--theme-border);
  background: var(--surface);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--evidence-a) 13%, transparent);
}
.app-window .setup {
  border-color: var(--theme-border);
  background: linear-gradient(180deg, var(--surface-soft), var(--surface-strong));
  scrollbar-color: color-mix(in srgb, var(--teal) 35%, #94a3b8) transparent;
}
.app-window .coach, .app-window .coach-header, .app-window .chat, .app-window .reply, .app-window .quick-actions { background: var(--surface); }
.app-window .coach-header { border-color: var(--theme-border); }
.app-window select, .app-window textarea, .app-window input {
  color: var(--ink);
  border-color: var(--theme-border);
  background: var(--input-surface);
}
.app-window select:focus, .app-window textarea:focus, .app-window input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 17%, transparent);
}
.confidence button, .app-window .quick-actions button {
  color: var(--ink);
  border-color: var(--theme-border);
  background: var(--input-surface);
}
.confidence button.selected { color: white; border-color: var(--evidence-a); background: var(--evidence-a); }
.app-window .primary { background: linear-gradient(135deg, var(--teal), var(--accent-2)); box-shadow: 0 7px 18px color-mix(in srgb, var(--teal) 30%, transparent); }
.coach-message {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--teal) 22%, transparent);
  background: linear-gradient(135deg, var(--teal-light), var(--surface-soft));
}
.learner-message, .app-window .reply button { color: white; background: linear-gradient(135deg, var(--evidence-b), var(--evidence-a)); }
.app-window .quick-actions button { color: var(--teal); }
.app-window .quick-actions button:hover { color: var(--ink); border-color: var(--teal); background: var(--teal-light); }
.app-window .evidence { background: linear-gradient(120deg, var(--evidence-a), var(--evidence-b), var(--accent-2)); }
.app-footer { border-color: var(--theme-border); background: var(--surface-soft); }
.language-buttons { border-color: var(--theme-border); background: var(--surface-strong); }
.language-buttons button { color: var(--theme-muted); }
.language-buttons button:hover { color: var(--ink); background: var(--input-surface); }
.theme-button {
  color: var(--ink);
  border-color: var(--theme-border);
  background: linear-gradient(var(--input-surface), var(--surface-soft));
}
.theme-panel {
  border-color: var(--theme-border);
  background: var(--surface);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--evidence-a) 24%, transparent);
}
.theme-panel button { border-color: var(--surface); }
.app-launcher { background: linear-gradient(135deg, var(--evidence-a), var(--accent-2)); }

.desktop-stage, .app-window, .window-titlebar, .app-frame, .topbar, .app-content,
.workspace, .setup, .coach, .coach-header, .chat, .reply, .quick-actions,
.sprint-ring, .evidence, .app-footer, .language-buttons, .theme-button, .theme-panel,
select, textarea, input, button {
  transition: background-color .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* Balanced offline typography for Bangla */
html[lang="bn"] body,
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] select,
html[lang="bn"] textarea {
  font-family: "Nirmala UI", "Noto Sans Bengali", "Vrinda", "Segoe UI", sans-serif;
}
html[lang="bn"] .app-window h1 {
  max-width: 790px;
  font-size: clamp(1.7rem, 2.45vw, 2.18rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  font-weight: 720;
}
html[lang="bn"] .app-window h2 {
  font-size: 1.02rem;
  line-height: 1.24;
  letter-spacing: -.01em;
  font-weight: 720;
}
html[lang="bn"] .app-window .lede { font-size: .8rem; line-height: 1.5; }
html[lang="bn"] .app-window label,
html[lang="bn"] .app-window legend { font-size: .7rem; }
html[lang="bn"] .app-window .message,
html[lang="bn"] .app-window select,
html[lang="bn"] .app-window textarea,
html[lang="bn"] .app-window input { font-size: .76rem; }
html[lang="bn"] .app-window .primary,
html[lang="bn"] .app-window .reply button,
html[lang="bn"] .app-window .quick-actions button { font-size: .7rem; }

@container (max-height: 660px) {
  html[lang="bn"] .app-window h1 { font-size: 1.45rem; }
}