:root {
    color-scheme: light;
    --background: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f0f4fa;
    --surface-raised: #ffffff;
    --text: #0a1935;
    --muted: #6a7891;
    --border: #e2e8f1;
    --brand: #0866ee;
    --brand-strong: #0055dc;
    --brand-soft: #eaf2ff;
    --accent: #7bd500;
    --danger: #f04438;
    --danger-soft: #ffebe8;
    --shadow: 0 10px 30px rgba(16, 38, 78, .08);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #00182d;
    --surface: #06243d;
    --surface-soft: #0a2b47;
    --surface-raised: #092944;
    --text: #f4f7fc;
    --muted: #9bacc2;
    --border: #173c5a;
    --brand: #0879ff;
    --brand-strong: #0068ee;
    --brand-soft: #073762;
    --accent: #83df14;
    --danger: #ff5c47;
    --danger-soft: #43232a;
    --shadow: 0 14px 36px rgba(0, 5, 15, .35);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--background); color: var(--text); }

body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }

button, input, select, textarea { font: inherit; }
button { color: inherit; }

button, a { touch-action: manipulation; }

h1, h2, h3, p { margin: 0; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent);
    outline-offset: 2px;
}

.web-app {
    width: 100%;
    min-height: 100dvh;
    background: var(--background);
}

.app-content {
    width: min(100%, 520px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(18px + var(--safe-top)) 16px calc(106px + var(--safe-bottom));
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.tab-page { display: grid; gap: 16px; animation: page-in .18s ease-out; }
.tab-transition-forward .tab-page { animation-name: page-in-from-right; }
.tab-transition-backward .tab-page { animation-name: page-in-from-left; }

@keyframes page-in { from { opacity: .35; transform: translateY(5px); } }
@keyframes page-in-from-right { from { opacity: .35; transform: translateX(20px); } }
@keyframes page-in-from-left { from { opacity: .35; transform: translateX(-20px); } }

.page-header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-header h1 { font-size: 25px; line-height: 1.15; letter-spacing: -.45px; }
.page-header p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.page-header > div { min-width: 0; }

.icon-button, .primary-icon-button, .mini-icon {
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.icon-button { width: 42px; height: 42px; border-radius: 13px; }
.icon-button:active { background: var(--surface-soft); }
.primary-icon-button { width: 42px; height: 42px; border-radius: 13px; color: white; background: var(--brand); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 25%, transparent); }
.app-icon { display: block; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.content-section { display: grid; gap: 10px; }
.content-section > h2, .section-heading h2, .list-heading { font-size: 14px; font-weight: 700; letter-spacing: -.1px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }

.parity-badge {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 12px;
    font-weight: 750;
}

.current-lesson-card {
    padding: 14px;
    border-radius: 15px;
    color: white;
    background: linear-gradient(145deg, #0b7aff 0%, #0056e8 70%);
    box-shadow: 0 13px 32px rgba(0, 92, 230, .26);
}

.current-topline { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 11px; }
.current-topline h3 { font-size: 15px; line-height: 1.25; }
.current-topline p { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 12px; }
.current-topline time { padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.17); font-size: 11px; font-weight: 700; white-space: nowrap; }
.subject-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; color: #075fe6; background: white; font-size: 18px; font-weight: 800; }
.subject-symbol.secondary { color: var(--brand); background: var(--brand-soft); }
.subject-symbol.small { width: 35px; height: 35px; border-radius: 9px; color: white; background: linear-gradient(145deg, #0a7dff, #0055e5); font-size: 14px; }
.location-line { margin: 10px 0 12px 51px; color: rgba(255,255,255,.9); font-size: 12px; }
.lesson-progress { overflow: hidden; height: 5px; border-radius: 99px; background: rgba(128, 146, 170, .22); }
.lesson-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.progress-labels { display: flex; justify-content: space-between; margin-top: 6px; color: rgba(255,255,255,.84); font-size: 10px; }

.next-lesson-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.next-lesson-card h3 { font-size: 14px; }
.next-lesson-card p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.next-lesson-card time { align-self: start; padding: 4px 6px; border-radius: 7px; color: var(--text); background: var(--surface-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }

.quiet-card { display: grid; gap: 4px; padding: 15px; }
.quiet-card strong { font-size: 14px; }
.quiet-card span { color: var(--muted); font-size: 12px; }

.compact-schedule { overflow: hidden; box-shadow: none; }
.compact-lesson { position: relative; display: grid; grid-template-columns: 44px 6px 1fr; gap: 9px; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--border); text-align: left; background: transparent; cursor: pointer; }
.compact-lesson:last-child { border-bottom: 0; }
.compact-lesson.is-current { background: var(--brand-soft); }
.compact-lesson time { display: grid; font-size: 10px; }
.compact-lesson time span { margin-top: 2px; color: var(--muted); }
.compact-dot { align-self: center; width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.compact-lesson.is-current .compact-dot { background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.compact-lesson > span:last-child { display: grid; gap: 3px; min-width: 0; }
.compact-lesson strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.compact-lesson small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.today-assignment { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px; box-shadow: none; }
.today-assignment > button { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; text-align: left; background: transparent; cursor: pointer; }
.today-assignment strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.today-assignment span { color: var(--muted); font-size: 10px; }
.today-assignment time, .row-trailing time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.today-assignment time.overdue, .row-trailing time.overdue { color: var(--danger); }

.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.segmented-control button { min-height: 38px; padding: 7px 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.segmented-control button.active { color: white; background: var(--brand); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent); }
.segmented-control.compact { max-width: 260px; }

.teacher-search-panel { display: grid; gap: 10px; }
.search-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 46px; padding: 4px 5px 4px 13px; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); background: var(--surface); }
.search-box input { min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
.search-box input::placeholder { color: var(--muted); }
.search-box button { min-height: 35px; padding: 0 12px; border: 0; border-radius: 9px; color: white; background: var(--brand); font-size: 11px; font-weight: 700; cursor: pointer; }
.helper-text, .muted { color: var(--muted); font-size: 11px; }
.teacher-results { overflow: hidden; max-height: 300px; overflow-y: auto; box-shadow: none; }
.teacher-results button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--border); text-align: left; background: transparent; cursor: pointer; }
.teacher-results button:last-child { border-bottom: 0; }
.teacher-results button > span:first-child { display: grid; gap: 3px; }
.teacher-results strong { font-size: 12px; }
.teacher-results small { color: var(--muted); font-size: 10px; }
.teacher-profile { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; box-shadow: none; }
.teacher-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: white; background: linear-gradient(145deg, #6855f7, #177bff); font-size: 14px; font-weight: 800; }
.teacher-heading h2 { font-size: 14px; }
.teacher-heading p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.teacher-now, .teacher-profile details { grid-column: 1 / -1; }
.teacher-now { display: grid; gap: 4px; padding: 11px; border-radius: 11px; color: var(--text); background: var(--brand-soft); }
.teacher-now span { color: var(--brand); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .3px; }
.teacher-now strong { font-size: 13px; }
.teacher-now p { color: var(--muted); font-size: 11px; }
.teacher-now.quiet { background: var(--surface-soft); }
.teacher-now.quiet span { color: var(--muted); }
.teacher-profile details { padding-top: 9px; border-top: 1px solid var(--border); }
.teacher-profile summary { font-size: 12px; font-weight: 700; cursor: pointer; }
.teacher-profile ul { display: grid; gap: 6px; padding-left: 20px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.date-navigation { display: grid; grid-template-columns: 38px 1fr auto 38px; align-items: center; gap: 5px; }
.date-navigation > button { height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.date-navigation .today-button { padding: 0 9px; color: var(--brand); font-size: 10px; font-weight: 700; }
.date-navigation label { position: relative; display: grid; place-items: center; min-height: 38px; border-radius: 10px; cursor: pointer; }
.date-navigation label span { font-size: 12px; font-weight: 700; text-align: center; }
.date-navigation input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.parity-row { display: flex; justify-content: center; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-strip button { display: grid; gap: 3px; place-items: center; min-width: 0; height: 54px; padding: 5px 2px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
.week-strip span { font-size: 8px; }
.week-strip strong { color: var(--text); font-size: 13px; }
.week-strip button.active { color: white; border-color: var(--brand); background: var(--brand); }
.week-strip button.active strong { color: white; }
.sync-line { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sync-dot.cached { background: #f3a712; }

.lesson-list { display: grid; gap: 10px; }
.lesson-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.lesson-card.is-current { border-color: var(--brand); background: var(--brand-soft); }
.pair-tile { display: grid; place-content: center; place-items: center; min-height: 88px; padding: 7px; border-radius: 11px; background: var(--surface-soft); text-align: center; }
.pair-tile strong { color: var(--brand); font-size: 20px; }
.pair-tile span { margin-top: -2px; color: var(--muted); font-size: 9px; }
.pair-tile small { margin-top: 8px; color: var(--text); font-size: 9px; font-weight: 700; white-space: nowrap; }
.lesson-body { min-width: 0; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--brand); font-size: 9px; font-weight: 700; }
.lesson-title-row { display: flex; align-items: flex-start; gap: 7px; }
.lesson-title-row h3 { flex: 1; font-size: 13px; line-height: 1.35; }
.lesson-type { padding: 3px 5px; border-radius: 6px; color: var(--brand); background: var(--brand-soft); font-size: 8px; font-weight: 750; }
.lesson-body p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.lesson-body .lesson-location { color: var(--text); }
.lesson-actions { display: flex; gap: 12px; margin-top: 7px; }
.text-button { padding: 0; border: 0; color: var(--brand); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }

.progress-card { display: grid; gap: 10px; padding: 14px; box-shadow: none; }
.progress-card > div:first-child { display: flex; justify-content: space-between; font-size: 13px; }
.progress-card > div:first-child span { color: var(--brand); font-weight: 800; }
.progress-card p { color: var(--muted); font-size: 10px; }
.filter-row { display: flex; gap: 6px; }
.filter-row button { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 650; cursor: pointer; }
.filter-row button.active { color: white; border-color: var(--brand); background: var(--brand); }
.horizontal-scroll { overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.horizontal-scroll::-webkit-scrollbar { display: none; }
.personal-list { display: grid; gap: 8px; }
.personal-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9px; padding: 10px; box-shadow: none; }
.personal-row.completed { opacity: .6; }
.personal-row.completed .row-main strong { text-decoration: line-through; }
.round-check input { position: absolute; opacity: 0; pointer-events: none; }
.round-check span { display: block; width: 18px; height: 18px; border: 1.5px solid #9eabc0; border-radius: 50%; cursor: pointer; }
.round-check input:checked + span { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 45%, transparent 48%); }
.row-main { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; text-align: left; background: transparent; cursor: pointer; }
.row-main strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.row-main span { color: var(--muted); font-size: 9px; }
.row-trailing { display: grid; justify-items: end; gap: 5px; }
.mini-icon { width: 26px; height: 24px; color: var(--muted); }

.new-note-button { display: flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 11px; border: 0; border-radius: 10px; color: white; background: var(--brand); font-size: 10px; font-weight: 700; cursor: pointer; }
.list-heading { margin-top: 3px; }
.note-card { display: grid; gap: 10px; padding: 13px; box-shadow: none; }
.note-card header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.note-card h3 { font-size: 12px; }
.note-card header strong { display: block; margin-top: 3px; color: var(--brand); font-size: 9px; }
.note-card > p { color: var(--muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.note-card footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }
.note-card footer span { display: flex; gap: 4px; }
.note-card footer button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }

.student-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; padding: 14px; box-shadow: none; }
.student-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: white; background: linear-gradient(145deg, #00a3ff, #3647ec); font-size: 17px; font-weight: 800; }
.student-card h2 { font-size: 15px; }
.student-card strong { display: block; margin-top: 4px; font-size: 12px; }
.student-card p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 14px; box-shadow: none; }
.profile-stats > div:not(.completion-ring) { display: grid; gap: 3px; padding: 3px 11px; border-right: 1px solid var(--border); }
.profile-stats strong { font-size: 20px; }
.profile-stats span { color: var(--muted); font-size: 9px; }
.completion-ring { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle closest-side, var(--surface) 78%, transparent 80% 99%), conic-gradient(var(--accent) calc(var(--progress) * 1%), var(--surface-soft) 0); }
.completion-ring strong { font-size: 11px; }
.settings-list { overflow: hidden; box-shadow: none; }
.settings-list > button, .settings-static { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 55px; padding: 8px 13px; border: 0; border-bottom: 1px solid var(--border); text-align: left; background: transparent; }
.settings-list > button { cursor: pointer; }
.settings-list > :last-child { border-bottom: 0; }
.settings-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 14px; font-weight: 800; }
.settings-list strong { display: block; font-size: 11px; }
.settings-list small { display: block; overflow: hidden; max-width: 280px; margin-top: 3px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.settings-list b { color: var(--muted); font-size: 18px; font-weight: 400; }
.monospace { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.install-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; box-shadow: none; }
.install-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--brand); }
.install-icon span { width: 19px; height: 19px; border: 2px solid white; border-radius: 4px; box-shadow: inset 0 -5px 0 rgba(255,255,255,.2); }
.install-card h2 { font-size: 12px; }
.install-card p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.bottom-nav {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: min(100%, 520px);
    min-height: calc(66px + var(--safe-bottom));
    margin: 0 auto;
    padding: 7px 6px calc(6px + var(--safe-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
}

.nav-button { display: grid; place-items: center; align-content: center; gap: 4px; min-width: 0; padding: 4px 1px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; }
.nav-button span { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.nav-button.active { color: var(--brand); }
.nav-button.active .app-icon { stroke-width: 2.15; }

.status-banner { margin-bottom: 13px; padding: 10px 12px; border: 1px solid color-mix(in srgb, #f3a712 35%, var(--border)); border-radius: 11px; color: #9a6400; background: color-mix(in srgb, #f3a712 12%, var(--surface)); font-size: 10px; line-height: 1.4; }
:root[data-theme="dark"] .status-banner { color: #ffd176; }
.busy-indicator { position: fixed; z-index: 60; top: calc(12px + var(--safe-top)); left: 50%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transform: translateX(-50%); }
.busy-indicator > span { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; align-items: end; overflow-y: auto; padding-top: var(--safe-top); background: rgba(0, 13, 31, .55); backdrop-filter: blur(7px); }
.profile-setup-layer { align-items: stretch; background: var(--background); }
.profile-setup-sheet { display: grid; align-content: start; gap: 18px; width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); background: var(--background); }
.profile-setup-sheet > header, .editor-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-setup-sheet header p, .editor-sheet header p { margin-bottom: 5px; color: var(--brand); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .5px; }
.profile-setup-sheet h1, .editor-sheet h1 { font-size: 23px; letter-spacing: -.4px; }
.setup-brand { display: flex; align-items: center; gap: 9px; color: var(--brand); font-size: 12px; font-weight: 800; }
.setup-intro { color: var(--muted); font-size: 12px; line-height: 1.55; }
.setup-loading { display: grid; place-items: center; gap: 12px; min-height: 220px; color: var(--muted); text-align: center; font-size: 11px; }
.setup-loading span { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
.setup-error-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 11px 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); border-radius: 12px; color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 82%, var(--surface)); font-size: 11px; line-height: 1.45; }
.retry-icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--border)); border-radius: 9px; color: var(--danger); background: var(--surface-soft); cursor: pointer; }
.retry-icon-button:active { background: color-mix(in srgb, var(--danger-soft) 68%, var(--surface-soft)); transform: scale(.97); }
.form-grid { display: grid; gap: 13px; }
.form-grid label { display: grid; gap: 6px; }
.form-grid label > span { color: var(--muted); font-size: 10px; font-weight: 650; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; outline: 0; color: var(--text); background: var(--surface); }
.form-grid textarea { resize: vertical; line-height: 1.45; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.selected-profile-preview { display: grid; gap: 4px; padding: 12px; border-radius: 11px; background: var(--brand-soft); }
.selected-profile-preview span { color: var(--muted); font-size: 9px; }
.selected-profile-preview strong { color: var(--brand); font-size: 12px; }
.primary-button, .secondary-button { min-height: 46px; padding: 10px 15px; border-radius: 12px; font-weight: 750; cursor: pointer; }
.primary-button { border: 0; color: white; background: var(--brand); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 24%, transparent); }
.secondary-button { border: 1px solid var(--border); color: var(--brand); background: var(--surface); }
.full-width { width: 100%; }
.primary-button:disabled { opacity: .55; cursor: progress; }

.editor-layer { padding: 50px 0 0; }
.editor-sheet { display: grid; gap: 17px; width: min(100%, 520px); max-height: calc(100dvh - 28px); overflow-y: auto; margin: 0 auto; padding: 19px 18px calc(20px + var(--safe-bottom)); border-radius: 22px 22px 0 0; background: var(--background); box-shadow: 0 -15px 50px rgba(0,0,0,.22); }
.toggle-row { display: flex !important; align-items: center; justify-content: space-between; min-height: 48px; padding: 5px 0; }
.toggle-row > span { display: grid; gap: 3px; }
.toggle-row strong { color: var(--text); font-size: 11px; }
.toggle-row small { color: var(--muted); font-size: 9px; }
.toggle-row input { width: 44px; min-height: 24px; }
.field-error { color: var(--danger); font-size: 10px; }

.empty-card { display: grid; place-items: center; gap: 6px; padding: 28px 18px; box-shadow: none; text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); }
.empty-card h2 { font-size: 13px; }
.empty-card p { max-width: 290px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.splash-screen { display: grid; place-content: center; place-items: center; gap: 12px; min-height: 100dvh; padding: 30px; text-align: center; }
.splash-screen h1 { font-size: 24px; }
.splash-screen p { color: var(--muted); font-size: 12px; }
.brand-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--brand); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 28%, transparent); }
.brand-mark.small { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
.brand-mark span { position: relative; width: 39px; height: 34px; border: 3px solid white; border-radius: 7px; }
.brand-mark span::before { content: ""; position: absolute; right: -3px; left: -3px; top: 8px; border-top: 3px solid white; }
.brand-mark span::after { content: ""; position: absolute; right: 7px; bottom: 7px; left: 7px; height: 5px; border-top: 3px solid white; border-bottom: 3px solid white; }
.brand-mark.small span { width: 18px; height: 17px; border-width: 2px; border-radius: 4px; }
.brand-mark.small span::before { right: -2px; left: -2px; top: 4px; border-width: 2px; }
.brand-mark.small span::after { right: 3px; bottom: 2px; left: 3px; height: 4px; border-width: 1px; }
.loading-bar { overflow: hidden; width: 150px; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--border); }
.loading-bar span { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--brand); animation: loading-slide 1.1s ease-in-out infinite alternate; }
@keyframes loading-slide { to { transform: translateX(122%); } }
.boot-placeholder { display: grid; place-items: center; min-height: 100dvh; }
.boot-placeholder span { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }

.empty-route { display: grid; place-content: center; min-height: 100dvh; text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
#blazor-error-ui { position: fixed; z-index: 200; right: 0; bottom: 0; left: 0; display: none; padding: 12px 42px 12px 14px; color: #3c2400; background: #ffd98e; font-size: 12px; }
#blazor-error-ui .dismiss { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; font-size: 20px; }

@media (min-width: 720px) {
    body { padding: 24px 0; background: color-mix(in srgb, var(--background) 75%, #1d3f68); }
    .web-app { width: 430px; min-height: calc(100dvh - 48px); margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 30px; box-shadow: 0 28px 80px rgba(0, 12, 30, .3); }
    .app-content { min-height: calc(100dvh - 48px); }
    .bottom-nav { bottom: 24px; width: 428px; border-radius: 0 0 29px 29px; }
}

@media (max-width: 360px) {
    .app-content { padding-right: 12px; padding-left: 12px; }
    .nav-button span { font-size: 7px; }
    .lesson-card { grid-template-columns: 68px 1fr; gap: 9px; }
    .new-note-button span { display: none; }
}

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