:root { --bg:#f6f7fb; --card:#fff; --ink:#1b1f2a; --muted:#6b7280; --line:#e5e7eb; --brand:#2f6df6; --bad:#d23c3c; --ok:#1f9d55; }
* { box-sizing:border-box }
body { margin:0; font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg) }
.top { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line) }
.logo { font-weight:700; text-decoration:none; color:var(--ink); font-size:18px }
nav a, nav button { margin-left:14px; color:var(--brand); background:none; border:0; font:inherit; cursor:pointer; text-decoration:none }
.wrap { max-width:460px; margin:40px auto; padding:0 16px }
.layout { display:flex; align-items:flex-start }
.side[hidden], .wrap[hidden] { display:none }
.layout.cab .wrap { max-width:760px; margin:24px auto; flex:1 }
.side { width:268px; flex:none; padding:16px 10px; position:sticky; top:0; display:flex; flex-direction:column; gap:2px }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:15px; white-space:nowrap }
.nav-item { color:#3b4252 }
.nav-item:hover { background:#eef1f8 }
.nav-item.on { background:#e8efff; color:var(--brand); font-weight:600 }
.nav-item .ic { display:grid; place-items:center; width:22px; color:#7a8499 }
.nav-item:hover .ic { color:#3b4252 }
.nav-item.on .ic { color:var(--brand) }
.soon { margin-top:14px; padding:14px 16px; background:#f3f5fa; border-radius:12px }
.soon-title { font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px }
.soon ul { margin:0; padding-left:18px } .soon li { margin:4px 0 }
@media (max-width:760px) {
  .layout { flex-direction:column }
  .side { width:100%; position:static; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding:8px; gap:6px; border-bottom:1px solid var(--line); background:var(--card) }
  .nav-item { white-space:nowrap; padding:7px 10px; font-size:14px }
  .layout.cab .wrap { margin:12px auto; width:100%; min-width:0 }
}
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px }
.card + .card { margin-top:16px }
h1 { font-size:22px; margin:0 0 16px }
h2 { font-size:17px; margin:0 0 12px }
label { display:block; margin:12px 0 6px; font-size:14px; color:var(--muted) }
input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit }
input:focus { outline:2px solid var(--brand); border-color:transparent }
.btn { display:inline-block; width:100%; margin-top:16px; padding:12px; border:0; border-radius:10px; background:var(--brand); color:#fff; font:inherit; font-weight:600; cursor:pointer }
.btn.secondary { background:#eef2ff; color:var(--brand) }
.btn:disabled { opacity:.6; cursor:default }
.links { margin-top:14px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px 16px }
.links a { color:var(--brand); cursor:pointer; text-decoration:none }
.err { color:var(--bad); font-size:14px; min-height:20px; margin-top:10px }
.ok { color:var(--ok); font-size:14px; margin-top:10px }
.muted { color:var(--muted); font-size:14px }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14px }
.row:first-of-type { border-top:0 }
.pill { font-size:12px; padding:2px 8px; border-radius:99px; background:#eef2ff; color:var(--brand) }
.small { font-size:13px; color:var(--muted); background:none; border:0; cursor:pointer }
select { width:100% }
.tabs { display:flex; gap:8px; margin-bottom:14px }
.tabs button { flex:1; padding:9px; border:1px solid var(--line); background:#fff; border-radius:10px; font:inherit; cursor:pointer }
.tabs button.on { border-color:var(--brand); color:var(--brand); font-weight:600 }

/* ---------- публичная часть и содержимое ---------- */
.layout.land .wrap { max-width:960px; margin:24px auto; flex:1 }
.hero { padding:48px 8px 32px; text-align:center }
.hero h1 { font-size:36px; line-height:1.15; margin:0 0 12px }
.hero p { font-size:18px; color:var(--muted); max-width:620px; margin:0 auto }
.hero-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px }
.hero-btns .btn { width:auto; padding:12px 20px; text-decoration:none; margin:0 }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:16px }
.grid3 .card + .card { margin-top:0 }
.steps { margin:0; padding-left:20px } .steps li { margin:6px 0 }
a.btn { text-align:center; text-decoration:none; box-sizing:border-box }
.games { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:12px }
.game { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; background:#f3f5fa; border:1px solid var(--line); border-radius:12px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer }
.game:hover { border-color:var(--brand) }
.game-ic { font-size:30px; line-height:1 }
.game-modal { position:fixed; inset:0; z-index:50; background:#0d1220 }
.game-modal iframe { width:100%; height:100%; border:0; display:block; background:#fff }
.game-x { position:absolute; top:8px; left:8px; z-index:2; width:36px; height:36px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:16px; cursor:pointer }
.game-modal.pick { background:rgba(13,18,32,.6); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto }
.game-modal.pick .card { width:100%; max-width:420px; max-height:90vh; overflow:auto }
.topics .btn { margin-top:8px; padding:10px }
.stats { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 4px }
.stats a, .stats span { flex:1; min-width:100px; padding:12px; background:#f3f5fa; border-radius:12px; color:var(--muted); font-size:14px; text-decoration:none }
.stats b { display:block; font-size:24px; color:var(--ink) }
.copy { display:flex; gap:8px; margin-top:8px } .copy .btn { width:auto; margin:0; padding:10px 14px; white-space:nowrap }
.row a, .card h2 a { color:var(--brand); text-decoration:none }
.sheet-ed .sh-head { display:flex; justify-content:space-between; align-items:center; gap:8px }
textarea, select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:#fff }
.preview { margin-top:8px; padding:8px 10px; background:#f3f5fa; border-radius:10px; min-height:20px; font-size:15px; overflow-x:auto }
.preview:empty { display:none }
.add { display:flex; gap:8px } .add .btn { margin:0 }
.pick-st { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px }
.chk { display:inline-flex; align-items:center; gap:6px; margin:0; color:var(--ink) } .chk input { width:auto }
.plaque { display:flex; flex-direction:column; gap:4px; padding:12px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none }
.bar { display:block; height:6px; background:#e8ebf3; border-radius:6px; overflow:hidden } .bar i { display:block; height:100%; background:var(--ok) }
.ribbon { display:flex; flex-wrap:wrap; gap:6px }
.ribbon button { width:34px; height:34px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; cursor:pointer }
.ribbon button.dn { background:#e4f6ec; border-color:#b6e4c8 }
.ribbon button.on { border-color:var(--brand); box-shadow:0 0 0 2px #cdddff }
.rich { font-size:17px; line-height:1.55; overflow-x:auto }
.nav2 { display:flex; gap:8px } .nav2 .btn:disabled { opacity:.4 }
.small:disabled { opacity:.3; cursor:default }
@media (max-width:760px) { .hero h1 { font-size:28px } .hero { padding:24px 4px 16px } .copy { flex-wrap:wrap } .copy .btn { width:100% } .add { flex-wrap:wrap } }

/* переключатель вида: поверх страницы, вёрстку не сдвигает */
#view-sw { position:fixed; right:12px; bottom:12px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:13px }
.vs-btn { padding:6px 10px; border:0; border-radius:99px; background:rgba(20,26,40,.82); color:#fff; font:inherit; cursor:pointer }
.vs-menu { display:flex; flex-direction:column; min-width:150px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.14) }
.vs-menu[hidden] { display:none }
.vs-menu button, .vs-menu a { padding:7px 10px; border:0; border-radius:8px; background:none; font:inherit; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer }
.vs-menu button:hover, .vs-menu a:hover { background:#eef2ff }
.vs-menu button.on { color:var(--brand); font-weight:600 }
.views { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:16px }
.view-card { display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; font:inherit; color:var(--ink); cursor:pointer }
.view-card:hover { border-color:var(--brand) }
.view-card.on { border-color:var(--brand); box-shadow:0 0 0 2px #cdddff }

/* занятия */
.layout.cab .wrap.live { max-width:1000px }
.layout.cab .wrap:has(#ink-host), .layout.cab .wrap:has(.pv) { max-width:1040px } /* слайд у ученика крупнее обычной страницы */
.lhead { display:flex; gap:12px; align-items:flex-start; margin-bottom:10px }
.ltabs { flex:1; display:flex; flex-wrap:wrap; gap:8px }
.ltab { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border:1px solid var(--line); border-radius:10px; background:var(--card); font:inherit; cursor:pointer }
.ltab.on { border-color:var(--brand); box-shadow:0 0 0 2px #cdddff }
.ltab.hand { background:#fff4d6; border-color:#e7bf5c }
.dot { width:9px; height:9px; border-radius:50%; background:#c4c9d4 } .dot.ok { background:var(--ok) }
.selfbox { width:150px; flex:none }
.selfbox video { width:100%; aspect-ratio:4/3; object-fit:cover; background:#1b2030; border-radius:10px; display:block; transform:scaleX(-1) }
.selfbox video.off { opacity:.25 }
.stage { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px }
.tile { position:relative; flex:1; min-width:0; background:#111624; border-radius:14px; overflow:hidden }
.tile video { width:100%; max-height:56vh; aspect-ratio:16/9; object-fit:contain; display:block }
.tag { position:absolute; left:10px; bottom:10px; padding:3px 9px; border-radius:99px; background:rgba(0,0,0,.6); color:#fff; font-size:13px }
.tag.ok { background:rgba(31,157,85,.8) }
.away { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; background:rgba(13,18,32,.75); color:#fff; font-size:17px }
.away[hidden] { display:none }
.ctl { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.ctl button { padding:9px 13px; border:1px solid var(--line); border-radius:10px; background:var(--card); font:inherit; cursor:pointer }
.ctl button.off { background:#fde8e8; border-color:#f3b4b4 } .ctl button.on { background:#e4f6ec; border-color:#b6e4c8 }
.ctl-wrap { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start } .ctl-wrap .btn { width:auto; margin:0; padding:9px 13px }
.row-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px } .spacer { flex:1 }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.seg button { padding:6px 12px; border:0; background:#fff; font:inherit; cursor:pointer } .seg button.on { background:var(--brand); color:#fff }
.pane[hidden] { display:none }
.ribbon button:disabled { cursor:default }
.ribbon button.wr { background:#fde8e8; border-color:#f3b4b4 } .ribbon button.rv { background:#fff4d6; border-color:#e7bf5c }
.ribbon button.at { outline:2px dashed var(--brand); outline-offset:1px }
.ribbon + .muted { margin:8px 0 }
.start { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end } .start > div { flex:1; min-width:170px } .start .btn { width:auto; margin:0; padding:11px 22px }
.callin { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; padding:16px 18px; border-radius:14px; background:var(--brand); color:#fff; text-decoration:none }
#live-bar { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:44; padding:8px 14px; border-radius:99px; background:var(--ok); color:#fff; font-size:14px; text-decoration:none }
@media (max-width:760px) { .stage { flex-direction:column } .selfbox { width:110px } .tile { width:100%; flex:none } }

.nav-item .cnt { margin-left:auto; min-width:20px; padding:0 6px; border-radius:99px; background:var(--bad); color:#fff; font-size:12px; line-height:20px; text-align:center }
.callin.alt { background:#fff4d6; color:var(--ink) }
.small.act { color:var(--brand); font-weight:600 }

.sheet-img { display:block; max-width:100%; max-height:70vh; margin:8px 0; border-radius:8px; border:1px solid var(--line) }
.add { flex-wrap:wrap } .add .btn { flex:1; min-width:90px }
.links a[data-img], .links a[data-unimg], .links a[data-copy] { cursor:pointer }
.sheet-ed .sheet-img { max-height:200px }

/* доска */
.ink-tools { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px }
.ink-tools button { height:32px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-size:14px; cursor:pointer }
.ink-tools .ink-c { width:32px; padding:0 } .ink-tools .ink-w { width:36px; padding:0; display:inline-flex; align-items:center; justify-content:center }
.ink-w i { display:block; background:var(--ink); border-radius:50% }
.ink-tools button.on { outline:2px solid var(--brand); outline-offset:1px }
.ink-sheet { position:relative; line-height:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff }
.ink-sheet.blank { aspect-ratio:4/3 }
.ink-sheet .ink-img { width:100%; max-height:none; display:block; margin:0; border:0; border-radius:0; user-select:none; -webkit-user-drag:none }
.ink-sheet canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair }
.ribbon .b-new { width:auto; padding:0 10px }
.card[hidden] { display:none }
.links a[data-try], .links a[data-tp] { cursor:pointer }
.late { color:var(--bad); font-weight:600 }
.tabs button .muted { font-size:12px }
.p-due { max-width:220px }