:root { --bg:#F6F8FC; --card:#FFFFFF; --primary:#477DED; --soft-blue:#DCE8FF; --ink:#1C2536; --muted:#617087; --line:#E6ECF5; --primary-ink:#315FBA; --ease:cubic-bezier(.22,.7,.2,1); --radius:20px; color-scheme:light; }
* { box-sizing:border-box; }
/* Keep native scrolling and momentum; hide only its visual chrome. */
html,body,dialog,.table-scroll,textarea { scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar,dialog::-webkit-scrollbar,dialog *::-webkit-scrollbar,.table-scroll::-webkit-scrollbar,textarea::-webkit-scrollbar { display:none; width:0; height:0; }
dialog,dialog * { scrollbar-width:none; }
html { overflow-anchor:none; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; -webkit-tap-highlight-color:transparent; overflow-x:hidden; }
main { max-width:560px; margin:0 auto; padding:calc(22px + env(safe-area-inset-top)) 20px calc(112px + env(safe-area-inset-bottom)); }
header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; min-height:66px; }
header h1 { font-size:29px; font-weight:700; letter-spacing:-.8px; line-height:1.3; margin:4px 0; }
.eyebrow { color:var(--muted); font-size:13px; font-weight:500; margin:0; }
.header-actions { display:flex; gap:8px; align-items:center; }
.icon-button { width:44px; height:44px; min-height:44px; padding:10px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
#add-lesson { width:48px; height:48px; background:var(--primary); box-shadow:0 4px 12px #477DED26; }
#settings-menu { color:var(--muted); border-color:transparent; background:transparent; }
.notice { font-size:11px; color:var(--muted); margin-bottom:15px; }
h2 { font-size:18px; font-weight:650; letter-spacing:-.3px; margin:0 0 14px; }
h2 small { font-size:12px; color:var(--muted); font-weight:400; }
h3 { font-size:17px; margin:14px 0; }
button,.button-link { min-height:46px; border:1px solid var(--line); background:var(--card); border-radius:13px; padding:10px 14px; color:var(--ink); font:inherit; font-size:15px; cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:#376CD9; color:white; border:0; font-weight:600; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.danger { color:#B74450; }
.wide { width:100%; margin:8px 0; }
.text-button { color:var(--primary-ink); border:0; background:transparent; }
input,select,textarea { font:inherit; width:100%; min-width:0; min-height:48px; border:1px solid var(--line); border-radius:12px; padding:12px; background:#F8FAFD; color:var(--ink); font-size:16px; }
textarea { min-height:140px; resize:vertical; }
label { display:block; color:var(--muted); font-size:14px; margin:12px 0 7px; }
.field { margin:12px 0; }
.date-time { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; }
.panel { background:var(--card); border:1px solid #EDF1F7; border-radius:var(--radius); padding:18px; margin:16px 0; box-shadow:0 2px 8px #1C253603; }
.subtle { color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.row,.toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.block-item { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.student-card .row button { flex:1; }
.empty { text-align:center; padding:40px 20px; color:var(--muted); line-height:1.9; }
.salary strong { display:block; font-size:40px; letter-spacing:-1px; margin:14px 0; color:var(--primary-ink); }
.salary input { max-width:190px; }
.month-row { display:flex; justify-content:space-between; align-items:center; width:100%; padding:16px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; text-align:left; font-size:14px; gap:12px; }
.month-row small,.candidate small,.draft-card small { display:block; font-size:12px; color:var(--muted); margin-top:5px; font-weight:400; }
.draft-card { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; gap:7px; }
.draft-card span { font-size:13px; color:var(--primary-ink); }
.candidate { text-align:left; }
.candidate strong { font-size:16px; }
.stack { display:grid; gap:10px; }
details { margin:18px 0; color:var(--muted); }
summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:14px; }
.intent { border:1px solid var(--line); border-radius:15px; margin:18px 0; padding:12px; }
.intent legend { font-size:13px; color:var(--muted); }
blockquote { margin:0; background:#EEF3FD; padding:12px; border-radius:10px; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.course-row { display:grid; grid-template-columns:1fr 1fr 44px; gap:6px; margin:12px 0; }
.course-row button { padding:5px; }
.form-grid { display:block; }
.details dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.table-scroll { overflow:auto; }
footer { display:none; }

/* One persistent capsule and one moving indicator, shared by every route. */
.sidebar { position:fixed; inset-inline:0; margin-inline:auto; bottom:calc(12px + env(safe-area-inset-bottom)); width:min(440px,calc(100% - 32px)); z-index:30; }
.glass-nav { position:relative; display:grid; grid-template-columns:repeat(4,1fr); padding:7px; height:76px; border-radius:34px; border:1px solid #FFFFFFD9; background:#F8FAFCCC; -webkit-backdrop-filter:blur(20px) saturate(135%); backdrop-filter:blur(20px) saturate(135%); box-shadow:0 10px 32px #284D8120,0 2px 6px #284D8108,inset 0 1px 0 #FFFFFF; isolation:isolate; }
.glass-nav a { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; gap:3px; color:#4C5D76; text-decoration:none; font-size:12px; font-weight:500; border-radius:25px; }
.glass-nav a svg { width:23px; height:23px; }
.glass-nav a.active { color:var(--primary-ink); font-weight:650; }
.tab-indicator { position:absolute; inset:7px auto 7px 7px; width:calc((100% - 14px)/4); border-radius:25px; background:linear-gradient(155deg,#FFFFFFF2,#DCE8FF73); border:1px solid #FFFFFFE8; box-shadow:0 2px 8px #477DED14,inset 0 1px 1px #FFFFFF; transform:translateX(0); transition:transform 280ms var(--ease); }
.glass-nav[data-active="1"] .tab-indicator { transform:translateX(100%); }
.glass-nav[data-active="2"] .tab-indicator { transform:translateX(200%); }
.glass-nav[data-active="3"] .tab-indicator { transform:translateX(300%); }
#page-stage { position:relative; }
#content { min-width:0; }
.page-ghost { position:fixed; pointer-events:none; z-index:20; }

/* Calendar uses solid cards, colour for identity and text badges for status. */
main[data-page="calendar"] { --muted:#4C5D76; }
main[data-page="calendar"] .notice { font-size:12px; }
.week-picker { margin:0 0 19px; }
.week-tools { display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:36px; margin-bottom:9px; }
.week-tools > span { color:var(--muted); font-size:12px; white-space:nowrap; }
.today-button { padding:5px 0; border:0; background:transparent; min-height:36px; color:var(--primary-ink); font-size:12px; font-weight:600; }
.week-arrows { display:flex; gap:2px; }
.week-arrows .icon-button { width:36px; height:36px; min-height:36px; padding:8px; background:transparent; border:0; }
.week-arrows svg { width:19px; height:19px; }
.week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.week-date { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:9px 0 6px; min-height:76px; border-radius:18px; border:1px solid transparent; background:transparent; }
.week-date > span { font-size:12px; font-weight:500; color:var(--muted); }
.week-date strong { font-size:19px; font-weight:600; line-height:1.25; }
.week-date.is-today strong { color:var(--primary-ink); }
.week-date.selected { background:var(--soft-blue); border-color:#CADAF7; box-shadow:inset 0 1px 0 #FFFFFF9C; }
.week-date.selected > span { color:#355C9E; }
.date-dot { display:block; width:4px; height:4px; border-radius:50%; background:transparent; }
.date-dot.has-lessons { background:#7587A2; }
.selected .date-dot.has-lessons { background:var(--primary-ink); }
.agenda-heading { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; gap:8px; }
.agenda-heading h2 { font-size:16px; margin:0; }
.agenda-heading > span { color:var(--muted); font-size:12px; }
.agenda-date { font-size:13px; color:var(--muted); font-weight:600; margin:20px 0 12px 78px; }
.timeline-item { display:grid; grid-template-columns:52px 12px minmax(0,1fr); gap:7px; align-items:start; margin-bottom:10px; position:relative; }
.timeline-item:not(:last-child)::after { content:''; position:absolute; top:28px; bottom:-40px; left:64px; width:1px; background:#DAE3EF; z-index:0; }
.timeline-dot,.timeline-time,.lesson { position:relative; z-index:1; }
.timeline-time { display:flex; flex-direction:column; align-items:flex-start; padding-top:15px; font-variant-numeric:tabular-nums; }
.timeline-time time { font-size:16px; font-weight:650; letter-spacing:-.4px; }
.timeline-time small { color:var(--muted); font-size:12px; font-weight:500; margin-top:3px; white-space:nowrap; }
.timeline-dot { margin-top:22px; width:11px; height:11px; border-radius:50%; border:2px solid var(--bg); background:var(--student-color); box-shadow:0 0 0 1px var(--student-tint); }
.lesson { width:100%; min-height:96px; border:1px solid #E9EEF6; border-left:3px solid var(--student-color); border-radius:17px; padding:13px 14px; background:#FFFFFF; text-align:left; box-shadow:0 3px 12px #253D6505; }
.lesson-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.lesson-top strong { font-size:15px; font-weight:650; letter-spacing:-.2px; overflow-wrap:anywhere; }
.lesson-subject { display:block; font-size:13px; color:var(--muted); margin:3px 0 5px; }
.lesson-meta { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; font-weight:500; }
.lesson-meta svg { width:13px; height:13px; }
.meta-dot { margin:0 2px; }
.badge { flex-shrink:0; font-size:10px; white-space:nowrap; padding:3px 7px; border-radius:7px; font-weight:500; background:#FFF2DC; color:#86581D; }
.badge.confirmed { background:#E9F3ED; color:#386B51; }
.badge.completed { background:#EDF1F8; color:#5A6F8C; }
.badge.cancelled { background:#F3EDEE; color:#80535B; }
main[data-page="calendar"] .badge { font-size:11px; font-weight:600; }
.color-blue { --student-color:#8DAEDB; --student-tint:#DBE8FC; --student-ink:#3C6193; }
.color-sage { --student-color:#9BBDB0; --student-tint:#E4F0E9; --student-ink:#3C6D58; }
.color-lavender { --student-color:#B1A2D0; --student-tint:#EEE8F8; --student-ink:#69558F; }
.color-sand { --student-color:#C7AF8D; --student-tint:#F5EEE2; --student-ink:#7F6544; }
.color-rose { --student-color:#D0A1AC; --student-tint:#F7E8EC; --student-ink:#885365; }
.color-teal { --student-color:#8EBAC5; --student-tint:#E2F0F3; --student-ink:#376B78; }
.calendar-empty { text-align:center; padding:46px 0 60px; }
.calendar-empty > svg { width:34px; height:34px; color:#91A8CC; }
.calendar-empty h3 { font-size:17px; margin:16px 0 6px; }
.calendar-empty p { color:var(--muted); font-size:13px; margin:0 0 20px; }
.soft-button { background:var(--soft-blue); color:var(--primary-ink); border:0; display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.soft-button svg { width:18px; height:18px; }

/* Existing editors retained; course details use the glass bottom sheet. */
dialog { position:fixed; border:1px solid #FFFFFF; border-radius:25px; width:min(540px,calc(100vw - 24px)); max-height:calc(92dvh - env(safe-area-inset-top)); padding:22px 20px calc(22px + env(safe-area-inset-bottom)); color:var(--ink); background:#FFFFFF; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-shadow:0 20px 80px #1C253628; }
dialog:focus { outline:none; }
dialog::backdrop { background:#1C253645; }
dialog[data-presentation="sheet"] { inset:auto 0 0; margin:0 auto; width:min(560px,100vw); max-height:calc(92dvh - env(safe-area-inset-top)); border-radius:30px 30px 0 0; background:#F9FBFEF2; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); padding:12px 24px calc(24px + env(safe-area-inset-bottom)); }
.sheet-grabber { display:flex; align-items:center; justify-content:center; width:100%; height:28px; min-height:28px; margin:0 auto 8px; padding:0; background:transparent; border:0; touch-action:none; cursor:grab; }
.sheet-grabber::before { content:''; width:34px; height:4px; background:#BCC7D6; border-radius:4px; }
dialog[data-dragging="true"] .sheet-grabber { cursor:grabbing; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.dialog-head h2 { margin:0; font-size:18px; }
.dialog-head button { width:44px; min-height:44px; height:44px; padding:0; font-size:22px; line-height:1; border-radius:50%; background:#EDF1F5; border:0; color:var(--muted); }
.dialog-actions { display:flex; gap:10px; margin-top:22px; }
.dialog-actions button { flex:1; }
.check-label { display:flex; align-items:center; gap:10px; line-height:1.6; }
.check-label input { width:22px; min-height:22px; flex-shrink:0; }
.sheet-student { display:flex; gap:12px; align-items:center; margin:12px 0 24px; }
.sheet-student > div { flex:1; min-width:0; }
.student-avatar { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:15px; background:var(--student-tint); color:var(--student-ink); font-size:19px; font-weight:600; }
.sheet-student h3 { font-size:19px; margin:0 0 3px; overflow-wrap:anywhere; }
.sheet-student p { font-size:13px; color:var(--muted); margin:0; }
.lesson-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px 14px; padding:18px; margin-bottom:22px; border:1px solid #E7EDF6; border-radius:18px; background:#FFFFFF99; }
.lesson-facts span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.lesson-facts strong { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
button.complete-primary { background:#376CD9; font-size:19px; font-weight:650; min-height:54px; display:flex; justify-content:center; align-items:center; gap:8px; }
.completion-hint { font-size:12px; color:#4C5D76; text-align:center; margin:-1px 0 0; }
.lesson-facts span { font-size:12px; color:#4C5D76; }
.sheet-secondary { display:flex; gap:10px; margin-top:16px; }
.sheet-secondary button { flex:1; background:#FFFFFF91; }
.earned-note { display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 20px; color:#386B51; }
.earned-note svg { width:18px; height:18px; }
.settings-list { display:grid; gap:6px; }
.settings-list > button { display:flex; gap:12px; align-items:center; text-align:left; background:transparent; border:0; min-height:56px; }
.settings-list > button svg:first-child { color:var(--primary-ink); width:22px; height:22px; }
.settings-list > button svg:last-child { margin-left:auto; width:17px; height:17px; color:var(--muted); }
.error { background:#FFF0EC; color:#A53929; border-radius:12px; padding:12px; line-height:1.7; font-size:14px; }
.error[hidden] { display:none; }
#toast { position:fixed; bottom:calc(103px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); width:max-content; background:#26354BEF; color:white; padding:10px 16px; border-radius:18px; display:none; align-items:center; gap:16px; z-index:40; font-size:13px; line-height:1.6; box-shadow:0 8px 24px #1C253623; }
#toast button { min-height:36px; border:0; padding:4px 8px; background:#FFFFFF1A; color:#FFFFFF; font-size:13px; font-weight:600; border-radius:10px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass-nav { background:#F6F8FC; } dialog[data-presentation="sheet"] { background:#F9FBFE; } }
@media (max-width:360px) { main { padding-left:14px; padding-right:14px; } header h1 { font-size:26px; } .header-actions { gap:2px; } .week-days { gap:1px; } .timeline-item { grid-template-columns:46px 10px minmax(0,1fr); gap:5px; } .timeline-item:not(:last-child)::after { left:55px; } .lesson { padding:12px 10px; } .lesson-top strong { font-size:14px; } .badge { font-size:9px; padding:3px 5px; } .date-time { gap:6px; } dialog[data-presentation="sheet"] { padding-left:18px; padding-right:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }