/* Product surfaces share the homepage's Spatial palette and typography. */
:root {
  --ink: #162d51;
  --ink-soft: #5e6e88;
  --ink-faint: #73839d;
  --paper: #fff;
  --paper-warm: #f9fbff;
  --line: #dce5f3;
  --accent: #3158e6;
  --accent-bright: #365bfa;
  --accent-soft: #eef3ff;
  --navy: #0d1b36;
  --radius: 16px;
  --shadow-sm: 0 7px 24px rgba(22, 45, 81, .05);
  --shadow-lg: 0 24px 64px rgba(22, 45, 81, .12);
  --serif: "DM Serif Display", Georgia, serif;
}

body {
  font-family: Manrope, Arial, sans-serif;
  background: var(--paper-warm);
  color: var(--ink);
}

nav { background: rgba(249, 251, 255, .94); border-bottom-color: var(--line); }
.nav-inner { height: 72px; }
.platform-app, .product-main { min-height: calc(100vh - 72px); }
.logo {
  gap: 9px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.065em;
  text-transform: lowercase;
}
.logo svg { width: 29px; height: 29px; }
.logo svg ellipse { stroke: currentColor; }
.logo-ring {
  display: block;
  width: 29px;
  height: 23px;
  border: 3px solid currentColor;
  transform: rotate(-32deg);
}
.nav-links a { color: var(--ink-soft); font-size: 12px; }
.nav-links a:hover, .workspace-signout:hover { color: var(--accent); }
.workspace-account { border-color: var(--line); background: #fff; }

.btn, .mini-btn, .form-control, .card, .voice-choice { font-family: inherit; }
.btn { border-radius: 6px; font-size: 12px; font-weight: 700; }
.btn-primary, .btn-accent { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 9px 24px rgba(49, 88, 230, .2); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-lg { padding: 14px 22px; font-size: 13px; border-radius: 6px; }
.btn:focus-visible, .mini-btn:focus-visible, .icon-btn:focus-visible,
.board-colors button:focus-visible, .board-tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mini-btn { border-radius: 6px; margin-right: 0; }
.card, .class-card, .assignment-card, .student-panel {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card { background: #fff; }
.form-control, .voice-choice { border-color: var(--line); border-radius: 7px; }
.form-control:focus, .board-title-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49, 88, 230, .13);
}
.field-label, .section-label, .kicker { letter-spacing: .13em; }
.kicker { color: var(--accent); font-size: 10px; }
.section-label { color: var(--accent); font-size: 10px; }
.field-label { color: var(--ink-soft); font-size: 11px; }
.lede { color: var(--ink-soft); }
.product-main {
  background:
    radial-gradient(780px 390px at 88% 0, #eaf0ff 0, transparent 75%),
    var(--paper-warm);
}
.product-heading h1, .hero-lite h1, .join-card h1,
.waiting-card h1, .recap-card h1, .tutor-intro h1,
.platform-heading h1, .account-copy h1 {
  font-weight: 500;
  letter-spacing: -.055em;
}
.product-heading h1 em, .hero-lite h1 em, .tutor-intro h1 em,
.account-copy h1 em {
  color: var(--accent);
  font-family: var(--serif);
  font-weight: 400;
}
.product-heading, .hero-lite { position: relative; }
.setup-card, .join-card, .tutor-start { border-top: 2px solid var(--accent); }
.platform-body { background: var(--paper-warm); }
.platform-insight { border-color: #d8e3ff; }
.platform-side { background: #f1f5ff; }
.side-link.active, .side-link:hover, .side-class:hover { background: #fff; color: var(--accent); }
.platform-metric.warm b { color: var(--accent); }
.reconnect-banner { background: var(--accent); color: #fff; }
@keyframes reconnect-pulse { to { background: #7894fa; } }
.board-tool.selected { background: var(--accent); }
.board-studio { background: #f1f5ff; }
.margin-board-bar { border-color: #d8e3ff; background: linear-gradient(105deg, #f1f5ff, #fff); }
.margin-spark { background: var(--accent); }
.tutor-live-coach { border-color: #cad9ff; }
.whiteboard, .practice-canvas-stage {
  background-image: radial-gradient(circle, #d6e1f1 1.1px, transparent 1.1px);
}

/* Practice is a two-panel workbench. Keep the drawing surface visually quiet. */
.practice-main .product-shell { max-width: 1320px; }
.practice-main .hero-lite { padding: 58px 0 42px; }
.practice-main .hero-lite .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #e2eaff; }
.practice-main .hero-lite h1 { max-width: 960px; font-size: clamp(45px, 5.7vw, 76px); line-height: 1.06; }
.practice-main .hero-lite h1 em { font-style: italic; }
.practice-main .hero-lite .lede { max-width: 590px; margin-top: 17px; font-size: 15px; line-height: 1.8; }
.practice-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); gap: 20px; }
.practice-grid aside { gap: 16px; }
.practice-board-card { padding: 28px; gap: 18px; }
.practice-board-card .board-head h2, .conversation-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -.045em; }
.practice-board-card .board-head-actions { gap: 12px; }
.practice-board-card .board-count { color: var(--ink-soft); }
.practice-problem-row .image-drop {
  margin-bottom: 0;
  padding: 15px 18px;
  border-color: #c5d4ee;
  border-radius: 8px;
  background: #f7f9ff;
}
.practice-problem-row .image-drop:hover, .practice-problem-row .image-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.practice-board-card .board-toolbar { padding: 10px; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9ff; }
.practice-board-card .board-toolbar .mini-btn { padding: 8px 11px; background: #fff; }
.practice-board-card .board-toolbar .mini-btn.selected { background: var(--accent); color: #fff; }
.practice-board-card .board-toolbar .form-control { padding: 8px 10px; }
.practice-canvas-stage { border-radius: 8px; border-color: #c9d7ee; box-shadow: inset 0 0 0 1px #f6f9ff; }
.practice-canvas-stage .whiteboard { height: clamp(340px, 41vw, 520px); }
.practice-question-label { gap: 8px; }
.practice-question-label .form-control { min-height: 74px; }
.practice-main .mode-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.practice-main .mode-grid .btn { min-height: 44px; padding: 10px 8px; white-space: normal; }
.practice-main .privacy-note { margin-top: 0; text-align: left; line-height: 1.6; }
.practice-personalize { border-top: 2px solid var(--accent); }
.personalize-choice { border-radius: 8px; }
.personalize-status { color: #1d6755; background: #eaf8f1; }
.conversation-card { padding: 26px; border-top: 2px solid var(--accent); }
.conversation-head { gap: 13px; padding-bottom: 18px; }
.conversation-head .voice-controls { flex-wrap: wrap; justify-content: flex-end; }
.voice-toggle.selected { background: var(--accent-soft); border-color: #c9d7ff; color: var(--accent); }
.transcript { min-height: 375px; }
.empty-chat { color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.empty-chat span { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border: 1px solid #d4dfff; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 27px; }
.followup .btn { min-width: 62px; }
.key-card { position: relative; min-height: 142px; overflow: hidden; background: radial-gradient(circle at 100% 0, #223e78, #102345 68%); border-color: #25457f; color: #fff; }
.key-card .section-label { color: #afc2ff; }
.key-card p { max-width: 275px; color: #d4dfff; font-size: 13px; line-height: 1.7; }
.key-card-mark { position: absolute; right: 16px; bottom: -40px; color: #ffffff14; font: italic 140px var(--serif); line-height: 1; transform: rotate(-20deg); pointer-events: none; }

/* Student home has its own sidebar system, so map its accents explicitly. */
.student-dashboard {
  --student-nav: 72px;
  --s-line: #e4eaf5;
  --s-panel-line: #dce5f3;
  --s-track: #edf2fc;
  --s-chip: #f2f5fb;
  --s-tint-orange: #eaf0ff;
  --s-tint-orange-soft: #eef3ff;
  --s-icon-orange: #3158e6;
  --s-side-label: #a8bce0;
  --s-side-dim: #b2c4e3;
  background: var(--paper-warm);
}
.student-dashboard .platform-side { background: #102345; }
.student-side-brand span {
  display: block;
  width: 34px;
  height: 27px;
  margin: 7px 3px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  transform: rotate(-32deg);
}
.student-dashboard .side-link.active { background: #213b6d; box-shadow: inset 3px 0 0 #91aaff; }
.student-help-card { border-color: #36517f; background: #1b335c; }
.student-help-card > b { background: #2b497d; }
.student-profile > span { background: #dbe6ff; color: var(--accent); }
.student-welcome .kicker, .student-panel-label { color: var(--accent); }
.student-dashboard > nav #nav-practice { border-color: #d3def2; color: var(--ink); }
.student-dashboard > nav #nav-live { border-color: var(--accent); background: var(--accent); }
.student-dashboard .student-panel-label em { color: var(--accent); }
.student-dashboard .math-mark, .student-dashboard .math-mark small { color: var(--accent); }
.student-dashboard .up-next-footer a { background: var(--accent); }
.student-dashboard .student-section-head > span { color: var(--accent); }
.student-dashboard .student-assignment-row.soon em { color: var(--accent); }

@media (max-width: 900px) {
  .practice-main .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .practice-grid { grid-template-columns: 1fr; }
  .conversation-card { min-height: 520px; }
}
@media (max-width: 600px) {
  .nav-inner { height: 64px; }
  .platform-app, .product-main { min-height: calc(100vh - 64px); }
  .student-dashboard { --student-nav: 64px; }
  .logo { font-size: 22px; }
  .practice-main .hero-lite { padding: 42px 0 32px; }
  .practice-main .hero-lite h1 { font-size: clamp(40px, 11vw, 58px); }
  .practice-board-card, .conversation-card { padding: 20px; }
  .practice-board-card .board-head { align-items: start; flex-direction: column; }
  .practice-board-card .board-toolbar .form-control { flex-basis: 100%; }
  .practice-canvas-stage .whiteboard { height: 340px; }
  .practice-main .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversation-head .voice-controls { justify-content: flex-start; }
  .followup { flex-direction: row; flex-wrap: wrap; }
  .followup .form-control { flex: 1 1 150px; }
}