/* RepetHelper product system v3. Visual-only layer over the stable application contracts. */
:root {
  --bg: #f6f5f2;
  --bg-accent: #efede8;
  --surface: #fff;
  --surface-2: #f1f0ec;
  --surface-3: #e7e5df;
  --line: #dedbd4;
  --line-strong: #bdb9b0;
  --text: #1d1d1b;
  --text-soft: #45443f;
  --muted: #73716a;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-soft: #eeedff;
  --accent: #6558d8;
  --accent-soft: #f0effa;
  --success: #137a65;
  --success-soft: #e4f4ee;
  --warning: #a15c08;
  --warning-soft: #fff0d8;
  --danger: #b43b4d;
  --danger-soft: #fbeaec;
  --focus: #3329d8;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 14px;
  --shadow-sm: 0 6px 18px rgba(29,29,27,.08);
  --shadow-lg: 0 22px 54px rgba(29,29,27,.16);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --control-sm: 36px;
  --control-md: 42px;
  --control-lg: 48px;
}

:root[data-theme="dark"] {
  --bg: #151716;
  --bg-accent: #1b1e1c;
  --surface: #202320;
  --surface-2: #292c29;
  --surface-3: #343833;
  --line: #393d38;
  --line-strong: #575c55;
  --text: #f6f4ef;
  --text-soft: #d8d5cd;
  --muted: #aaa79f;
  --primary: #7770f4;
  --primary-hover: #8983ff;
  --primary-soft: #302e53;
  --accent: #a39bf8;
  --accent-soft: #312f48;
  --success: #67c5ad;
  --success-soft: #203b34;
  --warning: #e3a34f;
  --warning-soft: #45331d;
  --danger: #ef8391;
  --danger-soft: #48292f;
  --focus: #b3afff;
  --shadow-sm: 0 8px 22px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.42);
}

html { background: var(--bg); }
body { color: var(--text); background: var(--bg); font-size: 15px; line-height: 1.55; }
body:not(.landing-page):not(.auth-page):not(.control-page):not(.whiteboard-page) { background-image: none; }
body, button, input, select, textarea { font-family: Onest, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, h4, p { text-wrap: pretty; }
h1 { font-size:clamp(2.1rem,4vw,3.4rem);font-weight:600;line-height:1.02;letter-spacing:-.052em; }
h2 { font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;line-height:1.15;letter-spacing:-.03em; }
h3 { font-size:1rem;font-weight:600;letter-spacing:-.015em; }
.eyebrow, .section-kicker { color: var(--muted); font-size: .72rem; font-weight: 600; line-height: 1.35; letter-spacing: .015em; text-transform: none; }
a { text-underline-offset: 3px; }
.container { width: min(1280px, calc(100% - 64px)); }
.container.narrow { width: min(900px, calc(100% - 48px)); }
.page { padding: var(--space-7) 0 var(--space-8); }
.page-header { align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-7); }
.page-header h1 { margin: 4px 0 8px; }
.page-header p:last-child { color: var(--muted); }

/* Core components */
.panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: none; }
.button { min-height: var(--control-md); border-radius: var(--radius-md); font-weight: 600; box-shadow: none; transform: none; transition: background-color .16s ease,border-color .16s ease,color .16s ease; }
.button:hover { transform: none; box-shadow: none; }
.button.primary { color:#fff;background:var(--primary);border-color:var(--primary);box-shadow:none; }
.button.primary:hover { background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:none; }
:root[data-theme="dark"] .button.primary { color: #121212; }
.button.secondary { color: var(--text); background: var(--surface); border-color: var(--line); }
.button.secondary:hover { background: var(--surface-2); border-color: var(--line-strong); }
.button.ghost { color: var(--text-soft); background: transparent; border-color: transparent; }
.button.danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb,var(--focus) 28%,transparent); outline-offset: 2px; }
input, select, textarea { max-width: 100%; border-color: var(--line-strong); border-radius: var(--radius-md); color: var(--text); background: var(--surface); box-shadow: none; }
input, select { min-height: var(--control-md); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb,var(--focus) 14%,transparent); }
.choice-card { border-radius: var(--radius-md); background: var(--surface); border-color: var(--line); }
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.tag, .status-pill, .payment-pill, .private-badge { border-radius: 999px; box-shadow: none; }
.alert { border-radius: var(--radius-md); box-shadow: none; }
.file-picker-label { display:inline-flex;align-items:center;gap:8px; }.file-picker-label .ui-icon { width:16px;height:16px; }
.popover-panel, dialog > div, .account-menu-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.empty { min-height: 150px; color: var(--muted); background: transparent; }
.empty::before { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }

/* Shared navigation */
.topbar { min-height: 64px; padding-inline: max(24px,calc((100vw - 1360px)/2)); border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--bg) 94%,transparent); box-shadow: none; backdrop-filter: none; }
.brand { color:var(--text);font-weight:600;letter-spacing:-.025em; }
.brand img { width: 28px; height: 28px; }
.nav-links { gap: 24px; align-self: stretch; }
.nav-links a { display:grid;place-items:center;position:relative;padding:0;color:var(--muted);border-radius:0;background:transparent;font-weight:500; }
.nav-links a:hover { color: var(--text); background: transparent; }
.nav-links a.active { color: var(--text); background: transparent; }
.nav-links a.active::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--primary); }
.theme-toggle, .account-summary { border-color: var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; }
.site-footer { border-top: 1px solid var(--line); }

/* Product dashboard */
.teacher-workspace-page, .student-workspace-page { background: var(--bg); }
.teacher-workspace-page .page, .student-workspace-page .page { padding-top: var(--space-7); }
.workspace-hero { margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.workspace-hero h1 { max-width: 820px; }
.workspace-summary { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: var(--space-6); border-block: 1px solid var(--line); }
.workspace-summary .stat { min-height: 92px; padding: 18px 24px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.workspace-summary .stat:last-child { border-right: 0; }
.workspace-summary .stat:hover { background: var(--surface); }
.workspace-summary .stat-icon { width: 32px; height: 32px; flex-basis: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--text-soft); background: transparent; }
.workspace-summary .stat strong { font-size:1.75rem;font-weight:600;letter-spacing:-.05em; }
.workspace-summary .stat small { color: var(--muted); }
.workspace-summary .arrow { opacity: .55; }
.dashboard-grid { grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-5); align-items: stretch; }
.teacher-workspace-page .workspace-schedule { display:grid; grid-template-columns:190px minmax(0,1fr) 250px; gap:var(--space-4); align-items:start; }
.schedule-rail { padding:18px 0; border-block:1px solid var(--line); }
.schedule-rail-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }.schedule-rail-head span { color:var(--muted); font-size:.7rem; }.schedule-rail-head strong { font-size:.85rem; }
.mini-weekdays,.mini-month { display:grid; grid-template-columns:repeat(7,1fr); }.mini-weekdays span { padding:5px 0; color:var(--muted); font-size:.58rem; text-align:center; text-transform:uppercase; }.mini-month a { position:relative; display:grid; place-items:center; aspect-ratio:1; color:var(--text-soft); border-radius:50%; font-size:.68rem; text-decoration:none; }.mini-month a:hover { background:var(--surface-2); }.mini-month a.muted { opacity:.3; }.mini-month a.today { color:#fff; background:var(--primary); }.mini-month a.busy:not(.today)::after { content:""; position:absolute; bottom:2px; width:3px; height:3px; border-radius:50%; background:var(--primary); }
.schedule-rail-key { display:grid; gap:7px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.66rem; }.schedule-rail-key span { display:flex; align-items:center; gap:7px; }.schedule-rail-key i { width:7px;height:7px;border-radius:50%;background:var(--primary); }.schedule-rail-key i.past { background:var(--line-strong); }.schedule-rail-key i.cancelled { background:var(--danger); }
.workspace-agenda, .side-panel { padding: var(--space-5); }
.upcoming-item, .history-row, .student-subscription-row { border-radius: 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
.student-lesson-row.history-row .lesson-indicators { flex-direction:row; }
.upcoming-item:hover, .history-row:hover { background: var(--surface-2); }
.workspace-invite { display:flex; justify-content:space-between; gap:var(--space-5); align-items:center; margin-top:var(--space-6); padding:var(--space-5) 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.student-profile-hero { padding:0 0 var(--space-5); border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.learning-progress { display:grid; grid-template-columns:repeat(3,minmax(130px,1fr)) 2fr; gap:0; margin:0 0 var(--space-6); border-block:1px solid var(--line); }
.progress-stat { min-height:92px; display:flex; flex-direction:column; justify-content:center; padding:16px 22px; border-right:1px solid var(--line); }.progress-stat strong { font-size:1.75rem; line-height:1; letter-spacing:-.05em; }.progress-stat span { margin-top:7px; color:var(--muted); font-size:.72rem; }
.progress-milestones { display:grid; grid-template-columns:1fr 1fr; gap:7px; align-content:center; padding:14px 20px; }.progress-milestones > span { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:.7rem; }.progress-milestones .ui-icon { width:13px;height:13px;opacity:.3; }.progress-milestones > span.reached { color:var(--success); }.progress-milestones > span.reached .ui-icon { opacity:1; }
.student-workspace-section { box-shadow:none; }.student-overview-grid { gap:var(--space-4); }.student-overview-card { padding:var(--space-5); }
.student-progress-summary { display:grid;grid-template-columns:repeat(4,1fr);margin:-16px 0 var(--space-6);border-block:1px solid var(--line); }.student-progress-summary > div { min-height:82px;display:flex;flex-direction:column;justify-content:center;padding:14px 20px;border-right:1px solid var(--line); }.student-progress-summary > div:last-child { border-right:0; }.student-progress-summary strong { font-size:1.55rem;line-height:1; }.student-progress-summary span { margin-top:7px;color:var(--muted);font-size:.7rem; }

/* Lists, lesson, finance and account pages */
.section-panel { padding:var(--space-5); }.section-panel + .section-panel { margin-top:var(--space-4); }
.students-page .section-panel { border-right:0;border-left:0;border-radius:0;background:transparent; }.students-page .person-row { min-height:68px;padding:12px 0;border-top:1px solid var(--line); }.students-page .person-row:last-child { border-bottom:1px solid var(--line); }.students-page .student-person-link { flex:1; }.students-page .avatar { border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary); }.students-page .empty { min-height:180px; }
.mascot-empty img { width:132px;height:92px;object-fit:cover;object-position:top;opacity:.9; }.mascot-empty::before { display:none; }
.lesson-page .container.narrow { width:min(1040px,calc(100% - 48px));display:flex;flex-direction:column; }
.lesson-page main > .alert,.lesson-page main > .back-link { order:0; }
.lesson-page .lesson-hero { order:1;display:flex;justify-content:space-between;align-items:flex-end;padding:0 0 var(--space-5);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent; }
.lesson-page .meeting-card { order:2; }
.lesson-page .subscription-lesson-banner { order:3; }
.lesson-page .homework-status-card { order:4; }
.lesson-page .lesson-sections { order:5; }
.lesson-page .attachments-grid { order:6; }
.lesson-page .board-card { order:7; }
.lesson-page .private-note-card { order:8; }
.lesson-page .finance-card { order:9; }
.lesson-page .danger-zone { order:10; }
.lesson-page dialog { order:11; }
.lesson-hero h1 { margin:10px 0; }.lesson-page main > section.panel,.lesson-page main > form,.lesson-page .attachments-grid { margin-top:var(--space-4); }.meeting-card,.finance-card,.board-card,.homework-status-card { padding:var(--space-5); }.lesson-sections,.attachments-grid { gap:var(--space-4); }.material-card,.attachment-panel { padding:var(--space-5); }.material-icon,.file-icon { border-radius:var(--radius-sm); }.board-card-visual { border-radius:var(--radius-md); }.danger-zone { border-color:color-mix(in srgb,var(--danger) 25%,var(--line));background:transparent; }
.finance-kpis { display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line); }.finance-kpi { padding:20px 24px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent; }.finance-kpi:last-child { border-right:0; }.finance-kpi::before { display:none; }.finance-kpi strong { font-size:2rem;letter-spacing:-.05em; }.finance-chart-panel { padding:var(--space-5); }.finance-month-panel,.finance-debts-panel { margin-top:var(--space-4); }.finance-row { border-radius:0;border-inline:0;border-bottom:0;background:transparent; }.finance-row:hover { background:var(--surface-2); }.finance-filters { border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2); }.finance-private-badge { border-radius:999px; }
.subscription-section { padding:var(--space-5); }.subscription-balance-line { padding:14px 0;border-block:1px solid var(--line); }.subscription-package-card { display:flex;justify-content:space-between;gap:var(--space-4);padding:20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent; }.subscription-package-card:last-child { border-bottom:0; }
.account-page .security-card { padding:var(--space-5) 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent; }.account-page .security-card:last-child { border-bottom:1px solid var(--line); }
.relationships-page .connect-card,.boards-page .section-panel,.list-page .section-panel { padding:var(--space-5); }.board-history-row,.teacher-row { border-radius:0;border-inline:0;background:transparent; }
.legal-shell { background:var(--surface); }.legal-page { padding:64px 0; }.legal-document { padding:clamp(28px,6vw,72px);border:0;border-radius:0;background:transparent; }.legal-document h1 { max-width:760px; }.legal-document h2 { margin-top:40px; }.legal-document p,.legal-document li { max-width:760px;color:var(--text-soft);line-height:1.75; }
.error-page { width:min(560px,calc(100% - 32px));min-height:100vh;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }.error-mascot { width:220px;height:155px;object-fit:cover;object-position:top;margin-bottom:24px; }.error-page h1 { margin:8px 0 14px; }.error-page > p:not(.eyebrow) { max-width:430px;color:var(--muted); }.error-page .button { margin-top:20px; }

/* Admin remains an isolated, dense operational interface. */
.control-page { --bg:#0f1218;--surface:#171b24;--surface-2:#1e2430;--line:#303746;--line-strong:#485165;--text:#f5f6f8;--text-soft:#d1d5df;--muted:#959dac;--primary:#8782ff;--primary-hover:#9995ff; background:#0f1218; }
.control-page .control-topbar { background:#11151d;backdrop-filter:none; }.control-page .control-shell { width:min(1240px,calc(100% - 48px));padding-block:40px 72px; }.control-page .control-page-title h1 { font-size:2.45rem; }.control-page .control-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--line); }.control-page .control-stat { min-height:128px;padding:20px;border:0;border-radius:0;background:var(--surface); }.control-page .control-stat strong { font-size:2.2rem; }.control-page .control-user-list,.control-page .control-card,.control-page .control-product-state { border-radius:var(--radius-md);box-shadow:none; }.control-page .control-user-row { min-height:68px; }.control-page .control-user-layout { gap:16px; }.control-page .control-card { padding:22px; }
.control-auth-page { --bg:#0f1218;--surface:#171b24;--surface-2:#1e2430;--line:#303746;--line-strong:#485165;--text:#f5f6f8;--text-soft:#d1d5df;--muted:#959dac;--primary:#8782ff;--primary-hover:#9995ff;background:#0f1218; }
.control-auth-page .auth-shell { grid-template-columns:1fr;width:min(100% - 32px,460px); }
.control-auth-page .auth-form-card { width:100%;padding:32px;border-radius:var(--radius-md);background:var(--surface); }
.control-auth-page .auth-form-card h1 { font-size:2rem; }
.control-auth-page .eyebrow { color:var(--primary); }

/* Calendar workspace */
.calendar-workspace { min-width:0;padding:var(--space-4);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface); }
.calendar-workspace-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); }
.calendar-workspace-head h2 { margin:3px 0 0; }
.calendar-head-actions { display:flex; align-items:center; gap:var(--space-3); }
.segmented-control { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-2); }
.segmented-control a { min-height:32px; padding:6px 12px; color:var(--muted); border-radius:7px; text-decoration:none; font-size:.82rem; font-weight:600; }
.segmented-control a.active { color:var(--text); background:var(--surface); box-shadow:0 1px 3px rgba(29,29,27,.08); }
.calendar-nav { display:flex; align-items:center; }
.calendar-nav a { min-width:36px; min-height:36px; display:grid; place-items:center; border:1px solid var(--line); color:var(--text-soft); background:var(--surface); text-decoration:none; }
.calendar-nav a:first-child { border-radius:var(--radius-md) 0 0 var(--radius-md); }
.calendar-nav a:last-child { border-radius:0 var(--radius-md) var(--radius-md) 0; }
.calendar-nav a + a { border-left:0; }
.calendar-nav a[data-calendar-action="today"] { padding:0 12px; font-size:.78rem; }
.week-calendar { --hour-height:60px;display:grid;grid-template-columns:50px repeat(7,minmax(78px,1fr));grid-template-rows:60px calc((var(--week-end-hour) - var(--week-start-hour)) * var(--hour-height));min-width:610px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md); }
.week-header-spacer { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.week-day-head { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted); border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; }
.week-day-head:last-of-type { border-right:0; }
.week-day-head span { font-size:.72rem; text-transform:uppercase; }
.week-day-head strong { display:grid; place-items:center; width:30px; height:30px; color:var(--text-soft); border-radius:50%; }
.week-day-head.today strong { color:#fff; background:var(--primary); }
:root[data-theme="dark"] .week-day-head.today strong { color:#121212; }
.week-day-head.selected { background:var(--primary-soft); }
.week-time-axis { position:relative; grid-column:1; grid-row:2; border-right:1px solid var(--line); }
.week-time-axis span { position:relative; display:block; height:var(--hour-height); padding:5px 7px 0 0; color:var(--muted); font-size:.66rem; text-align:right; }
.week-day-column { position:relative; grid-row:2; min-width:0; border-right:1px solid var(--line); background:var(--surface); }
.week-day-column.today { background:color-mix(in srgb,var(--primary-soft) 38%,var(--surface)); }
.week-day-column:last-child { border-right:0; }
.week-hour-line { display:block; height:var(--hour-height); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.week-lesson { position:absolute; z-index:2; top:calc(var(--lesson-start) * var(--hour-height) / 60); left:calc(var(--lesson-column) * 100% / var(--lesson-columns) + 3px); width:calc(100% / var(--lesson-columns) - 6px); min-height:42px; height:max(42px,calc(var(--lesson-duration) * var(--hour-height) / 60 - 1px)); padding:5px 7px; overflow:hidden; color:var(--text); border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line)); border-left:3px solid var(--primary); border-radius:var(--radius-sm); background:var(--primary-soft); text-decoration:none; }
.week-lesson:hover { z-index:4; border-color:var(--primary); }
.week-lesson time, .week-lesson strong, .week-lesson small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.week-lesson time { color:var(--primary);font-size:.68rem;font-weight:600;line-height:1.15; }
.week-lesson strong { margin-top:1px; font-size:.78rem; line-height:1.15; }
.week-lesson small { margin-top:1px; color:var(--muted); font-size:.64rem; line-height:1.15; }
.week-lesson.past { opacity:.56; filter:saturate(.45); }
.week-lesson.current { border-left-color:var(--success); background:var(--success-soft); }
.week-lesson.cancelled { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); border-left-color:var(--danger); background:var(--danger-soft); text-decoration:line-through; }
.month-calendar { margin:0; padding:0; overflow:hidden; border-radius:var(--radius-md); }
.month-calendar .calendar-day { min-height:112px; border-color:var(--line); border-radius:0; background:var(--surface); cursor:pointer; }
.month-calendar .calendar-day.today { box-shadow:inset 0 3px 0 var(--primary); background:var(--primary-soft); }
.month-calendar .calendar-day.selected { outline:2px solid var(--primary);outline-offset:-2px; }
.month-calendar .day-number { display:grid;place-items:center;width:28px;height:28px;color:inherit;border-radius:50%;text-decoration:none; }
.month-calendar .day-number:hover { background:var(--surface-2); }
.month-calendar .calendar-event { border-radius:var(--radius-sm); box-shadow:none; }

/* Landing */
.landing-page { background:var(--bg); }
.landing-header { width:min(1400px,calc(100% - 64px)); min-height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid var(--line); }
.landing-header nav { display:flex; gap:28px; }
.landing-header nav a { color:var(--text-soft); text-decoration:none; font-size:.9rem; }
.landing-actions, .hero-actions { display:flex; gap:10px; }
.landing-page main { width:min(1400px,calc(100% - 64px)); margin:auto; }
.landing-hero { min-height:720px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); align-items:center; gap:64px; padding:80px 0; }
.landing-hero-copy h1 { max-width:760px;margin:12px 0 24px;font-size:clamp(3.4rem,6vw,6.4rem);font-weight:600;line-height:.94;letter-spacing:-.07em; }
.landing-hero-copy .lead { max-width:650px; color:var(--text-soft); font-size:1.18rem; }
.hero-actions { margin-top:30px; }
.hero-note { margin-top:16px; color:var(--muted); font-size:.82rem; }
.hero-scene { position:relative; min-height:520px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; }
.hero-scene::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px; opacity:.32; }
.hero-scene img { position:absolute; z-index:2; width:64%; right:6%; bottom:-2%; }
.scene-calendar, .scene-note { position:absolute; z-index:3; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-sm); }
.scene-calendar { top:38px; left:32px; width:240px; padding:18px; }
.scene-calendar .scene-label { color:var(--muted); font-size:.72rem; }
.scene-calendar > strong { display:block; margin:3px 0 14px; font-size:1.25rem; }
.scene-calendar > div { display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--line); font-size:.78rem; }
.scene-calendar i { width:7px; height:7px; border-radius:50%; background:var(--primary); }
.scene-note { right:26px; bottom:30px; display:flex; gap:10px; align-items:center; padding:14px 16px; }
.scene-note .ui-icon { color:var(--success); }
.scene-note span, .scene-note small { display:block; }
.scene-note small { color:var(--muted); }
.landing-strip { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:20px 0; border-block:1px solid var(--line); color:var(--muted); font-size:.82rem; font-weight:600; }
.landing-section { padding:112px 0; border-bottom:1px solid var(--line); }
.landing-section > header { max-width:760px; margin-bottom:48px; }
.landing-section h2, .audience-grid h2, .landing-cta h2 { margin:8px 0 14px; font-size:clamp(2.2rem,4vw,4rem); line-height:1; letter-spacing:-.055em; }
.landing-section header > p:last-child, .demo-copy > p { color:var(--muted); font-size:1.04rem; }
.process-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.process-list li { display:grid; grid-template-columns:100px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.process-list li > span { color:var(--primary); font:600 .78rem JetBrains Mono,monospace; }
.process-list h3 { margin:0 0 6px; font-size:1.18rem; }
.process-list p { margin:0; color:var(--muted); }
.product-demo { display:grid; grid-template-columns:.7fr 1.3fr; gap:72px; align-items:center; }
.demo-copy ul { margin:28px 0 0; padding:0; list-style:none; }
.demo-copy li { padding:12px 0; border-bottom:1px solid var(--line); }
.demo-workspace { padding:20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.demo-toolbar { display:flex; justify-content:space-between; margin-bottom:18px; }
.demo-toolbar span { color:var(--muted); font-size:.78rem; }
.demo-days { display:grid; grid-template-columns:repeat(5,1fr); border-block:1px solid var(--line); }
.demo-days span { display:flex; justify-content:center; gap:7px; padding:12px; color:var(--muted); }
.demo-days .active strong { color:#fff; background:var(--primary); }
.demo-days strong { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:var(--text); }
.demo-grid { position:relative; display:grid; grid-template-columns:repeat(5,1fr); height:330px; }
.demo-grid > i { border-right:1px solid var(--line); background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 65px,var(--line) 66px); }
.demo-lesson { position:absolute; width:18%; padding:10px; border-left:3px solid var(--primary); border-radius:var(--radius-sm); background:var(--primary-soft); font-size:.72rem; }
.demo-lesson.one { top:70px; left:21%; }.demo-lesson.two { top:180px; left:61%; border-left-color:var(--success); background:var(--success-soft); }
.audience-grid { width:min(1400px,calc(100% - 64px)); margin:auto; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.audience-grid article { padding:80px 64px 80px 0; }
.audience-grid article + article { padding-left:64px; border-left:1px solid var(--line); }
.audience-grid p { color:var(--muted); }.audience-grid a { display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:600; }.audience-grid a .ui-icon { width:16px;height:16px; }
.safety-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.safety-points p { margin:0; padding:22px 0; border-bottom:1px solid var(--line); }.safety-points strong,.safety-points span { display:block; }.safety-points span { margin-top:6px; color:var(--muted); }
.faq-section { display:grid;grid-template-columns:.7fr 1.3fr;gap:80px; }.faq-section details { border-top:1px solid var(--line); }.faq-section details:last-child { border-bottom:1px solid var(--line); }.faq-section summary { padding:22px 0;font-weight:600;cursor:pointer; }.faq-section details p { margin:0 0 22px;color:var(--muted); }
.landing-cta { width:min(1400px,calc(100% - 64px)); margin:80px auto; display:grid; grid-template-columns:160px 1fr auto; gap:40px; align-items:center; padding:36px 48px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }.landing-cta img { width:150px; height:120px; object-fit:cover; object-position:top; }.landing-cta h2 { font-size:clamp(1.7rem,3vw,2.8rem); }.landing-cta p { color:var(--muted); }
.landing-footer { width:min(1400px,calc(100% - 64px)); margin:auto; min-height:120px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); color:var(--muted); }.landing-footer div { display:flex; gap:20px; }.landing-footer a { color:inherit; }

/* Authentication */
.auth-page { background:var(--bg); background-image:none; }
.auth-shell { width:min(1120px,calc(100% - 48px)); min-height:100vh; margin:auto; display:grid; grid-template-columns:1fr minmax(360px,460px); gap:80px; align-items:center; padding:64px 0; }
.auth-copy { position:relative; padding:0; }.auth-copy h1 { max-width:660px; margin:48px 0 18px; font-size:clamp(3rem,5vw,5.2rem); }.auth-copy .lead { max-width:590px; color:var(--muted); font-size:1.08rem; }.auth-mascot { display:block; width:330px; max-height:230px; margin:24px 0 -20px auto; object-fit:cover; object-position:top; }
.auth-card,.auth-form-card { padding:36px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:none; }.auth-card h2,.auth-form-card h1 { margin:4px 0 22px; font-size:1.8rem; }.auth-divider::before,.auth-divider::after { background:var(--line); }.auth-shell > .auth-form-card:only-child,.auth-shell > .auth-card:only-child { grid-column:1/-1;justify-self:center;width:min(100%,460px); }

/* The sign-in page is one self-contained composition on desktop: the mascot supports
   the copy instead of extending the page below the fold. */
.auth-login-page { display:block; padding:0; }
.auth-login-page .auth-shell { min-height:100dvh; padding:32px 0; }
.auth-login-page .auth-copy { min-height:520px; display:flex; flex-direction:column; justify-content:center; }
.auth-login-page .auth-copy h1 { max-width:510px; margin:32px 0 16px; }
.auth-login-page .auth-copy .lead { max-width:390px; }
.auth-login-page .auth-mascot { position:absolute; right:0; bottom:24px; width:216px; max-height:none; margin:0; object-fit:contain; }

/* Keep agenda rows readable when the tablet layout puts two columns side by side. */
.upcoming-item { gap:10px; }
.upcoming-item > div:nth-child(2) { flex:1 1 auto; min-width:0; }
.date-chip { width:54px; flex-basis:54px; padding:7px 2px; }
.date-chip strong,.date-chip small { white-space:nowrap; }
.upcoming-item .arrow { flex:0 0 18px; }

@media (max-width: 1100px) {
  .container { width:min(100% - 40px,960px); }
  .landing-header,.landing-page main,.audience-grid,.landing-cta,.landing-footer { width:calc(100% - 40px); }
  .landing-header nav { display:none; }
  .landing-hero { grid-template-columns:1fr 1fr; gap:32px; }.landing-hero-copy h1 { font-size:4.2rem; }
  .teacher-workspace-page .workspace-schedule,.dashboard-grid { grid-template-columns:1fr; }.schedule-rail { display:none; }.workspace-agenda,.side-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }.workspace-agenda .panel-heading,.workspace-agenda .upcoming-more,.side-panel .panel-heading,.side-panel .upcoming-more { grid-column:1/-1; }
  .calendar-workspace.is-week { overflow-x:auto; }

  .auth-login-page .auth-copy .lead { max-width:210px; }
  .auth-login-page .auth-mascot { bottom:58px; }
}

@media (max-width: 768px) {
  body { font-size:14px; }
  .container,.container.narrow { width:min(100% - 28px,680px); }
  .page { padding:28px 0 calc(116px + env(safe-area-inset-bottom)); }
  .page-header,.workspace-hero { align-items:flex-start; margin-bottom:24px; padding-bottom:20px; }.page-header h1 { font-size:2.25rem; }
  .workspace-summary { grid-template-columns:1fr 1fr; }.workspace-summary .stat { min-height:76px; padding:14px 12px; }.workspace-summary .stat:last-child { grid-column:1/-1; border-top:1px solid var(--line); border-right:0; }.workspace-summary .stat strong { font-size:1.4rem; }
  .learning-progress { grid-template-columns:repeat(3,1fr); }.progress-stat { min-height:78px;padding:12px;border-right:1px solid var(--line); }.progress-stat strong { font-size:1.4rem; }.progress-milestones { grid-column:1/-1;border-top:1px solid var(--line); }
  .student-progress-summary { grid-template-columns:1fr 1fr; }.student-progress-summary > div:nth-child(2) { border-right:0; }.student-progress-summary > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .finance-kpis { grid-template-columns:1fr; }.finance-kpi { border-right:0;border-bottom:1px solid var(--line); }.finance-kpi:last-child { border-bottom:0; }.lesson-page .container.narrow { width:min(100% - 28px,680px); }.control-page .control-stat-grid { grid-template-columns:1fr 1fr; }
  .calendar-workspace { padding:16px; }.calendar-workspace-head { align-items:flex-start; }.calendar-head-actions { flex-direction:column; align-items:flex-end; }.calendar-mode-switch { display:none; }.week-calendar { display:none; }.month-calendar .calendar-day { min-height:48px; }.month-calendar .calendar-event { display:none; }
  .workspace-agenda,.side-panel { display:block;padding:18px;order:initial; }.teacher-workspace-page [data-calendar-agenda] { display:none; }.workspace-invite { display:block; }.workspace-invite .code-actions { display:grid; grid-template-columns:1fr; width:100%; margin-top:16px; }.workspace-invite .code-actions > .button,.workspace-invite .code-actions > details,.workspace-invite .code-actions > details > summary { width:100%; }.workspace-invite .code-actions > details { grid-column:1; }.workspace-invite .code-actions > details > summary { justify-content:center; }
  .topbar { min-height:64px; padding-inline:14px; }.brand span { display:inline; }.account-name { display:none; }
  .mobile-nav { left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); backdrop-filter:none; }.mobile-nav a { min-width:0; }.mobile-nav .mobile-add { transform:none; border-radius:10px; }
  .landing-header { min-height:66px; }.landing-actions .ghost { display:none; }.landing-page main { width:calc(100% - 28px); }.landing-hero { min-height:0; grid-template-columns:1fr; padding:56px 0; }.landing-hero-copy h1 { font-size:clamp(3rem,15vw,4.5rem); }.hero-scene { min-height:400px; }.landing-strip { justify-content:flex-start; }.landing-section { padding:72px 0; }.product-demo,.safety-section,.faq-section { grid-template-columns:1fr; gap:40px; }.audience-grid { width:calc(100% - 28px); grid-template-columns:1fr; }.audience-grid article { padding:64px 0; }.audience-grid article + article { padding-left:0; border-left:0; border-top:1px solid var(--line); }.landing-cta { width:calc(100% - 28px); grid-template-columns:1fr; padding:28px; }.landing-cta img { display:none; }.landing-footer { width:calc(100% - 28px); align-items:flex-start; flex-direction:column; padding:32px 0 120px; }.landing-footer div { flex-wrap:wrap; }
  .auth-shell { width:min(100% - 28px,520px); grid-template-columns:1fr; gap:24px; padding:24px 0 48px; }.auth-copy h1,.auth-copy .lead,.auth-copy .eyebrow,.auth-mascot { display:none; }.auth-card { padding:26px 20px; }
  .auth-login-page { padding:0 14px; }.auth-login-page .auth-shell { width:100%; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; gap:0; padding:calc(24px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom)); }.auth-login-page .auth-copy { display:block; min-height:0; flex:0 0 auto; margin:0 0 24px; }.auth-login-page .auth-card { width:100%; flex:0 0 auto; }
  .month-calendar .calendar-day.selected { background:var(--primary-soft); box-shadow:inset 0 0 0 2px var(--primary); }
  .mobile-day-agenda { margin-top:20px; padding:20px 16px 16px; border-top:1px solid var(--line); }.mobile-day-agenda .panel-heading { margin-bottom:16px; }.mobile-day-agenda .panel-heading h2 { margin:6px 0 0; }.mobile-day-agenda .empty { min-height:84px; padding:8px 0; }.mobile-day-agenda .upcoming-item { padding:12px 0; }.mobile-day-agenda .calendar-nearest .eyebrow { margin:0 0 8px; }
  input,select,textarea { min-width:0; width:100%; font-size:16px; }
}

@media (max-width: 430px) {
  .landing-header .button.primary { min-height:36px; padding-inline:12px; font-size:.78rem; }.landing-header .brand img { width:25px;height:25px; }.landing-hero-copy h1 { font-size:3.15rem; }.hero-actions { flex-direction:column; }.hero-actions .button { width:100%; }.hero-scene { min-height:350px; }.scene-calendar { top:18px;left:16px;width:205px; }.scene-note { right:14px;bottom:16px; }.process-list li { grid-template-columns:48px 1fr; }.demo-workspace { padding:12px; }.demo-days span { gap:2px;padding:8px 2px;font-size:.7rem; }
  .workspace-summary { display:block; }.workspace-summary .stat { border-right:0;border-bottom:1px solid var(--line); }.workspace-summary .stat:last-child { border-top:0;border-bottom:0; }
  .learning-progress { grid-template-columns:1fr 1fr; }.progress-stat:nth-child(2) { border-right:0; }.progress-stat:nth-child(3) { grid-column:1/-1;border-top:1px solid var(--line);border-right:0; }.progress-milestones { grid-template-columns:1fr; }
  .lesson-page .lesson-hero { display:block; align-items:initial; }.lesson-hero > button { margin-top:16px; }.subscription-package-card { display:block; }.subscription-package-actions { margin-top:14px; }.control-page .control-stat-grid { grid-template-columns:1fr; }
  .calendar-workspace-head { display:block; }.calendar-head-actions { margin-top:12px;align-items:stretch; }.calendar-nav { width:100%; }.calendar-nav a[data-calendar-action="today"] { flex:1; }.month-calendar .calendar-day { padding:5px; }
  .finance-row-actions { grid-column:2; justify-content:flex-start; width:100%; }.finance-row-actions .finance-payment-form { flex:1; min-width:0; }.finance-row-actions .button { min-width:0; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}