@font-face {
  font-family: "Bad Script";
  src: url("/assets/fonts/bad-script-v18.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --outside: #f5f5f7;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #f0f0f2;
  --surface-hover: #f8f8f9;
  --text: #1d1d1f;
  --muted: #68686d;
  --muted-light: #929297;
  --line: #d8d8dc;
  --line-soft: #e7e7ea;
  --action: #1d1d1f;
  --action-hover: #000000;
  --focus: #0071e3;
  --calendar-selection: #ffd8c2;
  --calendar-selection-dark: #e49a70;
  --calendar-selection-text: #5d2c16;
  --brand-orange: #bd4b00;
  --portrait-backdrop: #ffd8c2;
  --danger: #b42318;
  --success: #1f6b45;
  --content-width: 1480px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: auto; overscroll-behavior-y: none; scrollbar-width: none; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--canvas); color: var(--text); font: 16px/1.48 var(--font); -webkit-font-smoothing: antialiased; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

.skip-link { position: fixed; top: -80px; left: 24px; z-index: 100; padding: 11px 15px; border-radius: 10px; background: var(--action); color: #fff; font-weight: 650; text-decoration: none; }
.skip-link:focus { top: 20px; }
:focus-visible { outline: 3px solid rgba(0,113,227,.4); outline-offset: 3px; }

.site-shell { width: 100%; min-height: 100vh; margin: 0; overflow: clip; border-radius: 0; background: var(--canvas); }
.topbar { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(29,29,31,.08); background: rgba(245,245,247,.88); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.topbar-inner { width: min(var(--content-width), calc(100% - 64px)); min-height: 76px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.brand { min-height: 48px; display: inline-flex; align-items: center; color: var(--text); font-family: "SF Pro Display", var(--font); font-size: 23px; font-weight: 680; letter-spacing: -.055em; text-decoration: none; }
.brand > span { margin-right: 1px; color: var(--muted); font-weight: 520; }
.contact-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--action); color: #fff; font-size: 13px; font-weight: 620; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.contact-link:hover { background: var(--action-hover); }
.contact-link:active { transform: scale(.98); }

.student-layout { width: min(var(--content-width), calc(100% - 64px)); min-height: calc(100vh - 100px); display: grid; grid-template-columns: minmax(360px, .82fr) minmax(620px, 1.18fr); align-items: start; gap: clamp(48px, 6vw, 96px); margin: 0 auto; padding: 58px 0 24px; }
.student-intro { position: sticky; top: 116px; min-width: 0; }
.eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.student-intro h1 { max-width: 590px; margin: 0; font-size: clamp(44px, 4.2vw, 64px); font-weight: 620; letter-spacing: -.057em; line-height: .98; }
.intro-description { max-width: 590px; margin: 22px 0 0; color: var(--muted); font-size: 17px; letter-spacing: -.012em; }
.intro-facts { max-width: 530px; display: grid; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.intro-facts li { min-height: 48px; display: grid; grid-template-columns: 44px 1fr; align-items: center; border-bottom: 1px solid var(--line); color: #3f3f43; font-size: 13px; }
.intro-facts span { color: var(--muted-light); font-size: 11px; font-variant-numeric: tabular-nums; }
.brand-signature { width: max-content; display: inline-flex; align-items: center; gap: 7px; margin: 28px 0 0; color: var(--brand-orange); font-family: "Bad Script", "Segoe Script", cursive; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.1; transform: rotate(-1deg); transform-origin: left center; }
.brand-signature svg { width: .62em; height: .62em; fill: currentColor; transform: rotate(-7deg); }
.brand-portrait { position: relative; width: min(100%, 470px); height: 350px; display: grid; place-items: end center; margin: -34px auto 24px; overflow: hidden; isolation: isolate; }
.brand-portrait::before { content: ""; position: absolute; bottom: -44px; left: 50%; z-index: 1; width: 390px; aspect-ratio: 1; border-radius: 50%; background: var(--portrait-backdrop); box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 18px 38px rgba(126,68,30,.09); transform: translateX(-50%); }
.portrait-orbits { position: absolute; bottom: -70px; left: 50%; z-index: 0; width: 455px; transform: translateX(-50%); }
.portrait-orbit { fill: none; stroke: rgba(226,93,0,.18); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.portrait-orbit--outer { stroke-dasharray: 45 55; stroke-dashoffset: 9; transform: rotate(-74deg); transform-origin: 260px 260px; }
.portrait-orbit--inner { stroke: rgba(226,93,0,.1); stroke-dasharray: 31 69; stroke-dashoffset: 47; transform: rotate(38deg); transform-origin: 260px 260px; }
.brand-portrait img { position: absolute; top: 0; left: 50%; z-index: 2; width: 265px; max-width: none; filter: drop-shadow(0 14px 11px rgba(35,39,50,.12)); transform: translateX(-50%); }

.form-surface { min-width: 0; overflow: hidden; border: 1px solid rgba(29,29,31,.07); border-radius: 18px; background: var(--surface); box-shadow: 0 20px 52px rgba(29,29,31,.09), 0 2px 5px rgba(29,29,31,.035); }
.form-progress { padding: 22px 34px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.88); }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--muted); font-size: 11px; font-weight: 600; }
.progress-track { height: 2px; overflow: hidden; background: var(--surface-soft); }
.progress-track span { width: 50%; height: 100%; display: block; background: var(--action); transition: width .22s ease; }
.form-step { padding: 38px 34px 32px; }
.form-heading { margin-bottom: 32px; }
.form-heading h2, .success-state h2, .load-error h2 { margin: 0; font-size: 31px; font-weight: 630; letter-spacing: -.045em; line-height: 1.08; }
.form-heading > p:last-child, .form-heading > div > p:last-child, .success-state > p:not(.eyebrow):not(.success-note), .load-error p { max-width: 610px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.field--wide { grid-column: 1 / -1; }
.field { min-width: 0; display: grid; grid-auto-rows: max-content; align-content: start; gap: 8px; }
.field > span:first-child, .format-fieldset legend, .choice-fieldset legend { font-size: 13px; font-weight: 620; }
.field input, .field select, .input-prefix { width: 100%; height: 50px; min-height: 50px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); transition: border-color .15s ease, background .15s ease; }
.field input, .field select { padding: 0 14px; }
.field input::placeholder { color: #aaaab0; }
.field input:hover, .field select:hover, .input-prefix:hover { border-color: #aaaab0; }
.field input:focus, .field select:focus, .input-prefix:focus-within { border-color: var(--focus); outline: 0; }
.input-prefix { display: grid; grid-template-columns: auto 1fr; align-items: center; padding-left: 14px; color: var(--muted); }
.input-prefix input { min-width: 0; height: 100%; min-height: 0; padding-left: 2px; border: 0; border-radius: 0; background: transparent; }
.input-prefix input:focus { border: 0; }
.field-error { min-height: 0; color: var(--danger); font-size: 11px; }
.field-error:empty { display: none; }
.field-hint { margin-top: -3px; color: var(--muted-light); font-size: 10px; }
.field.has-error input, .field.has-error select, .field.has-error .input-prefix { border-color: var(--danger); }

.selection-fields { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr); gap: 16px; margin-top: 22px; }
.choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-fieldset legend { margin-bottom: 8px; }
.grade-options, .frequency-options { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.grade-options { grid-template-columns: repeat(3,1fr); }
.frequency-options { grid-template-columns: repeat(2,1fr); }
.grade-options label, .frequency-options label { min-width: 0; cursor: pointer; }
.grade-options label + label, .frequency-options label + label { border-left: 1px solid var(--line); }
.grade-options input, .frequency-options input { position: absolute; opacity: 0; pointer-events: none; }
.grade-options span, .frequency-options span { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; color: var(--muted); font-size: 13px; font-weight: 590; transition: background .14s ease, color .14s ease; }
.frequency-options strong { color: inherit; font-size: 15px; font-weight: 650; }
.frequency-options small { color: inherit; font-size: 11px; }
.grade-options label:hover span, .frequency-options label:hover span { background: var(--surface-hover); color: var(--text); }
.grade-options input:checked + span, .frequency-options input:checked + span { background: var(--action); color: #fff; }
.grade-options input:focus-visible + span, .frequency-options input:focus-visible + span { position: relative; z-index: 1; outline: 3px solid rgba(0,113,227,.4); outline-offset: -3px; }
.choice-fieldset.has-error .grade-options, .choice-fieldset.has-error .frequency-options { border-color: var(--danger); }

.format-fieldset { min-width: 0; margin: 34px 0 0; padding: 0; border: 0; }
.legend-description { margin: 5px 0 16px; color: var(--muted); font-size: 12px; }
.format-list { border-top: 1px solid var(--line); }
.format-option { min-height: 76px; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 15px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .14s ease; }
.format-option:hover { background: var(--surface-hover); }
.format-option:has(input:checked) { background: var(--surface-soft); }
.format-option input { position: absolute; opacity: 0; pointer-events: none; }
.radio-mark { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #aaaab0; border-radius: 50%; background: #fff; }
.radio-mark::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--action); opacity: 0; transform: scale(.6); transition: opacity .14s ease, transform .14s ease; }
.format-option input:checked + .radio-mark { border-color: var(--action); }
.format-option input:checked + .radio-mark::after { opacity: 1; transform: scale(1); }
.format-option input:focus-visible + .radio-mark { outline: 3px solid rgba(0,113,227,.4); outline-offset: 3px; }
.format-option > span:last-child { display: grid; gap: 2px; }
.format-option strong { font-size: 14px; font-weight: 620; }
.format-option small { color: var(--muted); font-size: 12px; }

.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 34px; }
.form-footer > p { max-width: 280px; margin: 0; color: var(--muted-light); font-size: 11px; }
.primary-button, .secondary-button, .text-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 11px; font-weight: 620; cursor: pointer; transition: background .16s ease, color .16s ease, transform .16s ease; }
.primary-button { min-width: 190px; padding: 0 19px; background: var(--action); color: #fff; }
.primary-button:hover:not(:disabled) { background: var(--action-hover); }
.primary-button:active:not(:disabled), .secondary-button:active, .text-button:active { transform: scale(.985); }
.primary-button:disabled { background: #d0d0d4; color: #77777c; cursor: not-allowed; }
.primary-button svg, .text-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secondary-button { min-width: 170px; padding: 0 18px; border: 1px solid var(--line); background: #fff; }
.secondary-button:hover { background: var(--surface-soft); }
.text-button { padding: 0 8px; background: transparent; color: var(--muted); }
.text-button:hover { color: var(--text); }

.form-heading--schedule { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; }
.selection-counter { display: flex; align-items: end; justify-content: flex-end; gap: 14px; padding-bottom: 2px; }
.selection-value { display: grid; justify-items: end; }
.selection-value strong { color: var(--text); font-size: 27px; font-weight: 620; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.selection-value > span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.selection-counter button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.selection-counter button:hover { color: var(--text); }
.calendar-note { min-height: 34px; display: flex; align-items: start; justify-content: space-between; gap: 16px; color: var(--muted-light); font-size: 10px; }
.weekly-calendar { --slot-height: 16px; --slot-count: 56; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.calendar-header { display: grid; grid-template-columns: 56px minmax(0,1fr); border-bottom: 1px solid var(--line); }
.calendar-timezone { display: flex; align-items: end; justify-content: center; padding-bottom: 10px; color: var(--muted-light); font-size: 9px; font-weight: 620; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekday { min-width: 0; min-height: 58px; display: grid; place-content: center; gap: 2px; padding: 0 3px; border: 0; border-left: 1px solid var(--line-soft); background: #fff; cursor: default; }
.calendar-weekday span { color: var(--muted-light); font-size: 9px; font-weight: 650; text-transform: uppercase; }
.calendar-weekday strong { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 600; text-overflow: ellipsis; }
.calendar-scroll { overflow: visible; }
.calendar-body { height: calc(var(--slot-count) * var(--slot-height)); display: grid; grid-template-columns: 56px minmax(0,1fr); }
.calendar-time-axis { position: relative; border-right: 1px solid var(--line-soft); background: #fff; }
.calendar-hour-label { position: absolute; right: 8px; color: var(--muted-light); font-size: 9px; font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.calendar-hour-label.is-boundary-start { top: 6px !important; transform: none; }
.calendar-hour-label.is-boundary-end { top: auto !important; bottom: 6px; transform: none; }
.calendar-days { min-width: 0; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-day-column { position: relative; min-width: 0; border-right: 1px solid var(--line-soft); cursor: crosshair; touch-action: none; user-select: none; }
.calendar-day-column:last-child { border-right: 0; }
.calendar-slot-grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(var(--slot-count),var(--slot-height)); pointer-events: none; }
.calendar-slot { border-top: 1px solid transparent; }
.calendar-slot.is-hour { border-top-color: var(--line); }
.calendar-interval-layer { position: absolute; inset: 0; pointer-events: none; }
.calendar-interval { position: absolute; right: 3px; left: 3px; z-index: 2; min-height: 14px; overflow: visible; border: 1px solid var(--calendar-selection-dark); border-left-width: 3px; border-radius: 5px; background: var(--calendar-selection); color: var(--calendar-selection-text); cursor: pointer; pointer-events: auto; transition: border-color .14s ease, box-shadow .14s ease; }
.calendar-interval:hover, .calendar-interval.is-editing { border-color: #cf7949; box-shadow: 0 0 0 1px rgba(207,121,73,.18); }
.calendar-interval:focus-visible { outline-color: rgba(189,75,0,.45); }
.calendar-interval strong { display: block; overflow: hidden; padding: 5px 18px 4px 6px; font-size: 8.5px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; text-overflow: clip; white-space: nowrap; }
.calendar-interval button { position: absolute; top: 0; right: 0; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: rgba(93,44,22,.62); font-size: 14px; cursor: pointer; }
.calendar-interval button:hover { color: var(--calendar-selection-text); }
.calendar-interval.is-compact strong { padding-top: 1px; padding-bottom: 1px; font-size: 8px; }
.calendar-interval.is-compact button { display: none; }
.calendar-interval.is-draft { z-index: 3; border: 1px dashed var(--calendar-selection-dark); background: rgba(255,216,194,.82); }
.is-selecting-time, .is-selecting-time * { cursor: ns-resize !important; }

.interval-editor { position: fixed; z-index: 70; width: 340px; padding: 20px; overflow: hidden; border: 1px solid rgba(29,29,31,.12); border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(29,29,31,.16), 0 4px 14px rgba(29,29,31,.08); }
.interval-editor-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.interval-editor-header > div { display: grid; gap: 2px; }
.interval-editor-header span { color: var(--muted); font-size: 11px; }
.interval-editor-header strong { font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.interval-editor-header > button { width: 44px; height: 44px; display: grid; place-items: center; margin: -10px -10px 0 0; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 0; cursor: pointer; }
.interval-editor-header > button::before { content: "×"; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); font-size: 17px; line-height: 1; transition: background .14s ease, color .14s ease; }
.interval-editor-header > button:hover::before { background: #e5e5e8; color: var(--text); }
.interval-time-range { display: grid; grid-template-columns: 1fr 1px 1fr; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.interval-time-range label { position: relative; min-width: 0; display: grid; gap: 2px; padding: 10px 13px 11px; transition: background .14s ease; }
.interval-time-range label:focus-within { z-index: 1; background: #fff; }
.interval-time-range label:focus-within::after { content: ""; position: absolute; inset: -1px; border: 2px solid rgba(0,113,227,.62); pointer-events: none; }
.interval-time-range label:first-child:focus-within::after { border-radius: 12px 0 0 12px; }
.interval-time-range label:last-child:focus-within::after { border-radius: 0 12px 12px 0; }
.interval-time-range label > span { color: var(--muted); font-size: 10px; }
.interval-time-range input { width: 100%; height: 32px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 23px; font-weight: 560; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.interval-time-range input::placeholder { color: #b0b0b5; }
.interval-time-divider { width: 1px; background: var(--line); }
.interval-editor-hint { margin: 8px 2px 0; color: var(--muted-light); font-size: 10px; }
.interval-editor-error { margin: 8px 2px 0; color: var(--danger); font-size: 10px; }
.interval-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px -20px -20px; padding: 12px; border-top: 1px solid var(--line-soft); }
.interval-editor-actions > span { display: flex; gap: 6px; }
.interval-editor-actions button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font-size: 12px; font-weight: 620; cursor: pointer; }
.interval-delete { color: var(--danger); }
.interval-cancel { color: var(--muted); }
.interval-save { background: var(--action) !important; color: #fff; }
.interval-delete:hover { background: #fff5f4 !important; }
.interval-cancel:hover { background: var(--surface-soft) !important; color: var(--text); }
.interval-save:hover { background: var(--action-hover) !important; }

.schedule-picker { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(240px,.84fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.date-picker { min-width: 0; padding: 25px 24px 25px 0; border-right: 1px solid var(--line); }
.time-picker { min-width: 0; padding: 25px 0 25px 24px; }
.picker-toolbar { min-height: 43px; display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.picker-toolbar > div:first-child { min-width: 0; display: grid; gap: 2px; }
.picker-label { color: var(--muted-light); font-size: 10px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase; }
.picker-toolbar strong { overflow: hidden; font-size: 13px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.week-navigation { display: flex; gap: 5px; }
.week-navigation button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.week-navigation button:hover:not(:disabled) { border-color: #aaaab0; }
.week-navigation button:disabled { color: #b9b9bd; background: var(--surface-soft); cursor: not-allowed; }
.week-navigation svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.date-grid { display: grid; grid-template-columns: repeat(7,minmax(44px,1fr)); gap: 6px; margin-top: 14px; }
.date-option { min-width: 0; min-height: 70px; display: grid; place-items: center; gap: 2px; padding: 8px 3px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-soft); color: var(--text); cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.date-option:hover { background: #e8e8eb; }
.date-option.is-current { border-color: var(--action); background: #fff; }
.date-option.has-values { background: var(--action); color: #fff; }
.date-option.has-values.is-current { box-shadow: inset 0 0 0 1px #fff; }
.date-option span { color: var(--muted); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.date-option strong { font-size: 18px; font-weight: 620; line-height: 1; }
.date-option small { min-height: 13px; color: var(--muted-light); font-size: 9px; }
.date-option.has-values span, .date-option.has-values small { color: rgba(255,255,255,.7); }
.time-hint { color: var(--muted-light); font-size: 9px; white-space: nowrap; }
.time-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 14px; }
.time-option { min-height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12px; font-weight: 590; font-variant-numeric: tabular-nums; cursor: pointer; }
.time-option:hover { border-color: #aaaab0; background: var(--surface-hover); }
.time-option.is-selected { border-color: var(--action); background: var(--action); color: #fff; }

.form-message { margin-top: 22px; padding: 12px 14px; border-left: 3px solid var(--danger); background: #fff5f4; color: #7a271a; font-size: 12px; }
.form-footer--schedule { margin-top: 26px; }

.loading-state, .success-state, .load-error { min-height: 530px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 50px 48px; }
.loading-state p { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.loading-line { width: 68%; height: 18px; border-radius: 5px; background: var(--surface-soft); animation: loading-pulse 1.2s ease-in-out infinite alternate; }
.loading-line--short { width: 44%; margin-top: 10px; }
.success-mark { width: 50px; height: 50px; margin-bottom: 34px; border: 1px solid #9fc6b1; border-radius: 50%; fill: none; stroke: var(--success); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.success-state h2 { font-size: 37px; }
.success-details { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.success-details div { min-width: 0; padding: 17px 0; }
.success-details div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.success-details dt { color: var(--muted-light); font-size: 10px; text-transform: uppercase; }
.success-details dd { overflow: hidden; margin: 4px 0 0; font-size: 14px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.success-note { max-width: 430px; margin: 18px 0 0; color: var(--muted-light); font-size: 11px; }
.load-error .primary-button { margin-top: 26px; }

@keyframes loading-pulse { to { opacity: .48; } }

@media (max-width: 1120px) {
  .student-layout { width: calc(100% - 48px); grid-template-columns: minmax(300px,.72fr) minmax(590px,1.28fr); gap: 36px; }
  .student-intro h1 { font-size: 46px; }
  .intro-description { font-size: 15px; }
  .brand-portrait { height: 320px; margin-top: -26px; }
  .brand-portrait img { width: 245px; }
  .brand-portrait::before { bottom: -50px; width: 360px; }
  .portrait-orbits { bottom: -77px; width: 420px; }
  .form-step { padding-inline: 28px; }
  .form-progress { padding-inline: 28px; }
  .date-picker { padding-right: 18px; }
  .time-picker { padding-left: 18px; }
}

@media (max-width: 920px) {
  .site-shell { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
  .topbar-inner { width: calc(100% - 36px); min-height: 70px; }
  .student-layout { width: min(720px, calc(100% - 36px)); display: block; padding: 36px 0 60px; }
  .student-intro { position: static; }
  .student-intro h1 { max-width: 660px; font-size: 48px; }
  .intro-description { max-width: 650px; }
  .intro-facts { grid-template-columns: repeat(3,1fr); max-width: none; margin-top: 26px; border-bottom: 1px solid var(--line); }
  .intro-facts li { grid-template-columns: 34px 1fr; padding: 0 12px; border-bottom: 0; }
  .intro-facts li + li { border-left: 1px solid var(--line); }
  .brand-signature { margin-top: 22px; }
  .brand-portrait { width: 390px; height: 300px; margin: -28px auto 22px; }
  .brand-portrait img { width: 225px; }
  .brand-portrait::before { bottom: -58px; width: 340px; }
  .portrait-orbits { bottom: -84px; width: 400px; }
  .form-surface { margin-top: 34px; }
}

@media (max-width: 640px) {
  .topbar-inner { width: calc(100% - 28px); }
  .brand { font-size: 21px; }
  .contact-link { padding-inline: 14px; font-size: 12px; }
  .student-layout { width: calc(100% - 24px); padding-top: 30px; }
  .student-intro h1 { font-size: 39px; line-height: 1; }
  .intro-description { margin-top: 16px; font-size: 14px; }
  .intro-facts { display: none; }
  .brand-signature { margin-top: 19px; font-size: 21px; }
  .form-surface { margin-top: 28px; border-radius: 15px; }
  .form-progress { padding: 18px 18px 15px; }
  .form-step { padding: 30px 18px 24px; }
  .form-heading { margin-bottom: 26px; }
  .form-heading h2 { font-size: 28px; }
  .field-grid { grid-template-columns: 1fr; gap: 19px; }
  .field--wide { grid-column: auto; }
  .selection-fields { grid-template-columns: 1fr; gap: 19px; margin-top: 19px; }
  .format-fieldset { margin-top: 28px; }
  .format-option { min-height: 72px; }
  .form-footer { align-items: stretch; flex-direction: column-reverse; }
  .form-footer > p { max-width: none; text-align: center; }
  .primary-button { width: 100%; }
  .form-heading--schedule { grid-template-columns: 1fr; gap: 18px; }
  .selection-counter { align-items: center; justify-content: flex-start; gap: 12px; }
  .selection-value { display: flex; align-items: baseline; gap: 7px; }
  .selection-value > span { margin: 0; }
  .schedule-picker { grid-template-columns: 1fr; }
  .date-picker { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .time-picker { padding: 22px 0; }
  .date-grid { grid-template-columns: repeat(7,minmax(38px,1fr)); gap: 4px; }
  .date-option { min-height: 64px; padding-inline: 1px; }
  .date-option strong { font-size: 17px; }
  .week-navigation button { width: 44px; height: 44px; }
  .time-grid { grid-template-columns: repeat(4,1fr); gap: 6px; }
  .time-option { min-height: 44px; font-size: 11px; }
  .form-footer--schedule { flex-direction: column; }
  .text-button { align-self: flex-start; }
  .loading-state, .success-state, .load-error { min-height: 460px; padding: 38px 24px; }
  .success-state h2 { font-size: 33px; }
  .success-details { grid-template-columns: 1fr; }
  .success-details div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 680px) {
  .interval-editor { top: auto !important; right: 12px; bottom: 12px; left: 12px; width: auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .calendar-header { display: block; }
  .calendar-timezone { display: none; }
  .calendar-weekdays { grid-template-columns: repeat(4,1fr); }
  .calendar-weekday { min-height: 48px; cursor: pointer; }
  .calendar-weekday:nth-child(4n + 1) { border-left: 0; }
  .calendar-weekday:nth-child(n + 5) { border-top: 1px solid var(--line-soft); }
  .calendar-weekday strong { display: none; }
  .calendar-weekday span { font-size: 10px; }
  .calendar-weekday.is-active { background: var(--calendar-selection); box-shadow: inset 0 -2px 0 var(--calendar-selection-dark); }
  .calendar-weekday.is-active span { color: var(--calendar-selection-text); }
  .calendar-body { grid-template-columns: 48px minmax(0,1fr); }
  .calendar-days { display: block; }
  .calendar-day-column { display: none; height: 100%; border-right: 0; }
  .calendar-day-column.is-mobile-active { display: block; }
  .calendar-interval { right: 6px; left: 6px; }
  .calendar-interval strong { padding-right: 44px; font-size: 10px; letter-spacing: 0; }
  .calendar-interval button { width: 44px; height: 44px; }
}

@media (max-width: 390px) {
  .brand-portrait { width: 100%; height: 285px; }
  .brand-portrait img { width: 215px; }
  .brand-portrait::before { width: 320px; }
  .portrait-orbits { width: 370px; }
  .time-grid { grid-template-columns: repeat(3,1fr); }
  .grade-options span { padding-inline: 6px; font-size: 12px; }
}

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