/* Layout: тетрадь в клетку; вход по логину и паролю, затем предметы карточками и список тем с отметками */
:root{
  --paper:#f7f9fc; --grid:#dde6f2; --ink:#1d2a44; --muted:#5d6b85;
  --blue:#2457c5; --red:#d23b2f; --green:#1f8a55; --amber:#c27c0e;
  --card:#ffffff; --line:#d5deeb;
  --display:"Unbounded","Onest",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#131a27; --grid:#1d2738; --ink:#e6ecf7; --muted:#9aa8c2;
  --blue:#7ea4ff; --red:#ff7a6e; --green:#5fd39a; --amber:#f2b24a;
  --card:#1a2334; --line:#2b3850; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#131a27; --grid:#1d2738; --ink:#e6ecf7; --muted:#9aa8c2;
  --blue:#7ea4ff; --red:#ff7a6e; --green:#5fd39a; --amber:#f2b24a;
  --card:#1a2334; --line:#2b3850; color-scheme:dark}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs button{white-space:nowrap;flex:none}
body{background:var(--paper);color:var(--ink);font:16px/1.5 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;min-height:100vh}
.wrap{max-width:900px;margin:0 auto;padding-block:24px 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.2}
h1{font-size:clamp(1.5rem,4vw,2.1rem)} h2{font-size:1.2rem} h3{font-size:1rem}
.demo{font-size:.85rem;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.profile{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px;text-align:left;display:flex;gap:12px;align-items:center}
.profile[aria-pressed="true"]{border-color:var(--blue)}
.ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);color:#fff;flex:none}
.profile small{display:block;color:var(--muted)}
.pinrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input{font:inherit;font-size:1.3rem;letter-spacing:.4em;width:9ch;padding:8px 12px;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.btn{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:600}
a.btn{display:inline-block;text-decoration:none;align-self:flex-start}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#0d1525}}
:root[data-theme="dark"] .btn{color:#0d1525}
.ghost{background:none;border:1px solid var(--line);border-radius:10px;padding:8px 14px;color:var(--muted)}
.err{color:var(--red);font-size:.9rem;min-height:1.4em}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.top p{margin:4px 0 0;color:var(--muted)}
.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.subj{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:10px}
.subj[aria-pressed="true"]{border-color:var(--blue)}
.subj .row{display:flex;justify-content:space-between;align-items:baseline;font-variant-numeric:tabular-nums}
.pct{font-family:var(--display);font-size:1.4rem}
.bar{height:8px;border-radius:4px;background:var(--grid);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .done{background:var(--green)} .bar .wip{background:var(--amber)}
.muted{color:var(--muted);font-size:.9rem}
.topics{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.topic{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.topic .name{flex:1;min-width:0}
.mark{width:40px;height:40px;flex:none;display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;color:var(--red);transform:rotate(-8deg)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.seg button{border:0;background:none;padding:6px 10px;font-size:.85rem;color:var(--muted)}
.seg button[aria-pressed="true"][data-s="0"]{background:var(--grid);color:var(--ink)}
.seg button[aria-pressed="true"][data-s="1"]{background:var(--amber);color:#fff}
.seg button[aria-pressed="true"][data-s="2"]{background:var(--green);color:#fff}
.kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.kidrow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:.9rem;align-items:center;font-variant-numeric:tabular-nums}
.kidrow .bar{grid-column:1/-1;margin-bottom:6px}
.ed{display:flex;flex-direction:column;gap:14px}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.txt{font:inherit;font-size:1rem;letter-spacing:0;width:auto;flex:1 1 160px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.esub{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.elist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.elist li{display:flex;justify-content:space-between;gap:8px;align-items:center}
.x{border:0;background:none;color:var(--red);font-size:1.3rem;line-height:1;padding:2px 8px}
.auth{display:flex;flex-direction:column;gap:16px;max-width:440px}
.tabs{align-self:flex-start}
.tabs button{padding:8px 16px;font-size:.95rem}
.tabs button[aria-pressed="true"]{background:var(--grid);color:var(--ink)}
.form{display:flex;flex-direction:column;gap:6px}
.form label{font-size:.9rem;color:var(--muted);margin-top:6px}
.form .txt{flex:none}
.form .btn{margin-top:12px;align-self:flex-start}
.week{display:flex;flex-direction:column;gap:8px}
.day{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:start}
.day.today{border-color:var(--blue)}
.day h3{font-size:.9rem;padding-top:6px}
.day p{margin:0;padding-top:6px}
.dlist{display:flex;flex-wrap:wrap;gap:8px}
.lesson{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 28px 6px 10px;display:flex;flex-direction:column;gap:2px;font-size:.9rem;flex:1 1 210px;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.lesson .x{position:absolute;top:2px;right:0}
.moved{font-size:.78rem;color:var(--amber)}
.linkbtn{border:0;background:none;color:var(--blue);padding:0;font-size:.85rem;align-self:flex-start;text-decoration:underline}
.moveform{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.moveform .txt{flex:1 1 120px;padding:4px 8px;font-size:.9rem}
.moveform .btn{padding:4px 12px}.moveform .ghost{padding:4px 10px}
.slotn{font-size:.9rem;color:var(--muted);flex:0 0 190px}
@media (max-width:600px){.slotn{flex-basis:100%}}
.tablewrap{overflow-x:auto;position:relative}
table.ex{width:100%;min-width:520px;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.ex th{text-align:left;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.ex td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.ex .bar{margin-top:4px;max-width:140px}
.exact{white-space:nowrap;text-align:right}
.up{color:var(--green);font-weight:600}.down{color:var(--red);font-weight:600}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--grid);font-size:.85rem;font-weight:600}
.num{flex:0 0 90px}
img.blank{max-height:480px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;margin-left:6px;vertical-align:1px}
.tabs button.glow,.people button.glow{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.tabs button.glow{animation:glow 1.6s ease-in-out infinite}}
@keyframes glow{50%{background:color-mix(in srgb,var(--amber) 45%,transparent)}}
.chk{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:.9rem}
.chk input{width:auto;letter-spacing:0}
.weeknav{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.weeknav h2{font-size:1rem}
.notice{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:2px solid var(--amber);border-radius:14px;padding:14px 16px}
.notice.live{border-color:var(--green)}
.notice b{display:block;font-family:var(--display);font-size:1rem}
.notice a.btn{text-decoration:none}
.upc{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.upc li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.toasts{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:20;max-width:min(360px,calc(100vw - 32px))}
.toast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;padding:12px 36px 12px 14px;box-shadow:0 8px 24px rgb(0 0 0 / .18);position:relative;display:flex;flex-direction:column;gap:6px}
.toast.live{border-left-color:var(--green)}
.toast .x{position:absolute;top:4px;right:2px;color:var(--muted)}
.toast a.btn{text-decoration:none;align-self:flex-start;padding:6px 14px}
@media (max-width:600px){.day{grid-template-columns:minmax(0,1fr)}.day h3,.day p{padding-top:0}.upc li{grid-template-columns:minmax(0,1fr);gap:0}}
.chatwrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.people{display:flex;flex-direction:column;gap:6px}
.people button{text-align:left;border:1px solid var(--line);background:none;border-radius:10px;padding:8px 10px}
.people button[aria-pressed="true"]{border-color:var(--blue);background:var(--grid)}
.people small{display:block;color:var(--muted);font-size:.8rem}
@media (max-width:640px){.chatwrap{grid-template-columns:minmax(0,1fr)}.people{flex-direction:row;overflow-x:auto}.people button{flex:none}}
.chat{display:flex;flex-direction:column;gap:12px}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.msg{max-width:80%;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);align-self:flex-start;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--grid)}
.msg img{display:block;border-radius:8px;margin-top:6px;max-height:260px}
.msg time{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}
.msg time .linkbtn{font-size:inherit;color:var(--muted)}
.msg img.zoom{cursor:zoom-in}
.quote{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--blue);background:color-mix(in srgb,var(--blue) 8%,transparent);border-radius:6px;padding:4px 8px;margin-bottom:6px;font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}
.quote b{display:block;color:var(--blue);font-weight:600}
button.quote{cursor:pointer}
.replybar{display:flex;gap:8px;align-items:center}
.replybar:empty{display:none}
.replybar .quote{margin:0;flex:1;min-width:0}
.msg.flash{animation:flash 1.2s ease-out}
@keyframes flash{from{box-shadow:0 0 0 3px var(--amber)}to{box-shadow:0 0 0 3px transparent}}
.viewer{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:grid;place-items:center;cursor:zoom-out;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.viewer img{max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain;touch-action:pinch-zoom}
.viewer-x{position:absolute;top:8px;right:8px;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.8rem;line-height:1;width:44px;height:44px;border-radius:50%}
body.noscroll{overflow:hidden}
.attach{border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--muted);cursor:pointer}
.attach input{position:absolute;opacity:0;width:1px;height:1px}
.attach:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.pending{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted)}
.pending img{height:48px;border-radius:6px}
@media (max-width:520px){.topic{flex-wrap:wrap}.seg{width:100%}.seg button{flex:1}}
/* Вкладки разделов на телефоне листаются пальцем влево и вправо, кнопки не сжимаются. */
.seg.tabs{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.seg.tabs::-webkit-scrollbar{display:none}
.seg.tabs button{flex:none;scroll-snap-align:start}
@media (prefers-reduced-motion:no-preference){.bar i{transition:width .4s}}
.pushbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:10px 14px;font-size:.9rem}
.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.kidactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kidactions .ghost{padding:6px 10px;font-size:.85rem}
.ok{color:var(--green);font-size:.9rem;min-height:1.4em}
select.txt{min-width:0}
.presence.on{color:var(--green);font-weight:500}
.presence.on::before,.dot{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:5px;vertical-align:middle}
.dot{margin-right:6px;font-style:normal}