:root{
  --bg:#f4f6f8;--surface:#fff;--surface2:#f8fafb;--text:#17212b;--muted:#71808f;
  --line:#d9e3ec;--accent:#274e73;--accent2:#4d82b1;--blue-soft:#dcebf6;--blue:#3e79a8;--danger:#b42318;--shadow:0 12px 34px rgba(33,73,105,.08)
}
:root[data-theme="dark"]{
  --bg:#101419;--surface:#171d23;--surface2:#1c232a;--text:#edf2f7;--muted:#9ba8b5;
  --line:#2b3945;--accent:#dcebf7;--accent2:#7fb0d6;--blue-soft:#20384c;--blue:#8ab9dc;--danger:#ff8d86;--shadow:0 12px 34px rgba(0,0,0,.24)
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--blue-soft) 48%,transparent),transparent 32%),radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--blue-soft) 34%,transparent),transparent 28%),var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--accent2);text-underline-offset:3px}
.topbar{border-top:1px solid var(--accent);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.topbar-inner{max-width:1080px;margin:auto;min-height:72px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-size:20px;font-weight:750;letter-spacing:.02em}
.brand img{width:40px;height:40px}
nav{display:flex;align-items:center;gap:20px}nav a{font-size:14px}
.inline{display:inline}
.link-button,.theme-toggle{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit}
.theme-toggle{font-size:20px;line-height:1;padding:4px}
.container{max-width:1080px;margin:auto;padding:0 22px}
.page-head{padding:62px 0 34px}.eyebrow{margin:0 0 8px;color:#8191a0;font-size:12px;font-weight:800;letter-spacing:.14em}.page-head h1,.subject-head h1{font-size:42px;line-height:1.05;margin:0 0 12px;letter-spacing:-.035em}.lead{margin:0;color:var(--muted);font-size:17px}
.subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.subject-card{position:relative;display:flex;gap:16px;align-items:center;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:22px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:.18s}.subject-card:hover{transform:translateY(-2px)}.subject-dot{width:10px;height:48px;border-radius:8px;flex:none}.subject-card h2{font-size:21px;margin:0 0 3px}.subject-card p,.meta{margin:0;color:var(--muted);font-size:14px}.meta{margin-top:8px}.arrow{margin-left:auto;color:var(--muted);font-size:24px}
.empty{padding:70px 30px;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:24px;color:var(--muted)}.empty h2{margin:0 0 8px;color:var(--text)}.empty.compact{padding:35px}.footer{padding-top:50px;padding-bottom:30px;color:var(--muted);font-size:13px}
.login-wrap{min-height:calc(100vh - 150px);display:grid;place-items:center}.login-card{width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:38px;box-shadow:var(--shadow)}.logo-big img{width:56px;height:56px}.login-card h1{font-size:44px;margin:0 0 8px}.login-card .muted{margin-bottom:28px}
label{display:block;font-size:14px;font-weight:650;margin:0 0 15px;color:var(--text)}input,textarea{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--surface2);color:var(--text);font:inherit;outline:none}input:focus,textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 15%,transparent)}
button,.button{font:inherit}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:13px;padding:10px 15px;text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}.button:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(54,104,145,.10)}.primary{background:linear-gradient(135deg,var(--accent),var(--blue));border-color:var(--accent);color:#fff;font-weight:750}.secondary{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--blue-soft) 30%,var(--surface)));color:var(--text)}.danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 40%,var(--line));color:var(--danger)}.wide{width:100%}.small-button{padding:7px 10px;font-size:13px}
.flash{margin-top:22px;padding:12px 15px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}.flash.ok{border-color:#55a87a}.flash.error{border-color:#d46a63}
.subject-head{padding:46px 0 32px;display:flex;justify-content:space-between;gap:20px}.back{display:inline-block;margin-bottom:18px;color:var(--muted);text-decoration:none}.columns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.8fr);gap:18px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.section-head .button{flex:none;white-space:nowrap}.section-head h2{margin:0}.stack{display:grid;gap:12px}.card,.side-card,.admin-add{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--blue-soft)),var(--surface));border:1px solid var(--line);border-radius:20px;padding:21px;box-shadow:var(--shadow)}.card h3,.side-card h3{margin:0;font-size:18px}.card-title{display:flex;justify-content:space-between;gap:15px;align-items:center}.date,.muted{color:var(--muted)}.small{font-size:13px}.body{white-space:pre-wrap}.side-card{margin-bottom:14px}.file-list{margin-top:12px;border-top:1px solid var(--line)}.file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.icon-button{border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer}.upload-form{display:grid;gap:10px;margin:15px 0}.admin-add{margin-top:24px}.admin-add h2{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.danger-link{border:0;background:none;color:var(--danger);padding:0;cursor:pointer;margin-top:10px}.admin-section{margin:30px 0}.count,.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:99px;background:var(--accent2);color:#fff;font-size:12px;padding:0 6px}.actions{display:flex;gap:8px;margin-top:15px}.suggestion{border-left:4px solid var(--accent2)}

.file-picker{display:flex;align-items:center;gap:10px;margin-top:7px;padding:8px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(135deg,var(--surface2),color-mix(in srgb,var(--blue-soft) 24%,var(--surface2)));min-height:48px}.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-picker-button{display:inline-flex!important;align-items:center;justify-content:center;min-height:34px;margin:0!important;padding:7px 12px!important;border:1px solid color-mix(in srgb,var(--blue) 34%,var(--line));border-radius:10px!important;background:var(--surface)!important;color:var(--text)!important;font-size:14px!important;font-weight:650!important;cursor:pointer;white-space:nowrap}.file-picker-button:hover{border-color:var(--blue);background:var(--blue-soft)!important}.file-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px}.upload-form .button{min-height:46px}.assignment-actions{background:linear-gradient(90deg,color-mix(in srgb,var(--blue-soft) 18%,transparent),transparent);border-radius:0 0 12px 12px}.materials-card .section-head{align-items:flex-end}.materials-card .small-button{margin-bottom:2px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.open{display:flex}.modal-box{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.25)}.modal-box h2{margin-top:0}.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;color:var(--muted);font-size:28px;cursor:pointer}
.error-page{margin-top:60px}.error-code{font-size:64px;font-weight:800;color:var(--muted)}
@media(max-width:760px){.file-picker{align-items:stretch;flex-wrap:wrap}.file-picker-name{flex:1;line-height:34px}.topbar-inner{min-height:62px;padding:0 16px}.container{padding:0 16px}.page-head{padding:42px 0 25px}.page-head h1,.subject-head h1{font-size:34px}.columns{grid-template-columns:1fr}.subject-head{padding:35px 0 25px}.form-grid{grid-template-columns:1fr}.subject-grid{grid-template-columns:1fr}.nav a{font-size:13px}.brand img{width:36px;height:36px}}

.assignment-files{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.assignment-files .eyebrow{margin-bottom:4px}.assignment-files .file-row{padding:8px 0}.materials-card .small-button{padding:8px 12px}

/* v5 navigation, notes and assignment actions */
.main-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.main-nav a{color:var(--muted);text-decoration:none;font-size:14px}.main-nav a:hover{color:var(--text)}
.page-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.notes-head{padding-bottom:28px}
.assignment-head{align-items:flex-start;margin-bottom:14px}.assignment-head h2{padding-top:3px}.compact-action{padding:8px 14px;font-size:14px;margin-top:-4px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--blue-soft) 38%,var(--surface)));border-color:color-mix(in srgb,var(--blue) 28%,var(--line))}.assignment-card{padding:20px 21px}.assignment-actions{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}.assignment-actions .danger-link{margin:0}
.notes-list{display:grid;gap:12px}.note-card{display:flex;justify-content:space-between;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}.note-main{min-width:0}.note-title-row{display:flex;align-items:baseline;gap:12px}.note-title-row h2{margin:0;font-size:20px}.note-date{color:var(--muted);font-size:12px;white-space:nowrap}.note-card .body{margin:10px 0 0}.note-actions{display:flex;align-items:flex-start;gap:7px;flex:none}
@media(max-width:760px){.main-nav{gap:11px}.page-head-row{align-items:flex-start;flex-direction:column}.note-card{flex-direction:column}.note-actions{align-items:center}.note-title-row{display:block}.note-date{display:block;margin-top:3px}.assignment-actions{flex-wrap:wrap}}

/* v6 fixed navigation */
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;padding:22px 14px 18px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.sidebar-top{padding:0 10px 26px}.sidebar .brand{font-size:20px}.side-nav{display:grid;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);text-decoration:none;font:inherit;text-align:left;cursor:pointer}.nav-item svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.nav-item:hover{background:var(--surface2);color:var(--text)}.nav-item.active{background:linear-gradient(135deg,color-mix(in srgb,var(--blue-soft) 45%,var(--surface2)),var(--surface2));border-color:color-mix(in srgb,var(--blue) 25%,var(--line));color:var(--text);font-weight:650}.nav-item .badge{margin-left:auto}.side-bottom{margin-top:auto;display:grid;gap:4px;border-top:1px solid var(--line);padding-top:12px}.side-bottom form{margin:0}.nav-button{appearance:none}.container{max-width:1080px;margin-left:248px;padding-left:42px;padding-right:42px}.footer{padding-bottom:30px}.topbar + .container{margin-left:auto;padding-left:22px;padding-right:22px}.topbar + .container + .footer{margin-left:auto}.topbar{border-top:1px solid var(--accent)}
@media(max-width:760px){.sidebar{inset:auto 0 0 0;width:100%;height:70px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);flex-direction:row;align-items:stretch}.sidebar-top{display:none}.side-nav{display:flex;flex:1;gap:3px}.side-nav .nav-item{flex:1;min-width:0;min-height:56px;padding:7px 4px;flex-direction:column;justify-content:center;gap:3px;border-radius:11px;font-size:10px}.side-nav .nav-item svg{width:20px;height:20px}.side-nav .nav-item .badge{position:absolute;margin:-29px 0 0 24px;min-width:17px;height:17px;font-size:10px;padding:0 4px}.side-bottom{display:flex;margin:0;border:0;padding:0;gap:3px}.side-bottom .nav-button{width:52px;min-height:56px;padding:7px 3px;flex-direction:column;justify-content:center;gap:3px;font-size:10px;border-radius:11px}.side-bottom .nav-button svg{width:20px;height:20px}.container{margin-left:0;padding-left:16px;padding-right:16px;padding-bottom:86px}.footer{padding-bottom:90px}.topbar + .container{padding-bottom:20px}}

/* v8 schedule */
.schedule-head{padding-bottom:20px}
.schedule-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:13px}
.schedule-meta span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,var(--blue-soft))}
.timezone-banner{display:flex;align-items:center;gap:10px;margin:0 0 28px;padding:12px 15px;border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line));border-radius:15px;background:linear-gradient(105deg,color-mix(in srgb,var(--blue-soft) 58%,var(--surface)),var(--surface));color:var(--muted);font-size:14px}
.timezone-banner svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.7;flex:none}
.timezone-banner strong{color:var(--text)}
.schedule-list{display:grid;gap:28px}
.schedule-day{position:relative}
.schedule-day-head{display:flex;align-items:center;gap:15px;margin-bottom:12px}
.schedule-day-head h2{margin:0;font-size:22px;letter-spacing:-.02em}
.schedule-day-head span{color:var(--muted);font-size:13px}
.day-line{height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
.lesson-list{display:grid;gap:8px}
.lesson-card{display:grid;grid-template-columns:112px minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:15px 17px;background:linear-gradient(115deg,color-mix(in srgb,var(--surface) 93%,var(--blue-soft)),var(--surface));border:1px solid var(--line);border-radius:17px;box-shadow:0 7px 24px rgba(33,73,105,.055);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.lesson-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--blue) 38%,var(--line));box-shadow:0 10px 28px rgba(33,73,105,.09)}
.lesson-time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:760;white-space:nowrap}
.lesson-time small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:500}
.lesson-main{min-width:0}
.lesson-main h3{margin:0;font-size:16px;line-height:1.3}
.lesson-main p{margin:3px 0 0;color:var(--muted);font-size:13px}
.lesson-kind{padding:5px 8px;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:8px;color:var(--blue);background:color-mix(in srgb,var(--blue-soft) 42%,var(--surface));font-size:11px;font-weight:750;white-space:nowrap}
.lesson-kind.practice{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.lesson-join{padding:7px 11px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--blue));color:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px rgba(39,78,115,.16)}
.lesson-join:hover{filter:brightness(1.06)}
.schedule-empty{padding:16px 18px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);background:var(--surface)}
.schedule-note{margin:8px 0 0;padding:0 3px;color:var(--muted);font-size:12px;line-height:1.5}
.schedule-day.local-date-match .schedule-day-head h2::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue-soft) 60%,transparent)}
@media(max-width:760px){
  .schedule-meta{margin-top:15px}
  .timezone-banner{align-items:flex-start}
  .lesson-card{grid-template-columns:1fr auto;gap:9px 12px;padding:14px}
  .lesson-time{grid-column:1}
  .lesson-kind{grid-column:2;grid-row:1}
  .lesson-main{grid-column:1 / -1;grid-row:2}
  .lesson-join{grid-column:1 / -1;grid-row:3;text-align:center}
  .lesson-main h3{font-size:16px}
}


/* v9 visual refinement - calm blue/Gzhel accent */
:root{
  --bg:#f3f6f8;--surface:#ffffff;--surface2:#f7fafc;--line:#d7e1e9;
  --text:#17232e;--muted:#71808e;--accent:#24577f;--accent2:#4b84ad;
  --blue-soft:#dbeaf4;--blue:#3f7fa9;--shadow:0 16px 42px rgba(39,78,115,.075)
}
:root[data-theme="dark"]{
  --bg:#0d1218;--surface:#141c24;--surface2:#19232d;--line:#293845;
  --text:#edf4f8;--muted:#98a8b5;--accent:#a9d1eb;--accent2:#82b8dc;
  --blue-soft:#1c374b;--blue:#8dc0e1;--shadow:0 18px 48px rgba(0,0,0,.28)
}
body{background:
  radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--blue-soft) 62%,transparent),transparent 31%),
  radial-gradient(circle at 96% 8%,color-mix(in srgb,var(--blue-soft) 42%,transparent),transparent 27%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 96%,var(--blue-soft)),var(--bg));
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:radial-gradient(circle at 20px 20px,color-mix(in srgb,var(--blue) 16%,transparent) 1px,transparent 1.5px);background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent 65%)}
.app-header{position:fixed;top:0;right:0;left:248px;height:72px;padding:0 30px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px);border-top:1px solid color-mix(in srgb,var(--blue) 45%,var(--line));border-bottom:1px solid color-mix(in srgb,var(--blue) 15%,var(--line));z-index:19}
.app-header-inner{height:100%;display:flex;align-items:center;justify-content:flex-end;max-width:1100px;margin:auto}
.mobile-brand{display:none}
.header-actions{display:flex;align-items:center;gap:5px}.header-actions form{margin:0}.header-action{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 11px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}.header-action:hover{background:var(--surface2);color:var(--text)}.header-action svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar{background:color-mix(in srgb,var(--surface) 94%,var(--blue-soft));border-right:1px solid color-mix(in srgb,var(--blue) 16%,var(--line));box-shadow:8px 0 30px rgba(39,78,115,.035)}
.sidebar-top{padding-bottom:24px}.sidebar .brand{font-size:21px}.sidebar .brand img{filter:drop-shadow(0 4px 10px rgba(63,127,169,.15))}
.nav-label,.nav-section-label{padding:0 12px 8px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em}.nav-section-label{margin-top:18px;padding-bottom:7px}
.side-nav{gap:5px}.nav-item{min-height:46px;border-radius:13px}.nav-item.active{background:linear-gradient(135deg,color-mix(in srgb,var(--blue-soft) 70%,var(--surface2)),var(--surface2));border-color:color-mix(in srgb,var(--blue) 24%,var(--line));box-shadow:inset 3px 0 0 var(--blue)}
.side-bottom{padding-top:14px}.side-bottom .nav-item{min-height:43px}
.container{padding-top:92px}.page-head{padding-top:46px}.page-head h1,.subject-head h1{letter-spacing:-.04em}.page-head:after,.subject-head:after{content:"";display:block;width:72px;height:3px;margin-top:20px;border-radius:99px;background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue-soft) 30%,transparent))}
.subject-card,.card,.side-card,.admin-add,.note-card,.assignment-card,.login-card{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--blue) 10%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--blue-soft)),var(--surface));transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.subject-card:hover,.card:hover,.side-card:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(39,78,115,.10);border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}
.subject-card{border-radius:20px}.button{border-radius:12px}.primary{background:linear-gradient(135deg,var(--accent),var(--blue))}
.schedule-day{padding:4px 0}.schedule-day-head{margin-bottom:14px}.schedule-day-head h2{font-size:23px}.schedule-day.is-today .schedule-day-head h2{color:var(--accent)}.schedule-day.is-today .schedule-day-head h2:after{content:"СЕГОДНЯ";display:inline-block;margin-left:9px;padding:3px 7px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:9px;letter-spacing:.08em;vertical-align:middle}.schedule-day.is-today .day-line{background:linear-gradient(90deg,var(--blue),transparent)}
.lesson-card{border-radius:18px;padding:16px 18px;box-shadow:0 8px 26px rgba(39,78,115,.055);border-color:color-mix(in srgb,var(--blue) 10%,var(--line))}.lesson-card:hover{box-shadow:0 14px 32px rgba(39,78,115,.10)}.lesson-join{border-radius:11px}
.timezone-banner{border-color:color-mix(in srgb,var(--blue) 30%,var(--line));background:linear-gradient(105deg,color-mix(in srgb,var(--blue-soft) 65%,var(--surface)),var(--surface));box-shadow:0 8px 24px rgba(39,78,115,.045)}
.footer{opacity:.82}
@media(max-width:760px){
  .app-header{position:sticky;left:0;right:0;top:0;height:62px;padding:0 12px;z-index:25}.app-header-inner{justify-content:space-between}.mobile-brand{display:flex;font-size:18px}.mobile-brand img{width:34px;height:34px}.header-actions{gap:1px}.header-action{min-height:38px;padding:7px 8px}.header-action span{font-size:11px}.header-action svg{width:18px;height:18px}
  .sidebar{z-index:30}.sidebar-top{display:none}.side-bottom{display:none}.side-nav{display:flex;flex:1;gap:3px}.side-nav .nav-item{flex:1;min-width:0;min-height:56px;padding:7px 4px;flex-direction:column;justify-content:center;gap:3px;border-radius:12px;font-size:10px}.side-nav .nav-item svg{width:20px;height:20px}.side-nav .nav-item .badge{position:absolute;margin:-29px 0 0 24px}.nav-label,.nav-section-label{display:none}
  .container{margin-left:0;padding:20px 16px 88px}.page-head{padding:28px 0 24px}.page-head h1,.subject-head h1{font-size:34px}.page-head:after,.subject-head:after{margin-top:16px}.subject-card{padding:20px}.lesson-card{padding:14px}.footer{padding-bottom:92px}
}


/* ============================================================
   ZN361 AURORA - visual overhaul
   ============================================================ */
:root{
  --bg:#f2f6f8;
  --surface:#ffffff;
  --surface2:#f7fafc;
  --line:#d9e4eb;
  --text:#162630;
  --muted:#71828d;
  --accent:#245a7e;
  --accent2:#4386b0;
  --blue-soft:#dcecf5;
  --blue:#4386ad;
  --glow-a:rgba(92,166,205,.20);
  --glow-b:rgba(108,190,205,.13);
  --glow-c:rgba(87,125,190,.10);
  --shadow:0 14px 42px rgba(38,76,99,.065);
}
:root[data-theme="dark"]{
  --bg:#0b1218;
  --surface:#131d25;
  --surface2:#18242d;
  --line:#2a3a46;
  --text:#edf5f8;
  --muted:#98aab6;
  --accent:#a9d4eb;
  --accent2:#7db6d9;
  --blue-soft:#1a3749;
  --blue:#86bddf;
  --glow-a:rgba(74,154,198,.14);
  --glow-b:rgba(82,180,181,.08);
  --glow-c:rgba(91,111,190,.08);
  --shadow:0 18px 55px rgba(0,0,0,.22);
}
html{scroll-behavior:smooth}
body{
  overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 8% -8%,color-mix(in srgb,var(--blue-soft) 62%,transparent),transparent 68%),
    radial-gradient(760px 500px at 96% 8%,color-mix(in srgb,var(--blue-soft) 42%,transparent),transparent 67%),
    var(--bg);
}
body:before{display:none}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{
  position:absolute;display:block;width:clamp(220px,30vw,520px);height:clamp(180px,24vw,430px);
  border-radius:58% 42% 63% 37% / 43% 57% 45% 55%;
  filter:blur(58px);opacity:.72;mix-blend-mode:multiply;
  animation:zn-float 22s ease-in-out infinite alternate;
}
:root[data-theme="dark"] .glow{mix-blend-mode:screen;opacity:.58}
.glow-a{left:-9%;top:12%;background:var(--glow-a);transform:rotate(-18deg);animation-duration:27s}
.glow-b{right:-8%;top:34%;background:var(--glow-b);transform:rotate(26deg);animation-duration:32s;animation-delay:-9s}
.glow-c{left:38%;bottom:-18%;background:var(--glow-c);transform:rotate(-9deg);animation-duration:36s;animation-delay:-18s}
@keyframes zn-float{
  0%{translate:-3% -2%;scale:.94;rotate:-3deg}
  45%{translate:5% 4%;scale:1.04;rotate:5deg}
  100%{translate:-2% 7%;scale:.98;rotate:-4deg}
}
.container,.footer,.topbar{position:relative;z-index:2}
.app-header,.sidebar{z-index:20}
@media(min-width:761px){.app-header{position:fixed}.sidebar{position:fixed}}
.container{position:relative}
.page-ready main{animation:zn-page-in .38s cubic-bezier(.2,.75,.25,1) both}
.page-leaving main{animation:zn-page-out .15s ease both}
@keyframes zn-page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes zn-page-out{from{opacity:1}to{opacity:0;transform:translateY(-3px)}}

.app-header{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom-color:color-mix(in srgb,var(--blue) 13%,var(--line));
}
.sidebar{
  background:color-mix(in srgb,var(--surface) 91%,var(--blue-soft));
  box-shadow:8px 0 34px rgba(37,91,119,.035);
}
.sidebar-top{padding-bottom:28px}
.sidebar .brand{font-weight:780;letter-spacing:-.015em}
.nav-item{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.nav-item:hover{transform:translateX(2px)}
.nav-item.active{box-shadow:inset 3px 0 0 var(--blue),0 5px 18px rgba(55,110,143,.05)}
.side-bottom .nav-item:hover{transform:none}

.page-head{padding-top:48px;padding-bottom:30px}
.page-head h1,.subject-head h1{font-weight:780}
.page-head:after,.subject-head:after{width:54px;height:3px;margin-top:17px;opacity:.8}
.lead{max-width:650px}
.home-hero{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:55px 0 42px;
}
.home-copy h1{font-size:clamp(48px,6vw,76px);line-height:.92;letter-spacing:-.065em;margin:0 0 17px;font-weight:820}
.home-copy .lead{font-size:17px}
.hero-admin{gap:9px;flex:none}
.hero-admin svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.home-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:4px 0 15px;padding-top:4px;
}
.home-section-head h2{margin:0;font-size:23px;letter-spacing:-.025em}
.home-section-head .eyebrow{margin-bottom:4px}
.subject-count{
  min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 75%,var(--blue-soft));
  color:var(--muted);font-size:13px;font-weight:750;
}
.subject-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:11px}
.subject-card{
  min-height:128px;padding:20px 20px 19px 17px;gap:14px;border-radius:18px;
  overflow:hidden;isolation:isolate;
  box-shadow:0 8px 26px rgba(38,76,99,.045);
}
.subject-card:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(420px 150px at 0 100%,color-mix(in srgb,var(--subject-accent) 8%,transparent),transparent 65%);
}
.subject-accent{
  width:4px;height:62px;border-radius:99px;background:var(--subject-accent);flex:none;
  opacity:.85;box-shadow:0 0 18px color-mix(in srgb,var(--subject-accent) 24%,transparent);
}
.subject-content{min-width:0;flex:1}
.subject-title-row{display:flex;align-items:flex-start;gap:12px}
.subject-card h2{
  margin:0;font-size:19px;line-height:1.22;letter-spacing:-.018em;font-weight:760;
}
.subject-teacher{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.35}
.subject-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.subject-meta span{
  padding:4px 7px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  border-radius:7px;color:var(--muted);font-size:11px;font-weight:650;background:color-mix(in srgb,var(--surface2) 72%,transparent);
}
.subject-arrow{
  margin-left:auto;color:var(--muted);font-size:18px;line-height:1;
  transition:transform .2s ease,color .2s ease;
}
.subject-card:hover .subject-arrow{transform:translate(2px,-2px);color:var(--accent2)}
.subject-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(38,76,99,.09)}

.card,.side-card,.admin-add,.note-card,.assignment-card{
  box-shadow:0 8px 28px rgba(38,76,99,.045);
}
.card:hover,.side-card:hover,.note-card:hover{box-shadow:0 15px 38px rgba(38,76,99,.075)}
.button{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease,border-color .2s ease}
.button:active{transform:translateY(1px) scale(.985)}
input,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}

.schedule-head{padding-bottom:18px}
.schedule-list{gap:25px}
.schedule-day{
  padding:17px 18px 18px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:20px;background:color-mix(in srgb,var(--surface) 48%,transparent);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.schedule-day.is-today{
  border-color:color-mix(in srgb,var(--blue) 42%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue-soft) 28%,var(--surface)),color-mix(in srgb,var(--surface) 84%,transparent));
  box-shadow:0 12px 34px rgba(54,112,145,.075);
}
.schedule-day-head{margin-bottom:12px}
.schedule-day-head h2{font-size:20px}
.schedule-day.is-today .schedule-day-head h2{font-weight:800}
.schedule-day.is-today .schedule-day-head h2:after{font-size:8px;padding:3px 6px}
.lesson-list{gap:6px}
.lesson-card{
  grid-template-columns:100px minmax(0,1fr) auto auto;
  padding:13px 14px;border-radius:14px;box-shadow:none;background:color-mix(in srgb,var(--surface) 91%,var(--blue-soft));
}
.lesson-card:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(38,76,99,.07)}
.lesson-card.is-current{
  border-color:color-mix(in srgb,var(--blue) 58%,var(--line));
  box-shadow:inset 3px 0 0 var(--blue),0 8px 24px rgba(48,111,147,.10);
}
.lesson-card.is-current:after{
  content:"СЕЙЧАС";position:absolute;top:7px;right:9px;font-size:8px;font-weight:850;letter-spacing:.08em;color:var(--blue);
}
.lesson-card.is-next{border-color:color-mix(in srgb,var(--blue) 32%,var(--line))}
.lesson-card{position:relative}
.lesson-time{font-size:14px}
.lesson-main h3{font-size:15px}
.lesson-main p{font-size:12px}
.lesson-kind{font-size:10px;padding:4px 7px}
.lesson-join{font-size:12px;padding:6px 9px}
.timezone-banner{margin-bottom:22px;border-radius:13px;padding:10px 13px;font-size:13px}

.notes-list{gap:9px}
.note-card{border-radius:16px;padding:18px 19px}
.note-title-row h2{font-size:18px}

@media(max-width:760px){
  .home-hero{padding:31px 0 29px;align-items:flex-start;flex-direction:column}
  .home-copy h1{font-size:54px;margin-bottom:13px}
  .hero-admin{width:100%}
  .hero-admin.button{justify-content:center}
  .home-section-head{margin-top:1px}
  .subject-grid{gap:9px}
  .subject-card{min-height:116px;padding:17px 16px 16px 14px}
  .subject-card h2{font-size:18px}
  .subject-teacher{font-size:12px}
  .subject-meta{margin-top:10px}
  .subject-accent{height:54px}
  .schedule-day{padding:13px 12px 14px;border-radius:17px}
  .schedule-day-head h2{font-size:18px}
  .lesson-card{grid-template-columns:1fr auto;padding:12px}
  .lesson-card.is-current:after{top:5px;right:7px}
  .timezone-banner{margin-bottom:17px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* v10.2 desktop/mobile header separation */
@media(min-width:761px){
  .app-header{display:none}
  .container{padding-top:20px}
}
@media(max-width:760px){
  .app-header{display:block}
}

/* ============================================================
   v10.3 - subjects search, unified homework, dates, modal portal
   ============================================================ */
body.modal-open{overflow:hidden}
.modal{position:fixed!important;inset:0!important;display:none!important;align-items:center!important;justify-content:center!important;padding:24px!important;z-index:100!important;background:rgba(9,18,25,.54);backdrop-filter:blur(5px)}
.modal.open{display:flex!important}
.modal-box{margin:auto;transform:none!important;max-height:min(88vh,760px);overflow:auto;animation:zn-modal-in .22s cubic-bezier(.2,.75,.25,1) both}
@keyframes zn-modal-in{from{opacity:0;transform:translateY(8px) scale(.985)!important}to{opacity:1;transform:none!important}}
.subject-search{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:5px 7px 5px 13px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--surface) 88%,var(--blue-soft));box-shadow:0 8px 25px rgba(38,76,99,.035);transition:border-color .18s ease,box-shadow .18s ease}
.subject-search:focus-within{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 11%,transparent),0 10px 28px rgba(38,76,99,.05)}
.subject-search svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round}
.subject-search input{margin:0;border:0!important;box-shadow:none!important;background:transparent!important;padding:9px 2px;min-width:0}
.subject-search button{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.subject-search button:hover{background:var(--surface2);color:var(--text)}
.subject-search button[hidden]{display:none}
.subject-card[hidden]{display:none}
.search-empty{margin-top:6px}
.assignment-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.assignment-dates{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:12px}
.assignment-dates span{padding:4px 8px;border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:7px;background:color-mix(in srgb,var(--surface2) 76%,transparent)}
.due-date{padding:6px 9px;border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--blue-soft) 42%,var(--surface));font-size:12px;font-weight:700;white-space:nowrap}

.homework-head{padding-bottom:26px}
.homework-list{display:grid;gap:10px}
.homework-card{position:relative;display:flex;gap:15px;padding:17px 19px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--blue-soft)),var(--surface));box-shadow:0 8px 25px rgba(38,76,99,.04);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.homework-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 24%,var(--line));box-shadow:0 15px 34px rgba(38,76,99,.075)}
.homework-accent{width:4px;flex:none;border-radius:99px;background:var(--subject-accent);opacity:.78}
.homework-main{min-width:0;flex:1}
.homework-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:5px}
.homework-subject{color:var(--accent2);font-size:12px;font-weight:800;letter-spacing:.02em;text-decoration:none}
.homework-subject:hover{text-decoration:underline}
.homework-due{font-size:12px;color:var(--muted);white-space:nowrap}
.homework-card h2{margin:0;font-size:18px;line-height:1.28;letter-spacing:-.015em}
.homework-body{margin:10px 0 0;white-space:pre-wrap;color:var(--muted);font-size:14px}
.homework-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.homework-files a{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);font-size:12px;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homework-files a:hover{border-color:color-mix(in srgb,var(--blue) 30%,var(--line));background:var(--blue-soft)}

@media(max-width:760px){
  .subject-search{margin-bottom:12px}
  .assignment-head-actions{width:100%}
  .assignment-head-actions .button{flex:1}
  .homework-card{padding:15px 14px;gap:11px}
  .homework-card h2{font-size:17px}
  .homework-topline{align-items:flex-start;flex-direction:column;gap:3px}
  .homework-due{font-size:11px}
  .modal{padding:12px!important}
  .modal-box{width:min(560px,100%);border-radius:18px;padding:21px;max-height:calc(100vh - 24px)}
}

.homework-card.is-overdue{border-color:color-mix(in srgb,var(--danger) 22%,var(--line))}.homework-card.is-overdue .homework-due{color:var(--danger);font-weight:700}.homework-card.is-overdue .homework-accent{background:var(--danger)}