/* GreateWay School — кабинет. Токены совпадают с лендингом; --primary подменяется
   акцентным цветом школы (см. layout.js → applyBrand). */
:root {
  --bg: #FFFFFF;
  --surface: #FBFBFD;
  --text: #121316;
  --text-2: #6B6E8D;
  --text-3: #A6A5C2;
  --border: #E3E3E8;
  --border-hover: #B5B3C4;
  --primary: #158078;
  --primary-ink: color-mix(in oklch, var(--primary) 88%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 16%, var(--bg));
  --primary-tint: color-mix(in srgb, var(--primary) 4.5%, var(--bg));
  --on-primary: #FFFFFF;
  --red: #E5473E;
  --bad: #B23A30;
  --bad-soft: #FCDAD6;
  --warn: #A17318;
  --warn-soft: #FDE9BE;
  --shadow: 0 2px 6px rgba(16,17,22,.05), 0 16px 32px rgba(16,17,22,.09);
  --r: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0B10; --surface: #17171D; --text: #F5F5F7; --text-2: #98979F; --text-3: #6E6D78;
    --border: #2A2A32; --border-hover: #3E3D48;
    --primary-ink: color-mix(in srgb, var(--primary) 70%, white);
    --primary-soft: color-mix(in srgb, var(--primary) 28%, var(--bg));
    --primary-tint: color-mix(in srgb, var(--primary) 8%, var(--bg));
    --bad: #FF8A80; --bad-soft: color-mix(in srgb, #FF8A80 16%, var(--bg));
    --warn: #E0B04E; --warn-soft: color-mix(in srgb, #E0B04E 18%, var(--bg));
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--primary-tint); color: var(--text); line-height: 1.45; -webkit-font-smoothing: antialiased; font-size: 15px; }
h1, h2, h3, h4 { margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 10px; }
a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.empty { color: var(--text-2); padding: 18px 0; margin: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.mt { margin-top: 16px; } .mt2 { margin-top: 28px; } .mb { margin-bottom: 16px; }
[hidden] { display: none !important; }

/* ---- кнопки ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 980px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, opacity .12s; }
.btn:hover { background: var(--surface); border-color: var(--border-hover); text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { opacity: .88; background: var(--primary); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.sm { padding: 5px 14px; font-size: 12.5px; border-radius: 980px; }
.btn.pill-btn { border-radius: 980px; }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { border: 0; background: none; color: var(--text-2); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: var(--surface); color: var(--text); }

/* ---- формы ---- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form.inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--text-3); }
.inp { font: inherit; font-size: 14.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; width: 100%; }
textarea.inp { resize: vertical; min-height: 84px; }
.inp:focus { outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 1px; border-color: var(--primary); }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); }
.check input { margin-top: 3px; }

/* ---- карточки, плашки ---- */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.card.shadow { box-shadow: var(--shadow); }
.card h2 { margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 980px; white-space: nowrap; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.pill.ok { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.banner { background: var(--warn-soft); color: var(--warn); padding: 10px 20px; font-size: 13.5px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.banner button { font: inherit; font-weight: 700; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.stat span { font-size: 12.5px; color: var(--text-2); }
.stat:nth-child(2) { background: var(--bad-soft); border-color: transparent; }
.stat:nth-child(3) { background: var(--warn-soft); border-color: transparent; }
.stat:nth-child(4) { background: var(--primary-soft); border-color: transparent; }
.stat:nth-child(5) { background: var(--bad-soft); border-color: transparent; }
.stat:nth-child(6) { background: var(--warn-soft); border-color: transparent; }
.stat:nth-child(2) b { color: var(--bad); } .stat:nth-child(3) b { color: var(--warn); } .stat:nth-child(4) b, .stat:nth-child(1) b { color: var(--primary-ink); }
.stat:nth-child(5) b { color: var(--bad); } .stat:nth-child(6) b { color: var(--warn); }
.stat.good { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.stat.good b, .stat.good span { color: var(--on-primary) !important; }
.stat.good:nth-child(n) { background: var(--primary); border-color: var(--primary); }
.bars { height: 110px; display: flex; align-items: flex-end; gap: 8px; }
.bars i { flex: 1; background: color-mix(in srgb, var(--primary) 38%, var(--bg)); border-radius: 4px 4px 0 0; min-height: 3px; }
.bars i:last-child { background: var(--primary); }

/* ---- таблицы ---- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--primary-ink); padding: 9px 10px; background: var(--primary-tint); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th:first-child { border-radius: 10px 0 0 10px; } .tbl th:last-child { border-radius: 0 10px 10px 0; }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--surface); }
.tbl tr.dim td { color: var(--text-3); }
.tbl td:first-child { font-weight: 600; }
.tbl .r { text-align: right; }

/* ---- каркас ---- */
.topbar { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); object-fit: cover; flex-shrink: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, white), var(--primary)); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-family: inherit; }
.bell { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 15px; color: var(--text-2); }
.bell .dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.shell { display: flex; min-height: calc(100vh - 56px); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--red)); }
.sidebar { background: var(--bg); width: 200px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 56px; align-self: flex-start; height: calc(100vh - 56px); }
.sidebar a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 500; }
.sidebar a:hover { background: var(--surface); text-decoration: none; color: var(--text); }
.sidebar a.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
.sidebar a .n { float: right; font-size: 11px; background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; font-weight: 700; }
.content { flex: 1; min-width: 0; padding: 28px 36px 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; }
.crumb { color: var(--primary-ink); font-weight: 600; }
.crumb { font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs a, .tabs button { font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); padding: 0 0 10px; border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tabs .on { color: var(--text); font-weight: 700; border-bottom-color: var(--primary); }
.menu { position: absolute; right: 20px; top: 52px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-width: 200px; padding: 6px; z-index: 30; }
.menu a, .menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 8px; color: var(--text); background: none; border: 0; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface); text-decoration: none; }
.menu .who { padding: 8px 12px 10px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.notif-panel { width: 340px; max-height: 70vh; overflow-y: auto; }
.notif { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; }
.notif.unread { background: var(--primary-soft); }
.notif time { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ---- авторизация ---- */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; background: var(--surface); }
.auth-brand { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
.auth-card { width: 100%; max-width: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 22px; margin-bottom: 20px; }
.auth-card .btn.primary { width: 100%; padding: 12px; border-radius: 980px; }
.auth-card .row .btn.primary { width: auto; padding: 9px 20px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13px; }
.auth-alt { margin-top: 18px; font-size: 13.5px; color: var(--text-2); text-align: center; }
.invite-box { background: var(--primary-soft); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; font-size: 14px; }
.invite-box b { display: block; font-size: 17px; margin: 2px 0; }
.consent-box { background: var(--bad-soft); border-radius: 12px; padding: 14px 16px; color: var(--bad); display: flex; flex-direction: column; gap: 10px; }
.consent-box .lbl { color: var(--bad); }

/* ---- расписание ---- */
.weeknav { display: flex; align-items: center; gap: 10px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); gap: 8px; min-width: 840px; }
.slot.full { background: var(--surface); }
.week .dh { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 4px 0; }
.week .dh.today { color: var(--primary-ink); }
.week .hr { font-size: 11px; color: var(--text-3); padding-top: 8px; }
.slot { display: block; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; width: 100%; margin-bottom: 4px; }
.slot:hover { border-color: var(--border-hover); text-decoration: none; }
.slot { overflow-wrap: anywhere; }
.slot b { display: block; font-size: 12.5px; }
.slot span { color: var(--text-2); font-size: 11.5px; }
.slot.mine { background: var(--primary-soft); border-color: transparent; }
.slot.mine b, .slot.mine span { color: var(--primary-ink); }
.slot.free { border: 1.5px dashed var(--primary); }
.slot.free b, .slot.free span { color: var(--primary-ink); }
.slot.wait { border-color: var(--warn); } .slot.wait b, .slot.wait span { color: var(--warn); }
.slot.cancelled { border-color: var(--bad); opacity: .7; } .slot.cancelled b { color: var(--bad); text-decoration: line-through; }
.slot.past { opacity: .6; }
.week-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--bg); }
.day-list { display: none; }

/* ---- модалка, тосты ---- */
.overlay { position: fixed; inset: 0; background: rgba(10,10,16,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { background: var(--bg); border-radius: 18px; padding: 22px 24px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 17px; }
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; align-items: center; }
.toast { background: #17171D; color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow); transition: opacity .4s; max-width: 90vw; }
.toast.err { background: var(--bad); color: #fff; }
.toast.out { opacity: 0; }

/* ---- карточки слов ---- */
.flash { max-width: 520px; margin: 0 auto; text-align: center; padding: 40px 24px; }
.flash .word { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.flash .tr { font-size: 22px; color: var(--primary-ink); font-weight: 600; margin: 20px 0 26px; }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rate .btn { flex-direction: column; padding: 10px 6px; gap: 2px; }
.rate .btn small { font-weight: 400; color: var(--text-2); font-size: 11.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 980px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.chip:hover { border-color: var(--border-hover); }
.chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.chip.used { opacity: .35; pointer-events: none; }
.answer-line { min-height: 46px; border-bottom: 2px solid var(--border); padding: 8px 2px; margin: 12px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.result { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-top: 14px; }
.result.ok { background: var(--primary-soft); color: var(--primary-ink); }
.result.bad { background: var(--bad-soft); color: var(--bad); }
.theory { background: var(--surface); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; white-space: pre-wrap; line-height: 1.6; }
.progress { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--primary); }
.code { font: 700 15px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; background: var(--surface); border-radius: 8px; padding: 8px 12px; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; outline-offset: 2px; }
.swatch.on { outline: 2px solid var(--text); }

/* иконки навигации */
.nav-ico { display: inline-flex; flex-shrink: 0; }
.nav-ico svg { width: 19px; height: 19px; }

/* ---- адаптив ---- */
@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: sticky; top: 56px; z-index: 15; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); background: var(--bg); padding: 8px 12px; gap: 4px; }
  .sidebar a { white-space: nowrap; padding: 8px 12px; }
  .content { padding: 20px 16px 60px; }
  .topbar { padding: 0 14px; }
  .form.inline { flex-direction: column; align-items: stretch; }
  .notif-panel { width: calc(100vw - 24px); right: 12px; }
  .menu { right: 12px; }
  .week-scroll { display: none; }
  .day-list { display: block; }
  .day-list h3 { margin: 16px 0 8px; color: var(--text-2); font-size: 13px; }
  .tbl { min-width: 480px; }
}

/* ---- расписание: панель-список + временная сетка ---- */
.cal-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.panel { border: 1px solid var(--border); border-radius: 18px; background: var(--bg); box-shadow: var(--shadow); overflow: hidden; }
.panel-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 0; }
.panel-h h2 { margin: 0; }
.ptabs { display: flex; gap: 18px; padding: 10px 18px 0; border-bottom: 1px solid var(--border); min-height: 4px; }
.ptabs button { border: 0; background: none; padding: 0 0 9px; font: inherit; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ptabs .on { color: var(--text); border-bottom-color: var(--primary); }
details.grp { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 4px 18px; }
details.grp:last-child { border-bottom: 0; }
details.grp summary { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-weight: 600; cursor: pointer; }
details.grp summary::after { content: none; }
details.grp summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
details.grp[open] summary::before { transform: rotate(45deg) translateY(-2px); }
details.grp summary .n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 980px; padding: 1px 8px; }
.li { display: flex; align-items: center; gap: 10px; padding: 7px 0 9px; font-size: 13px; cursor: pointer; }
.li > div { flex: 1; min-width: 0; }
.li i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--primary); }
.li i.t-club { background: var(--red); } .li i.t-ind { background: #E0A21F; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.legend i.club { background: var(--red); } .legend i.ind { background: #E0A21F; } .legend i.me { background: var(--primary); outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.li i.free { background: none; border: 2px dashed currentColor; color: var(--primary); width: 11px; height: 11px; }
.li i.free.t-club { color: var(--red); } .li i.free.t-ind { color: #E0A21F; }
.li i.wait { background: var(--warn); } .li i.off { background: var(--bad); }
.li b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li span { display: block; color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .btn { margin-left: auto; flex-shrink: 0; padding: 4px 12px; font-size: 12px; }
.tgrid { border: 1px solid var(--border); border-radius: 18px; background: var(--bg); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.tbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tz { font-size: 12px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); border-radius: 980px; padding: 5px 12px; background: var(--surface); }
.tgrid-body { display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); overflow-x: auto; }
.tgrid-body .dh { text-align: center; padding: 10px 0 8px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dh b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.dh span { font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.dh.today { box-shadow: inset 0 -2px 0 var(--primary); } .dh.today b { color: var(--primary-ink); }
.gutter { position: relative; } .gutter span { position: absolute; right: 10px; transform: translateY(-50%); font-size: 11.5px; color: var(--text-2); }
.dcol { position: relative; border-left: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, var(--border) 63px, var(--border) 64px); }
.dcol.today { background-color: color-mix(in srgb, var(--primary) 3%, var(--bg)); }
.ev { position: absolute; border-radius: 12px; padding: 7px 10px; font: inherit; font-size: 12px; line-height: 1.3; overflow: hidden; text-align: left; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.ev:hover { border-color: var(--border-hover); }
.ev b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev span { display: block; color: var(--text-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev { border-left-width: 4px; }
.ev.t-group { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); border-left-color: var(--primary); }
.ev.t-group b { color: var(--primary-ink); }
.ev.t-club { background: var(--bad-soft); border-color: color-mix(in srgb, var(--red) 25%, transparent); border-left-color: var(--red); }
.ev.t-club b { color: var(--bad); }
.ev.t-ind { background: var(--warn-soft); border-color: color-mix(in srgb, #E0A21F 30%, transparent); border-left-color: #E0A21F; }
.ev.t-ind b { color: var(--warn); }
.ev.t-group span, .ev.t-club span, .ev.t-ind span { color: var(--text-2); }
.ev.mine { background: var(--primary); border-color: var(--primary); border-left-color: color-mix(in srgb, var(--primary) 60%, black); } .ev.mine b, .ev.mine span { color: var(--on-primary); }
.ev.free { background: var(--bg); border-style: dashed; border-width: 1.5px 1.5px 1.5px 4px; } .ev.free b { color: var(--text); } .ev.free span { color: var(--primary-ink); }
.ev.wait { background: var(--warn-soft); border-color: var(--warn); border-left-color: var(--warn); } .ev.wait b, .ev.wait span { color: var(--warn); }
.ev.off { background: repeating-linear-gradient(135deg, var(--bad-soft), var(--bad-soft) 8px, var(--bg) 8px, var(--bg) 16px); border-color: var(--bad); border-left-color: var(--bad); } .ev.off b { color: var(--bad); text-decoration: line-through; } .ev.off span { color: var(--bad); }
.ev.past { opacity: .7; }
.now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 2; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
@media (max-width: 900px) { .cal-wrap { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .tgrid { display: none; } }

/* ---- обзор школы (директор / админ) ---- */
.ov .ov-head { display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px }
.ov .datepill { display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:980px;padding:8px 16px;background:var(--bg);font-weight:600;color:var(--text-2) }
.ov .k5 { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px }
.ov .kc { background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:16px 18px 14px;box-shadow:var(--shadow) }
.ov .kc .top2 { display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--text-2);font-weight:600;font-size:13px }
.ov .kc .ic { width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-ink) }
.ov .kc .ic svg { width:19px;height:19px }
.ov .kc .ic.red { background:var(--bad-soft);color:var(--bad) }
.ov .kc .ic.amber { background:var(--warn-soft);color:var(--warn) }
.ov .kc .num { display:flex;align-items:baseline;gap:8px }
.ov .kc .num b { font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1 }
.ov .delta { font-size:11.5px;font-weight:700;border-radius:980px;padding:2px 8px;background:var(--primary-soft);color:var(--primary-ink) }
.ov .delta.down { background:var(--bad-soft);color:var(--bad) }
.ov .kc .foot { display:block;margin-top:8px;font-size:12px;color:var(--text-2) }
.ov .ticks { display:flex;gap:2px;height:16px;margin-top:10px }
.ov .ticks i { flex:1;border-radius:2px;background:var(--border) }
.ov .ticks.teal i.on { background:var(--primary) }
.ov .ticks.red i.on { background:var(--red) }
.ov .ticks.amber i.on { background:#E0A21F }
.ov .ovrow { display:grid;gap:16px;margin-bottom:16px }
.ov .o21 { grid-template-columns:1.7fr 1fr }
.ov .o3 { grid-template-columns:1fr 1fr 1fr }
.ov .card .sub2 { color:var(--text-2);font-size:12.5px;margin:-8px 0 14px }
.ov .sel { font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:980px;padding:4px 12px;color:var(--text-2);background:var(--surface) }
.ov .chart { position:relative;height:230px;margin-top:6px;display:flex;align-items:flex-end;gap:14px;padding:0 4px 24px 34px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,var(--border) 43px,var(--border) 44px) 34px 0/calc(100% - 34px) 100% no-repeat }
.ov .chart .ylab { position:absolute;left:0;top:0;height:calc(100% - 24px);display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--text-3) }
.ov .col2 { flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative }
.ov .col2 .bar { width:100%;border-radius:10px 10px 0 0;background:linear-gradient(to bottom,color-mix(in srgb,var(--primary) 34%,var(--bg)),color-mix(in srgb,var(--primary) 6%,var(--bg)));border-top:3px solid var(--primary) }
.ov .col2 .x { position:absolute;bottom:-22px;font-size:11px;color:var(--text-2) }
.ov .col2.hi .bar { background:var(--primary);border-top-color:var(--primary) }
.ov .col2 .cx { width:100%;border-radius:10px 10px 0 0;background:repeating-linear-gradient(135deg,var(--bad-soft),var(--bad-soft) 5px,var(--bg) 5px,var(--bg) 10px);border:1px solid var(--red);border-bottom:0;margin-bottom:-1px }
.ov .col2 .tip { position:absolute;top:-4px;right:-6px;transform:translateY(-100%);background:var(--text);color:var(--bg);border-radius:9px;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap }
.ov .lg { display:flex;gap:16px;font-size:12px;color:var(--text-2);flex-wrap:wrap }
.ov .lg i { display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;background:var(--primary) }
.ov .lg i.red { background:var(--red) }
.ov .feed .fi { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:var(--bg) }
.ov .feed .fi .ic { width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0 }
.ov .feed .fi .ic svg { width:19px;height:19px }
.ov .feed .fi .t { flex:1;min-width:0 }
.ov .feed .fi b { display:block;font-weight:600;font-size:13.5px }
.ov .feed .fi span { color:var(--text-2);font-size:12px }
.ov .when { font-size:11.5px;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:980px;padding:2px 9px;white-space:nowrap }
.ov .gbar { margin-bottom:16px }
.ov .gbar .hd { display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px }
.ov .gbar .hd b { font-weight:700 }
.ov .track { position:relative;height:10px;border-radius:5px;background:var(--border) }
.ov .track i { position:absolute;left:0;top:0;bottom:0;border-radius:5px }
.ov .track em { position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid;transform:translate(-50%,-50%) }
.ov .risk { display:flex;align-items:center;gap:18px }
.ov .ring { width:132px;height:132px;border-radius:50%;flex-shrink:0;display:grid;place-items:center }
.ov .ring span { width:84px;height:84px;border-radius:50%;background:var(--bg);display:grid;place-items:center;text-align:center;font-weight:800;font-size:22px;line-height:1.1 }
.ov .ring small { display:block;font-size:11px;font-weight:600;color:var(--text-2) }
.ov .rr { display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px }
.ov .rr i { width:10px;height:10px;border-radius:50% }
.ov .rr b { font-size:17px;margin-right:4px }
.ov .rr span { color:var(--text-2);font-size:12px }
.ov .tl { position:relative;padding-left:4px }
.ov .tl:before { content:"";position:absolute;left:61px;top:10px;bottom:10px;width:2px;background:var(--border) }
.ov .tli { display:flex;align-items:center;gap:12px;padding:8px 0;position:relative }
.ov .tli time { width:46px;font-size:12px;color:var(--text-2);text-align:right }
.ov .tli .dot { width:12px;height:12px;border-radius:50%;background:var(--primary);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--primary);position:relative;z-index:1 }
.ov .tli .dot.amber { background:#E0A21F;box-shadow:0 0 0 1px #E0A21F }
.ov .tli .dot.red { background:var(--red);box-shadow:0 0 0 1px var(--red) }
.ov .tli .t { flex:1;min-width:0 }
.ov .tli b { display:block;font-size:13.5px;font-weight:600 }
.ov .tli span { font-size:12px;color:var(--text-2) }
.ov .st { width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--primary-soft);color:var(--primary-ink) }
.ov .st svg { width:17px;height:17px }
.ov .st.amber { background:var(--warn-soft);color:var(--warn) }
.ov .st.red { background:var(--bad-soft);color:var(--bad) }
.ov .sec { display:flex;align-items:center;gap:12px;margin:26px 0 12px }
.ov .sec h2 { font-size:18px;font-weight:700 }
.ov .sec:after { content:"";flex:1;height:1px;background:var(--border) }
.ov .demo-note { font-size:12px;color:var(--text-2);background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:8px 14px;margin-bottom:12px }
.ov .k6 { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px }
.ov .mini { background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow) }
.ov .mini small { display:flex;align-items:center;gap:8px;color:var(--text-2);font-weight:600;font-size:12.5px }
.ov .mini small i { width:8px;height:8px;border-radius:50%;background:var(--primary) }
.ov .mini small i.red { background:var(--red) }
.ov .mini small i.amber { background:#E0A21F }
.ov .mini b { display:block;font-size:24px;font-weight:800;letter-spacing:-.025em;margin:6px 0 2px }
.ov .mini em { font-style:normal;font-size:12px;color:var(--text-2) }
.ov .o4 { grid-template-columns:repeat(4,1fr) }
.ov .o2 { grid-template-columns:1fr 1fr }
.ov .tbl2 { width:100%;border-collapse:collapse;font-size:13px }
.ov .tbl2 th { text-align:left;font-weight:600;font-size:11.5px;color:var(--text-2);padding:6px 8px 8px;border-bottom:1px solid var(--border);white-space:nowrap }
.ov .tbl2 td { padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle }
.ov .tbl2 tr:last-child td { border:0 }
.ov .tbl2 td:first-child { font-weight:600 }
.ov .tbl2 .r { text-align:right;white-space:nowrap }
.ov .pay { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border) }
.ov .pay:last-child { border:0 }
.ov .pay .t { flex:1;min-width:0 }
.ov .pay b { display:block;font-weight:600;font-size:13.5px }
.ov .pay span { font-size:12px;color:var(--text-2) }
.ov .pay .amt { font-weight:700;white-space:nowrap }
.ov .pill-tabs { display:inline-flex;border:1px solid var(--border);border-radius:980px;padding:3px;background:var(--surface);margin-bottom:12px }
.ov .pill-tabs button { border:0;background:none;border-radius:980px;padding:5px 14px;font-weight:600;font-size:12.5px;color:var(--text-2) }
.ov .pill-tabs .on { background:var(--primary);color:var(--on-primary) }
.ov .fun { display:grid;gap:8px }
.ov .fun div { display:flex;align-items:center;gap:10px;font-size:13px }
.ov .fun .lbl { width:112px;color:var(--text-2);flex-shrink:0 }
.ov .fun .fb { flex:1;height:30px;border-radius:9px;background:var(--surface);overflow:hidden }
.ov .fun .fb i { display:flex;align-items:center;height:100%;padding-left:10px;font-weight:700;font-size:12.5px;color:#fff;border-radius:9px }
.ov .src { display:grid;gap:11px }
.ov .src .row2 { display:flex;align-items:center;gap:10px;font-size:13px }
.ov .src .row2 span:first-child { width:104px;flex-shrink:0 }
.ov .src .tr { flex:1;height:8px;border-radius:4px;background:var(--border);overflow:hidden }
.ov .src .tr i { display:block;height:100%;border-radius:4px }
.ov .src b { width:30px;text-align:right }
.ov .todo label { display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px }
.ov .todo label:last-child { border:0 }
.ov .todo input { margin-top:3px;accent-color:var(--primary) }
.ov .todo small { display:block;color:var(--text-2);font-size:12px }
.ov .heat { display:grid;grid-template-columns:34px repeat(7,1fr);gap:4px;font-size:11px;color:var(--text-2) }
.ov .heat .c { height:26px;border-radius:7px;background:color-mix(in srgb,var(--primary) var(--v),var(--bg));border:1px solid color-mix(in srgb,var(--primary) 15%,var(--border)) }
.ov .heat .h { text-align:center;padding:2px 0 }
.ov .heat .t { display:flex;align-items:center }
.ov .heat-lg { display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-2);margin-top:12px }
.ov .heat-lg i { width:70px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--primary-tint),var(--primary)) }
.ov .lvl { display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:4px }
.ov .lvl div { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;font-size:11.5px;color:var(--text-2) }
.ov .lvl i { width:100%;border-radius:8px 8px 0 0;background:var(--primary-soft);border-top:3px solid var(--primary) }
.ov .lvl b { color:var(--text);font-size:13px }
.ov .kv { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.ov .kv div { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px }
.ov .kv b { display:block;font-size:20px;font-weight:800;letter-spacing:-.02em }
.ov .kv span { font-size:12px;color:var(--text-2) }
.ov .nps { display:flex;align-items:center;gap:16px }
.ov .nps .big { font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--primary-ink);line-height:1 }
.ov .nps .split { flex:1 }
.ov .split .sb { display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin-bottom:8px }
.ov .split .sb i:nth-child(1) { background:var(--primary) }
.ov .split .sb i:nth-child(2) { background:#E0A21F }
.ov .split .sb i:nth-child(3) { background:var(--red) }
.ov .q { background:var(--surface);border-radius:14px;padding:10px 14px;font-size:13px;margin-top:10px }
.ov .q small { display:block;color:var(--text-2);margin-top:4px;font-size:11.5px }
.ov .occ { display:grid;gap:12px }
.ov .occ .hd { display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px }
.ov .occ .hd span { color:var(--text-2) }
.ov .who { display:flex;align-items:center;gap:10px }
.ov .wk { display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border) }
.ov .wk:last-child { border:0 }
.ov .wk .dt { width:42px;height:46px;border-radius:12px;background:var(--primary-soft);color:var(--primary-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1.1;flex-shrink:0 }
.ov .wk .dt small { font-size:10px;font-weight:700;text-transform:uppercase;opacity:.8 }
.ov .wk .t { flex:1;min-width:0 }
.ov .wk b { display:block;font-size:13.5px;font-weight:600 }
.ov .wk span { font-size:12px;color:var(--text-2) }
.ov .ovrow.o2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .ov .o21, .ov .o3, .ov .o2, .ov .o4 { grid-template-columns: 1fr; } .ov .k6 { grid-template-columns: 1fr 1fr; } }

/* Люди: роль, email и статус по центру */
.tbl.people th:nth-child(2), .tbl.people td:nth-child(2),
.tbl.people th:nth-child(3), .tbl.people td:nth-child(3),
.tbl.people th:nth-child(4), .tbl.people td:nth-child(4) { text-align: center; }
.tbl.people th:nth-child(5), .tbl.people td:nth-child(5) { text-align: right; }

/* ---- карточка студента ---- */
.spw .sp-head { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px }
.spw .sp-head .back { width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg);display:grid;place-items:center;color:var(--text-2) }
.spw .sp-head h1 { font-size:26px;margin:0 }
.spw .sp-head .grow { flex:1 }
.spw .crumbs { color:var(--text-2);font-size:13px;margin-bottom:6px }
.spw .crumbs b { color:var(--primary-ink);font-weight:600 }
.spw .wmenu { position:relative }
.spw .wpanel { position:absolute;right:0;top:44px;z-index:30;width:270px;background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:none }
.spw .wpanel.open { display:block }
.spw .wpanel label { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px;cursor:pointer }
.spw .wpanel label:hover { background:var(--surface) }
.spw .wpanel input { accent-color:var(--primary) }
.spw .wpanel h4 { margin:6px 10px 6px;font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em }
.spw .sp { display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:16px;align-items:start }
.spw .sp-col { display:grid;gap:16px;min-width:0 }
.spw .two { display:grid;grid-template-columns:1fr 1fr;gap:16px }
.spw .prof { text-align:center }
.spw .prof .big { width:104px;height:104px;border-radius:50%;margin:6px auto 12px;display:grid;place-items:center;font-size:30px;font-weight:800;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 60%,white),var(--primary));box-shadow:0 0 0 6px var(--primary-soft) }
.spw .prof h2 { justify-content:center;margin-bottom:2px;font-size:19px }
.spw .prof .role { color:var(--text-2);font-size:13px;margin-bottom:10px }
.spw .pbar { text-align:left;margin:14px 0 }
.spw .pbar .hd { display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);margin-bottom:5px }
.spw .pbar .hd b { color:var(--text) }
.spw .fld { display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:9px 12px;margin-top:8px;font-size:13px;text-align:left }
.spw .fld span { color:var(--text-2);flex-shrink:0 }
.spw .fld b { font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.spw .fld .chip { margin-left:4px }
.spw .mrow { display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px }
.spw .mm { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px }
.spw .mm small { display:block;color:var(--text-2);font-size:12px }
.spw .mm b { display:block;font-size:22px;font-weight:800;letter-spacing:-.025em;margin:2px 0 }
.spw .mm em { font-style:normal;font-size:11.5px;color:var(--text-2) }
.spw .mm.ok b { color:var(--primary-ink) }
.spw .mm.warn b { color:var(--warn) }
.spw .mm.bad b { color:var(--bad) }
.spw .goal { padding:12px 0;border-top:1px solid var(--border) }
.spw .goal:first-of-type { border:0 }
.spw .goal .gh { display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;font-weight:600;font-size:14px }
.spw .goal .gm { display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);margin-top:6px }
.spw .sq { display:flex;gap:6px;flex-wrap:wrap }
.spw .sq i { width:26px;height:26px;border-radius:8px;background:var(--primary) }
.spw .sq i.no { background:var(--red) }
.spw .sq i.cx { background:#E0A21F }
.spw .sq i.up { background:none;border:2px dashed var(--primary) }
.spw .factors .fx { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px }
.spw .factors .fx:last-child { border:0 }
.spw .factors .fx i { width:9px;height:9px;border-radius:50%;flex-shrink:0 }
.spw .factors .fx span { margin-left:auto;color:var(--text-2);font-size:12px }
.spw .gauge { display:flex;align-items:center;gap:16px;margin-bottom:10px }
.spw .gauge .gv { font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--primary-ink);line-height:1 }
.spw .tml { position:relative;padding-left:22px }
.spw .tml:before { content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border) }
.spw .te { position:relative;padding:6px 0 12px }
.spw .te:before { content:"";position:absolute;left:-21px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--primary);border:2px solid var(--bg) }
.spw .te.red:before { background:var(--red) }
.spw .te.amber:before { background:#E0A21F }
.spw .te b { font-size:13.5px;font-weight:600 }
.spw .te span { display:block;font-size:12px;color:var(--text-2) }
.spw .badges { display:flex;flex-wrap:wrap;gap:10px }
.spw .bd { display:flex;flex-direction:column;align-items:center;gap:5px;width:78px;text-align:center;font-size:11.5px;color:var(--text-2) }
.spw .bd i { width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px;background:var(--primary-soft);color:var(--primary-ink);border:2px solid var(--primary) }
.spw .bd.lock i { background:var(--surface);border:2px dashed var(--border);color:var(--text-3) }
.spw .mini-bars { display:flex;align-items:flex-end;gap:4px;height:70px }
.spw .mini-bars i { flex:1;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--primary) 40%,var(--bg)) }
.spw .mini-bars i:last-child { background:var(--primary) }
.spw .nt { background:var(--surface);border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:8px }
.spw .nt small { display:block;color:var(--text-2);margin-top:4px;font-size:11.5px }
.spw .todo2 label { display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px }
.spw .todo2 label:last-child { border:0 }
.spw .todo2 input { margin-top:3px;accent-color:var(--primary) }
.spw .todo2 small { display:block;color:var(--text-2);font-size:11.5px }
.spw .app-row { display:flex;gap:10px;align-items:center;font-size:13px;padding:7px 0;border-bottom:1px solid var(--border) }
.spw .app-row:last-child { border:0 }
.spw .app-row span { margin-left:auto;color:var(--text-2) }
.spw .hide { display:none!important }
.spw .hide { display: none !important; }
@media (max-width: 1180px) { .spw .sp { grid-template-columns: 1fr; } .spw .two { grid-template-columns: 1fr; } }

/* ---- список групп (директор): таблица в карточке ---- */
.gl-box { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px 12px; }
.gl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.seg2 { display: inline-flex; border: 1px solid var(--border); border-radius: 980px; padding: 3px; background: var(--surface); }
.seg2 button { border: 0; background: none; border-radius: 980px; padding: 6px 14px; font: inherit; font-weight: 600; font-size: 13px; color: var(--text-2); cursor: pointer; }
.seg2 .on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(16,17,22,.12); }
.gl-search { width: 260px; padding: 7px 14px; border-radius: 980px; font-size: 13.5px; }
.chip-sel { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; font-size: 12.5px; border-radius: 980px; padding: 5px 6px 5px 12px; }
.chip-sel button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; }
.gl-fwrap { position: relative; }
.gl-badge { margin-left: 6px; background: var(--primary); color: var(--on-primary); border-radius: 9px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 11px; }
.gl-pop { position: absolute; right: 0; top: 40px; z-index: 25; width: 260px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; display: grid; gap: 10px; }
.tbl.gl th { font-size: 12.5px; user-select: none; }
.tbl.gl th.gl-sort { cursor: pointer; }
.tbl.gl th .arr { margin-left: 6px; font-size: 10px; opacity: .45; } .tbl.gl th.on { color: var(--primary-ink); } .tbl.gl th.on .arr { opacity: 1; }
.tbl.gl .chk { width: 36px; padding-right: 0; } .tbl.gl input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.tbl.gl td:first-child { font-weight: 400; }
.tbl.gl tr.picked td { background: var(--primary-soft); }
.gl-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .gl-cell b { display: block; font-weight: 600; } .gl-cell .small { display: block; }
.gl-av { width: 36px; height: 36px; border-radius: 12px; display: inline-grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: 12px; background: var(--primary-soft); color: var(--primary-ink); }
.gl-av.red { background: var(--bad-soft); color: var(--bad); } .gl-av.amber { background: var(--warn-soft); color: var(--warn); }
.gl-av.sm { width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; } .gl-av.lg { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }
.gl-att { display: flex; align-items: center; gap: 10px; min-width: 110px; } .gl-att b { width: 38px; } .gl-att .meter { flex: 1; height: 6px; }
.gl-when { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .gl-when i { font-style: normal; color: var(--text-2); }
.gl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.gl-pages { display: flex; align-items: center; gap: 6px; }
.gl-pages button { min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-2); }
.gl-pages button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .gl-pages button:disabled { opacity: .4; cursor: default; }
.gl-pages .dots { color: var(--text-2); padding: 0 2px; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gl-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; padding: 16px; background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s; min-width: 0; }
.gl-card h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-teacher { display: flex; align-items: center; gap: 10px; min-height: 30px; margin: 14px 0; min-width: 0; } .gl-teacher span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.gl-stats { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 18px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; } .gl-stats div { min-width: 0; } .gl-stats b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gl-stats span { display: block; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .gl-search { width: 100%; } }

.gl-av.round { border-radius: 50%; object-fit: cover; }
.tbl.people td:first-child .gl-cell b { font-weight: 600; }

/* страница группы */
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.gp-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gp-title .gl-av.lg { width: 56px; height: 56px; border-radius: 18px; font-size: 17px; }
.gp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; margin-top: 6px; }
.gp-meta .gl-cell { color: var(--text); font-weight: 600; gap: 8px; }
.gl-box .tabs { margin-bottom: 14px; }
.gl-att .small { white-space: nowrap; }

/* ---- статистика группы: компактная лента ---- */
.gs-bar { display: flex; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.gs-cell { flex: 1 1 150px; padding: 12px 18px; border-left: 1px solid var(--border); min-width: 0; } .gs-cell:first-child { border-left: 0; }
.gs-l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-v { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 30px; } .gs-v b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; } .gs-v small { color: var(--text-2); font-size: 12px; font-weight: 600; }
.gs-mini { display: inline-flex; width: 30px; height: 30px; flex-shrink: 0; } .gs-mini svg { width: 100%; height: 100%; }
.gs-avs { display: inline-flex; } .gs-avs i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -7px; display: grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 800; background: var(--primary-soft); color: var(--primary-ink); } .gs-avs i:first-child { margin-left: 0; }
.gs-avs i.red { background: var(--bad-soft); color: var(--bad); } .gs-avs i.amber { background: var(--warn-soft); color: var(--warn); } .gs-avs i.more { background: var(--surface); color: var(--text-2); }
.gs-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; } .gs-spark i { width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 38%, var(--bg)); } .gs-spark i.hi { background: var(--primary); }
@media (max-width: 720px) { .gs-cell { flex-basis: 45%; border-left: 0; border-top: 1px solid var(--border); } }

/* страница урока */
.gl-av.lt-group { background: var(--primary-soft); color: var(--primary-ink); }
.gl-av.lt-club { background: var(--bad-soft); color: var(--bad); }
.gl-av.lt-ind { background: var(--warn-soft); color: var(--warn); }
.att-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 980px; padding: 3px; background: var(--surface); gap: 2px; }
.att-seg button { border: 0; background: none; border-radius: 980px; padding: 5px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.att-seg button.on-ok { background: var(--primary); color: var(--on-primary); }
.att-seg button.on-no { background: var(--bad-soft); color: var(--bad); }

/* ---- карточка студента: ровная раскладка и адаптив ---- */
.spw .sp { grid-template-columns: 300px minmax(0, 1fr) 300px; }
.spw .sp-col { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.spw .sp-col > * { min-width: 0; }
.spw .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spw .fld { flex-wrap: wrap; align-items: baseline; }
.spw .fld b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; flex: 1 1 auto; }
.spw .fld select { max-width: 100%; }
.spw .mrow { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.spw .sp-head { align-items: center; }
.spw .sp-head h1 { font-size: clamp(20px, 2.4vw, 26px); overflow-wrap: anywhere; }
@media (max-width: 1500px) {
  .spw .sp { grid-template-columns: 290px minmax(0, 1fr); }
  .spw .sp-col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .spw .sp { grid-template-columns: minmax(0, 1fr); }
  .spw .sp-col:nth-child(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .spw .two { grid-template-columns: minmax(0, 1fr); }
}
.att-seg button.on-book { background: var(--primary-soft); color: var(--primary-ink); }

/* рассылки */
.bc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
.bc-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .bc-form .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.bc-form textarea { min-height: 120px; }
.bc-count { font-size: 12px; color: var(--text-2); }
.bc-prev { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .bc-prev .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.bc-phone { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.bc-from { display: flex; align-items: center; gap: 10px; } .bc-from b { display: block; font-size: 13.5px; } .bc-from small { color: var(--text-2); font-size: 11.5px; }
.bc-bubble { background: var(--primary-soft); color: var(--text); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } .bc-bubble.empty { color: var(--text-2); background: var(--surface); }
.bc-text { max-width: 420px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .bc-grid { grid-template-columns: minmax(0, 1fr); } }

.bc-sel { appearance: none; padding-right: 14px; cursor: pointer; font: inherit; }

/* предпросмотр бренда в настройках */
.brp-wrap { display: flex; flex-direction: column; gap: 12px; }
.brp-cap { display: flex; flex-direction: column; gap: 2px; }
.brp { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); pointer-events: none; user-select: none; }
.brp-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 3px solid var(--primary); }
.brp-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brp-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.brp-nav { display: flex; gap: 4px; padding: 8px 10px 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.brp-nav span { padding: 6px 10px; font-size: 12.5px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.brp-nav span.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.brp-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.brp-lesson, .brp-prog { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.brp small { color: var(--text-2); font-size: 11.5px; }
.brp-btn { align-self: flex-start; background: var(--primary); border-color: var(--primary); }
.brp-chip { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border-radius: 980px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* счётчик выбора */
.stp { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.stp-box { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 980px; padding: 4px; }
.stp-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--primary-soft); color: var(--primary-ink, var(--primary)); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.stp-btn:hover:not(:disabled) { background: var(--primary); color: #fff; }
.stp-btn:disabled { opacity: .4; cursor: default; }
.stp-num { min-width: 96px; text-align: center; display: inline-flex; gap: 5px; align-items: baseline; justify-content: center; padding: 0 6px; white-space: nowrap; }
.stp-num b { font-size: 18px; } .stp-num small { color: var(--text-2); font-size: 13px; }

/* напоминания: стандарт школы и личный выбор студента */
.rem-box { display: flex; flex-direction: column; gap: 10px; }
.rem-box h2 { margin: 0; }
.rem-now { margin: 0; font-size: 13.5px; color: var(--primary-ink, var(--primary)); font-weight: 600; }
.rem-law { margin: 0; font-size: 12.5px; color: var(--text-2); background: var(--primary-soft); border-radius: 12px; padding: 10px 12px; }
.rem-rules { margin: 0; padding: 10px 12px 10px 28px; font-size: 12.5px; color: var(--text-2); background: var(--primary-soft); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.rem-slot { display: flex; flex-direction: column; gap: 6px; } .rem-slot .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.rem-now.warn { color: var(--bad); }

/* логотип школы в настройках */
.logo-box { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; flex-wrap: wrap; }
.logo-thumb { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.logo-thumb.ph { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; border: 0; }
.logo-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.logo-actions { display: flex; gap: 8px; margin-left: auto; }

/* «Мои группы» учителя: раздел на группу — слева описание, справа студенты */
.tm-head { align-items: flex-start; } .tm-head p { margin: 4px 0 0; }
.tm-box { padding: 0; }
.tm-sec { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px; padding: 22px 24px; border-top: 1px solid var(--border); }
.tm-sec:first-child { border-top: 0; }
.tm-title { font-size: 16px; font-weight: 700; } .tm-title a { color: inherit; text-decoration: none; } .tm-title a:hover { color: var(--primary); }
.tm-sub { margin: 2px 0 12px; color: var(--text-2); font-size: 13px; }
.tm-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--text-2); } .tm-meta b { color: var(--text); }
.tm-main { min-width: 0; }
.tm-tbl td { vertical-align: middle; }
.tm-who { display: flex; flex-direction: column; min-width: 0; } .tm-who small { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.tm-act { white-space: nowrap; text-align: right; }
.tm-ib { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center; }
.tm-ib svg { width: 18px; height: 18px; } .tm-ib:hover { background: var(--primary-soft); color: var(--primary); } .tm-ib.danger:hover { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 900px) { .tm-sec { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 16px; } }
.tm-who b { white-space: nowrap; } .tm-tbl td:first-child { min-width: 210px; }
.tm-tbl { table-layout: fixed; width: 100%; }
.tm-tbl th:nth-child(2) { width: 150px; } .tm-tbl th:last-child { width: 84px; } .tm-tbl th:first-child { width: 34%; }
.tm-tbl td { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .tm-tbl { table-layout: auto; min-width: 640px; } }

/* «Мои группы»: два столбца — группы слева, индивидуальные справа */
.tm-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.tm-ph { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px 4px; } .tm-ph h2 { margin: 0; font-size: 17px; }
.tm-sec { display: block; padding: 16px 22px 18px; border-top: 1px solid var(--border); gap: 0; }
.tm-ph + .tm-sec { border-top: 0; }
.tm-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.tm-side .tm-title, .tm-side .tm-sub { grid-column: 1; } .tm-side .tm-sub { margin: 2px 0 8px; }
.tm-side > .row { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; justify-content: flex-end; }
.tm-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.tm-main { overflow: hidden; }
.tm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 22px 14px; }
.tm-kpis > div { background: var(--primary-tint); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.tm-kpis b { font-size: 18px; } .tm-kpis span { color: var(--text-2); font-size: 12px; }
.tm-panel > .table-wrap, .tm-panel > .empty { margin: 0 22px 20px; }
.tm-tbl.tm-ind th:first-child { width: 38%; } .tm-tbl.tm-ind th:nth-child(2) { width: 150px; }
@media (max-width: 900px) { .tm-sec { padding: 16px; } .tm-ph, .tm-kpis { padding-left: 16px; padding-right: 16px; } .tm-panel > .table-wrap, .tm-panel > .empty { margin: 0 16px 16px; } }

.tm-tbl th, .tm-tbl td { padding-left: 10px; padding-right: 10px; }
.tm-tbl th:first-child, .tm-tbl td:first-child { padding-left: 14px; }
.tm-tbl th:nth-child(2) { width: 132px; } .tm-tbl th:nth-child(3) { width: 70px; } .tm-tbl th:nth-child(4) { width: 118px; } .tm-tbl th:last-child { width: 76px; } .tm-tbl th:first-child { width: auto; }
.tm-tbl.tm-ind th:nth-child(2) { width: 140px; } .tm-tbl.tm-ind th:nth-child(3) { width: 50px; }
.tm-tbl td:first-child { min-width: 0; }
.tm-who b, .tm-who small { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .tm-split { grid-template-columns: minmax(0, 1fr); } }

.tm-tbl th:nth-child(2) { width: 140px; } .tm-tbl th:nth-child(3) { width: 112px; } .tm-tbl th:last-child { width: 78px; }
.tm-tbl.tm-ind th:last-child { width: 190px; } .tm-tbl.tm-ind th:nth-child(2) { width: 190px; }
.tm-tbl td:last-child { padding-right: 6px; overflow: visible; }
.tm-ind .tm-act .pill { margin-right: 6px; }
.tm-tbl.tm-ind th:last-child, .tm-tbl.tm-ind th:nth-child(2) { width: 60px; }
.tm-tbl.tm-ind th:first-child { width: auto; }

/* сворачиваемые плашки групп */
.tm-ph .tm-all { margin-left: auto; }
.tm-sec { padding: 0; }
.tm-gh { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 14px 22px; cursor: pointer; outline-offset: -2px; }
.tm-gh:hover { background: var(--primary-tint); }
.tm-chev { color: var(--text-2); display: grid; place-items: center; } .tm-chev svg { width: 18px; height: 18px; transition: transform .15s; }
.tm-sec.open .tm-chev svg { transform: rotate(90deg); }
.tm-gt { min-width: 0; } .tm-gt .tm-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-gt .tm-sub { margin: 1px 0 0; }
.tm-gm { display: flex; gap: 4px 14px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; color: var(--text-2); } .tm-gm b { color: var(--text); }
.tm-body { display: none; padding: 0 22px 16px 56px; } .tm-sec.open .tm-body { display: block; }
.tm-body .table-wrap { margin-bottom: 10px; }
.tm-foot { display: flex; justify-content: flex-end; }
.tm-sec.open > .tm-gh { background: var(--primary-tint); }
@media (max-width: 900px) { .tm-gh { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 12px 16px; } .tm-gm { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; } .tm-gh .pill { grid-row: 1; grid-column: 3; } .tm-gh > span:last-child { grid-column: 2; } .tm-body { padding: 0 16px 14px; } }
/* шапка плашки: имя + язык в одну строку, показатели строкой ниже */
.tm-gh { grid-template-columns: 22px minmax(0, 1fr) auto auto; row-gap: 4px; }
.tm-gh .tm-chev { grid-row: 1 / span 2; align-self: center; }
.tm-gt { display: flex; align-items: baseline; gap: 8px; } .tm-gt .tm-title { flex: 0 1 auto; } .tm-gt .tm-sub { flex: none; margin: 0; }
.tm-gm { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; }
.tm-gh > .pill { grid-column: 3; grid-row: 1; } .tm-gh > span:last-child { grid-column: 4; grid-row: 1; }
@media (max-width: 900px) { .tm-gh { grid-template-columns: 22px minmax(0, 1fr) auto; } .tm-gm { grid-column: 2 / -1; } .tm-gh > .pill { grid-column: 3; } .tm-gh > span:last-child { grid-column: 2 / -1; grid-row: 3; } }

/* приглашения: кто откликнулся */
.iv-tbl .iv-chev svg { width: 16px; height: 16px; transition: transform .15s; } .iv-tbl tr.open .iv-chev svg { transform: rotate(90deg); }
.iv-chev { width: 16px; }
.iv-stack { display: inline-flex; } .iv-av { margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; display: inline-flex; } .iv-av:first-child { margin-left: 0; }
.iv-more { margin-left: 4px; align-self: center; font-size: 12px; color: var(--text-2); }
.iv-detail > td { padding: 0 !important; background: var(--primary-tint); }
.iv-list { padding: 6px 14px 10px 44px; display: flex; flex-direction: column; }
.iv-person { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 12px; justify-content: space-between; flex-wrap: wrap; } .iv-person.click:hover { background: var(--primary-soft); }
.iv-person .gl-cell { flex: 1 1 220px; min-width: 0; }
.iv-unk { margin: 6px 10px 0; }

/* профиль студента: больше воздуха */
.spw .prof { padding: 26px 24px 24px; }
.spw .prof h2 { margin-bottom: 0; }
.spw .prof .since { color: var(--text-2); font-size: 12.5px; margin: 6px 0 22px; }
.spw .prof .big { margin: 0 auto 20px; }
.spw .prof .pname { margin: 0 0 8px; }
.spw .prof .role { margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.spw .pbar { margin: 22px 0 18px; }
.spw .pbar .hd { margin-bottom: 8px; }
.spw .fld { margin-top: 10px; padding: 11px 14px; }
.spw .prof > .card { margin-top: 20px !important; padding: 16px 18px !important; }
.spw .crumbs { margin-bottom: 12px; }
.spw .sp-head { margin-bottom: 24px; gap: 14px; }

/* тарифы: список и конструктор */
.pl-sub { margin: -4px 0 14px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.pl-card { --pc: var(--primary); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--pc); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); min-width: 0; }
.pl-card.off { opacity: .6; }
.pl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pl-kind { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent); border-radius: 980px; padding: 3px 10px; }
.pl-off { font-size: 12px; color: var(--text-2); }
.pl-name { margin: 6px 0 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.pl-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .pl-price b { font-size: 26px; letter-spacing: -.02em; } .pl-price s { color: var(--text-2); font-size: 14px; }
.pl-disc { font-size: 12px; font-weight: 700; color: var(--red); background: var(--bad-soft); border-radius: 980px; padding: 2px 8px; }
.pl-per { font-size: 13px; color: var(--text-2); min-height: 18px; }
.pl-feat { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.pl-feat li { display: flex; gap: 9px; align-items: flex-start; } .pl-feat li::before { content: '✓'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc); font-size: 11px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.pl-desc { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); }
.pl-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.pl-meta { font-size: 13px; color: var(--text-2); } .pl-meta b { color: var(--text); }
.pl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pl-actions .pl-sw { margin-right: auto; }
.pl-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .pl-sw input { accent-color: var(--primary); width: 16px; height: 16px; }
.pl-new { border: 2px dashed var(--border); background: transparent; border-radius: 18px; min-height: 220px; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pl-new span { font-size: 30px; line-height: 1; color: var(--primary); } .pl-new:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.pl-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pl-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-sec { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 14px; } .pl-sec h2 { margin: 0; font-size: 16px; }
.pl-row { display: flex; flex-direction: column; gap: 6px; } .pl-row .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); } .pl-row small { font-size: 12px; }
.pl-inline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--primary-tint); border: 1px solid var(--border); border-radius: 980px; align-self: flex-start; }
.pl-seg button { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); padding: 7px 14px; border-radius: 980px; cursor: pointer; } .pl-seg button.on { background: var(--surface); color: var(--primary-ink, var(--primary)); box-shadow: 0 1px 3px rgba(16,17,22,.12); }
.pl-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .pl-opt input { accent-color: var(--primary); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.pl-opt b { display: block; font-size: 14px; } .pl-opt small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 1px; } .pl-opt.inline { align-items: center; } .pl-opt.inline span { font-size: 14px; }
.pl-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.pl-prev { display: flex; flex-direction: column; gap: 8px; } .pl-prev .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.pl-fake { margin-top: 10px; text-align: center; background: var(--pc); color: #fff; border-radius: 980px; padding: 10px; font-weight: 600; font-size: 14px; pointer-events: none; }
.pl-save { gap: 10px; }
@media (max-width: 1000px) { .pl-editor { grid-template-columns: minmax(0, 1fr); } .pl-side { position: static; } }
.pl-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.pl-actions { flex-wrap: nowrap; gap: 6px; } .pl-actions .btn.sm { white-space: nowrap; }

/* посещаемость: календарь месяца */
.spw .hm-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .spw .hm-nav b { font-size: 14px; min-width: 120px; text-align: center; }
.spw .hm-arr { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); font-size: 16px; line-height: 1; cursor: pointer; } .spw .hm-arr:disabled { opacity: .35; cursor: default; } .spw .hm-arr:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.spw .hm-sum { margin-left: auto; font-size: 12px; color: var(--text-2); }
.spw .hm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; font-size: 11px; color: var(--text-2); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.spw .hm { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.spw .hm-c { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 600; position: relative; }
.spw .hm-c.none { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-weight: 500; }
.spw .hm-c.ok { background: var(--primary); color: #fff; }
.spw .hm-c.miss { background: #A9ABB8; color: #fff; }
.spw .hm-c.cx { background: #E0A21F; color: #fff; }
.spw .hm-c.plan { border: 2px dashed var(--primary); color: var(--primary); background: transparent; }
.spw .hm-c.today { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.spw .hm-lg { margin-top: 14px; gap: 6px 14px; }
.spw .hm-lg i.miss { background: #A9ABB8; } .spw .hm-lg i.cx { background: #E0A21F; }
.spw .hm-lg i.plan { background: transparent; border: 2px dashed var(--primary); } .spw .hm-lg i.none { background: var(--surface); border: 1px solid var(--border); }

.tm-search { margin-bottom: 14px; } .tm-search .gl-search { max-width: 460px; width: 100%; }
.tm-box mark, .iv-list mark { background: color-mix(in srgb, var(--primary) 22%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }

/* раскрытая группа: воздух между шапкой и таблицей, между соседними группами и под последней строкой */
.tm-body { padding-top: 16px; padding-bottom: 20px; }
.tm-sec.open + .tm-sec { margin-top: 0; }
.tm-sec.open { padding-bottom: 4px; }

/* страница урока */
.lp .crumb { margin-bottom: 10px; }
.lp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.lp-title { flex: 1; min-width: 240px; }
.lp-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lp-row1 h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lp-meta { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.lp-meta a { color: var(--primary-ink); font-weight: 600; text-decoration: none; }
.lp-who { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.lp-acts { display: flex; align-items: center; gap: 8px; position: relative; }
.lp-more { width: 38px; height: 38px; padding: 0; font-size: 18px; letter-spacing: 1px; }
.lp-menu { position: absolute; right: 0; top: 46px; z-index: 20; min-width: 250px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 6px; display: none; }
.lp-menu.open { display: block; }
.lp-menu .lp-mi { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.lp-menu .lp-mi:hover { background: var(--surface); } .lp-menu .lp-mi.danger { color: var(--bad); }
.lp-cancelled { background: var(--bad-soft); color: var(--bad); border-radius: 14px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.lp .gs-bar { margin-bottom: 18px; } .lp .gs-v b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.lp-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lp-card { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 20px 18px; }
.lp-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.lp-card .pill { font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.lp-sub { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.lp-kv { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .lp-kv span { color: var(--text-2); } .lp-kv b { margin-left: auto; font-weight: 600; text-align: right; }
.lp-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; margin-top: 8px; }
.lp-file i { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; } .lp-file span { margin-left: auto; color: var(--text-2); font-size: 12px; }
.lp-hw { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; cursor: pointer; } .lp-hw:last-of-type { border-bottom: 0; }
.lp-hw input { accent-color: var(--primary); margin-top: 3px; width: 16px; height: 16px; } .lp-hw small { display: block; color: var(--text-2); font-size: 12px; }
.lp-prog { height: 6px; border-radius: 6px; background: var(--border); margin-top: 6px; overflow: hidden; } .lp-prog i { display: block; height: 100%; background: var(--primary); }
.lp-nt { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-top: 8px; } .lp-nt small { display: block; color: var(--text-2); margin-top: 4px; font-size: 12px; }
.lp-card .btn { margin-top: 12px; }
.lp-demo { margin: 0; font-size: 12px; color: var(--text-2); text-align: center; }
.att-seg button.on-no { background: #A9ABB8; color: #fff; }
@media (max-width: 1100px) { .lp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .lp-acts { width: 100%; } }

/* раскрытая группа — одна цельная подложка: шапка и таблица на одном фоне, таблица белой карточкой */
.tm-sec.open { background: var(--primary-tint); padding-bottom: 0; }
.tm-sec.open > .tm-gh, .tm-sec.open > .tm-gh:hover { background: transparent; }
.tm-sec.open .tm-body { padding-top: 6px; padding-bottom: 18px; }
.tm-sec.open .tm-body .table-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.tm-sec.open .tm-body th { background: var(--surface); border-radius: 0; }
.tm-sec.open .tm-body tr:last-child td { border-bottom: 0; }
.tm-sec.open .tm-body .empty { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; }

/* шапка урока: название, статус и мета — в одну строку (переносится только на узком экране) */
.lp-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
.lp-meta { margin-top: 0; padding-left: 20px; border-left: 1px solid var(--border); gap: 4px 18px; }
@media (max-width: 1000px) { .lp-meta { padding-left: 0; border-left: 0; width: 100%; } }

/* запросы на перенос: колонки одной ширины, всё по центру */
.rq-tbl { table-layout: fixed; width: 100%; }
.rq-tbl th, .rq-tbl td { text-align: center; padding: 12px 10px; vertical-align: middle; }
.rq-tbl th:nth-child(1) { width: 22%; } .rq-tbl th:nth-child(2) { width: 20%; } .rq-tbl th:nth-child(3) { width: 18%; } .rq-tbl th:nth-child(4) { width: 22%; } .rq-tbl th:nth-child(5) { width: 18%; }
.rq-tbl td { border-bottom: 1px solid var(--border); } .rq-tbl tr:last-child td { border-bottom: 0; }
.rq-who { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; } .rq-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-msg { overflow-wrap: anywhere; color: var(--text); }
.rq-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) { .rq-tbl { table-layout: auto; min-width: 760px; } }
.rq-tbl th:nth-child(1) { width: 20%; } .rq-tbl th:nth-child(2) { width: 18%; } .rq-tbl th:nth-child(3) { width: 16%; } .rq-tbl th:nth-child(4) { width: 20%; } .rq-tbl th:nth-child(5) { width: 26%; }
.rq-acts { flex-wrap: nowrap; } .rq-acts .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
/* запросы на перенос: выравнивание по левому краю колонок (раскладка и ширины без изменений) */
.rq-tbl th, .rq-tbl td { text-align: left; }
.rq-tbl th:first-child, .rq-tbl td:first-child { padding-left: 16px; }
.rq-who, .rq-acts { justify-content: flex-start; }

/* профиль учителя */
.spw .mhd { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .spw .mhd:first-of-type { margin-top: 4px; }
.spw .card h2 a { font-size: 13px; font-weight: 600; margin-left: auto; text-decoration: none; color: var(--primary-ink); }
.spw .goal.click { cursor: pointer; border-radius: 12px; } .spw .goal.click:hover { background: var(--primary-tint); }
.spw .fx2 { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .spw .fx2:last-of-type { border: 0; } .spw .fx2 span { color: var(--text-2); font-size: 12px; } .spw .fx2.click { cursor: pointer; } .spw .fx2.click:hover b { color: var(--primary); }
.spw .empty-tile { margin-top: 10px; border: 2px dashed var(--border); border-radius: 14px; padding: 12px; text-align: center; color: var(--text-2); font-size: 13px; font-weight: 600; }
.spw .tp-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 110px; align-items: end; }
.spw .tp-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .spw .tp-bar i { width: 100%; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--primary) 80%, white); } .spw .tp-bar span { font-size: 11px; color: var(--text-2); text-transform: uppercase; }
.spw .tp-tbl td { vertical-align: middle; }
/* полоса прогресса: базовый вид (раньше был только у .gl-att) */
.meter { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.gl-att .meter { height: 6px; }
.spw .card h2 { flex-wrap: wrap; } .spw .card h2 .chip { white-space: nowrap; }
.spw .tp-tabs { margin: 0 0 16px; }
.spw .kv.tp-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .spw .kv.tp-kv b { font-size: 17px; } .spw .kv.tp-kv span { font-size: 11.5px; }
.lp-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

/* метрики учителя: узкая колонка слева, широкие блоки справа */
.spw .sp.sp2 { grid-template-columns: 340px minmax(0, 1fr); }
.spw .sp2 .mrow { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.spw .sp2 .mm { padding: 14px 16px; } .spw .sp2 .mm b { font-size: 24px; }
.spw .sp2 .mm em { font-size: 12px; }
.spw .sp2 .card { padding: 20px 24px 22px; }
@media (max-width: 1000px) { .spw .sp.sp2 { grid-template-columns: minmax(0, 1fr); } }
.spw [data-w=groups]:not(.all) .goal.extra { display: none; } .spw .tp-more { margin-top: 12px; }

/* ---------- метрики учителя: диаграммы ---------- */
:root { --s1: #0E9488; --s2: #C97A12; --s3: #5B5FD0; --gray: #B9BBC8; --grid: #ECECF0; }
@media (prefers-color-scheme: dark) { :root { --s1: #24A296; --s2: #C98230; --s3: #757DE6; --gray: #4A4A55; --grid: #23232B; } }
.cm .cm-sec { margin: 26px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.cm .cm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cm .c3 { grid-column: span 3; } .cm .c4 { grid-column: span 4; } .cm .c5 { grid-column: span 5; } .cm .c6 { grid-column: span 6; } .cm .c7 { grid-column: span 7; } .cm .c8 { grid-column: span 8; } .cm .c12 { grid-column: span 12; }
@media (max-width: 1200px) { .cm .c3, .cm .c4, .cm .c5 { grid-column: span 6; } .cm .c7, .cm .c8 { grid-column: span 12; } }
@media (max-width: 800px) { .cm .cm-grid > * { grid-column: span 12 !important; } }
.cm-card { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px 16px; display: flex; flex-direction: column; min-width: 0; }
.cm-card h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cm-sub { margin: 2px 0 12px; font-size: 12.5px; color: var(--text-2); }
.cm-tbtn { margin-left: auto; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 980px; cursor: pointer; } .cm-tbtn:hover { color: var(--primary-ink); border-color: var(--primary); }
.cm-demo { font-size: 10.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); border-radius: 980px; padding: 1px 7px; letter-spacing: .02em; }
.cm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-chart text { font-family: var(--font); fill: var(--text-2); font-size: 10.5px; } .cm-chart .lbl { fill: var(--text); font-weight: 600; } .cm-chart .grid line { stroke: var(--grid); stroke-width: 1; }
.cm-chart [data-tip] { transition: opacity .1s; } .cm-chart [data-tip]:hover { opacity: .78; }
.cm-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.cm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .cm-legend i.ln { height: 3px; border-radius: 2px; vertical-align: 3px; width: 14px; }
.cm-cap { margin: 4px 0 0; font-size: 12px; color: var(--text-2); }
.cm-tv { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cm-tv th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--border); } .cm-tv td { padding: 7px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.cm-tip { position: fixed; z-index: 100; pointer-events: none; background: var(--text); color: var(--bg); border-radius: 10px; padding: 7px 10px; font-size: 12px; line-height: 1.35; display: none; max-width: 240px; box-shadow: var(--shadow); } .cm-tip b { display: block; font-size: 14px; }
.cm-kpi { padding: 16px 18px; } .cm-kpi .l { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .cm-kpi .v { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 2px 0; } .cm-kpi .d { font-size: 12.5px; color: var(--text-2); } .cm-kpi svg { margin-top: 8px; }
.cm-meter { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--s1) 14%, var(--bg)); overflow: hidden; margin-top: 12px; } .cm-meter i { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
.cm-cloud { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: center; padding: 6px 0; line-height: 1.1; } .cm-cloud span { font-weight: 700; color: var(--text); } .cm-cloud span.m { color: var(--text-2); font-weight: 600; }
.cm-tree { display: grid; gap: 2px; height: 190px; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; } .cm-tree > div, .cm-sub > div { border-radius: 6px; padding: 8px 10px; color: #fff; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; justify-content: space-between; } .cm-tree b { font-size: 18px; }
.cm-tree .cm-sub { display: grid; gap: 2px; padding: 0; margin: 0; background: none; }

/* метрики: компактнее */
.cm .cm-grid { gap: 12px; }
.cm .cm-sec { margin: 20px 0 9px; }
.cm-card { padding: 13px 16px 12px; border-radius: 16px; }
.cm-card h2 { font-size: 14px; } .cm-sub { margin: 1px 0 8px; font-size: 12px; }
.cm-kpi { padding: 12px 15px; } .cm-kpi .v { font-size: 24px; } .cm-kpi .l, .cm-kpi .d { font-size: 12px; } .cm-kpi svg { margin-top: 4px; height: 24px; }
.cm-meter { margin-top: 8px; }
.cm-legend { margin-top: 6px; font-size: 11.5px; }
.cm-chart text { font-size: 10px; }
.cm-tree { height: 150px; } .cm-cloud { padding: 2px 0; gap: 4px 12px; } .cm-cloud span { zoom: .85; }
.spw .mrow { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .spw .mm small { display: flex; align-items: center; flex-wrap: wrap; }

/* перенос занятия: выбор слота в расписании учителя */
.modal:has(.rs) { max-width: 880px; width: calc(100vw - 32px); }
.rs { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.rs-intro { margin: 0; }
.rs-nav { display: flex; align-items: center; gap: 10px; } .rs-nav b { min-width: 130px; text-align: center; font-size: 14px; } .rs-cnt { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.rs-nav .hm-arr { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); font-size: 16px; line-height: 1; cursor: pointer; } .rs-nav .hm-arr:disabled { opacity: .35; cursor: default; }
.rs-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rs-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; } .rs-col.today { border-color: var(--primary); }
.rs-dh { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 4px; border-bottom: 1px solid var(--border); } .rs-dh b { font-size: 16px; } .rs-dh span { font-size: 11.5px; color: var(--text-2); text-transform: uppercase; }
.rs-slot { border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); color: var(--primary-ink); border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 1px; }
.rs-slot small { font-size: 11px; font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-slot:hover { border-color: var(--primary); }
.rs-slot.on { background: var(--primary); color: #fff; border-color: var(--primary); } .rs-slot.on small { color: rgba(255,255,255,.85); }
.rs-cur { border: 2px dashed var(--border); border-radius: 10px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--text-2); display: flex; flex-direction: column; } .rs-cur small { font-size: 11px; font-weight: 500; }
.rs-none { color: var(--text-2); font-size: 13px; padding: 4px 2px; }
.rs-pick { font-size: 14px; min-height: 22px; }
@media (max-width: 700px) { .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* правила отмены занятий */
.cp-lead { margin: 0; font-weight: 600; } .cp-warn { margin: 0; background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; } .cp-ok { margin: 0; background: var(--primary-soft); color: var(--primary-ink); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.cp-rules { margin: 0; padding: 12px 14px 12px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.cp-note { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13px; } .cp-note .cp-rules { border: 0; padding: 6px 0 0 18px; background: none; }
.cp-box { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .cp-box h2 { margin: 0; }
.cp-tier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; font-size: 14px; } .cp-tier .inp { width: 84px; padding: 7px 10px; }
.cp-tier .sp { flex: 1; } .cp-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .cp-sw input { accent-color: var(--primary); width: 16px; height: 16px; }

/* оплата: счета, абонементы, страница студента */
.bl-tbl td { vertical-align: middle; } .bl-tbl .tm-act { white-space: nowrap; text-align: right; } .bl-tbl .bad, .gs-bar .bad { color: var(--bad); }
.bl-tbl .tm-act > * { margin-left: 6px; }
.bl-tbl .gl-att { min-width: 140px; } .meter.red i { background: var(--red); }
.pay-due { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--warn-soft); border-radius: 18px; padding: 14px 20px; margin-bottom: 16px; } .pay-due span { color: var(--text-2); font-weight: 600; } .pay-due b { font-size: 26px; letter-spacing: -.02em; }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; } .pay-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }
.pay-big { font-size: 15px; margin: 8px 0 10px; } .pay-big b { font-size: 34px; letter-spacing: -.03em; }
.pay-inv { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 10px; background: var(--surface); } .pay-inv.late { border-color: var(--bad); }
.pay-inv-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .pay-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .pay-sum b { font-size: 18px; }
.pay-hist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); } .pay-hist div { display: flex; justify-content: space-between; }
.pay-info { white-space: pre-wrap; margin: 0 0 8px; font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }

/* главный экран студента */
:root { --deep: #0F2F2C; } @media (prefers-color-scheme: dark) { :root { --deep: #0A1F1D; } }
.sh-hello { margin-bottom: 20px; } .sh-hello h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.025em; } .sh-hello p { margin: 4px 0 0; color: var(--text-2); }
.sh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sh-a, .sh-b, .sh-c { grid-column: span 4; } .sh-bc { grid-column: span 8; } .sh-12 { grid-column: span 12; }
@media (max-width: 1250px) { .sh-a, .sh-b, .sh-c { grid-column: span 6; } .sh-bc { grid-column: span 12; } }
@media (max-width: 800px) { .sh-grid > * { grid-column: span 12 !important; } }
.sh-card { background: var(--bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: 20px 22px; min-width: 0; } .sh-card h2 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; }
.sh-stack { display: grid; gap: 16px; align-content: start; } .sh-sub { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.sh-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sh-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 980px; background: var(--primary-soft); color: var(--primary-ink); white-space: nowrap; } .sh-chip.red { background: var(--bad-soft); color: var(--bad); } .sh-chip.amber { background: var(--warn-soft); color: var(--warn); } .sh-chip.gray { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.sh-bal .l { color: var(--text-2); font-size: 14px; } .sh-bal .big { font-size: 46px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 4px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sh-bal .big small { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.sh-meter { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--s1) 14%, var(--bg)); overflow: hidden; margin: 12px 0 4px; } .sh-meter i { display: block; height: 100%; background: var(--s1); border-radius: 6px; } .sh-meter.red i { background: var(--red); }
.sh-hatch { height: 12px; border-radius: 7px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--s1) 28%, var(--bg)) 0 3px, var(--bg) 3px 7px); border: 1px solid color-mix(in srgb, var(--s1) 22%, var(--border)); overflow: hidden; margin: 14px 0 8px; } .sh-hatch i { display: block; height: 100%; background: var(--s1); }
.sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 980px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; text-align: center; } .sh-btn:hover { border-color: var(--primary); }
.sh-btn.dark { background: var(--deep); border-color: var(--deep); color: #fff; } .sh-btn.sm { padding: 7px 14px; font-size: 13px; }
.sh-wallets { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; } .sh-wallets .hd { font-size: 13px; color: var(--text-2); margin-bottom: 10px; } .sh-wallets .hd b { color: var(--text); }
.sh-wallets .wl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sh-wallets .w { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.sh-wallets .w b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-wallets .n { display: block; font-size: 17px; font-weight: 700; margin: 4px 0 2px; } .sh-wallets .st { display: block; font-size: 11px; font-weight: 600; } .sh-wallets .st.ok { color: var(--primary-ink); } .sh-wallets .st.off { color: var(--text-2); }
.sh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sh-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.sh-tile .top2 { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; } .sh-tile .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 15px; flex: none; }
.sh-tile .v { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: auto; white-space: nowrap; } .sh-tile .d { font-size: 12px; color: var(--text-2); }
.sh-tile.hi { background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 70%, white), var(--primary) 60%, var(--deep)); border-color: transparent; color: #fff; } .sh-tile.hi .top2, .sh-tile.hi .d { color: rgba(255,255,255,.85); } .sh-tile.hi .ic { background: rgba(255,255,255,.2); }
.sh-fc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sh-fc .fcard { border-radius: 18px; padding: 14px 16px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: #fff; }
.sh-fc .d1 { background: linear-gradient(150deg, #16403c, var(--deep)); } .sh-fc .d2 { background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 75%, white), var(--primary)); }
.sh-fc small { font-size: 11px; opacity: .8; display: flex; justify-content: space-between; } .sh-fc b { font-size: 20px; letter-spacing: -.01em; } .sh-fc span { font-size: 12.5px; opacity: .85; }
.sh-add { border: 1px dashed var(--border); background: var(--surface); border-radius: 980px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.sh-tbar { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .sh-search { flex: 1; min-width: 160px; max-width: 280px; border: 1px solid var(--border); border-radius: 980px; padding: 9px 14px; background: var(--bg); font: inherit; font-size: 14px; color: var(--text); }
.sh-seg { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 980px; } .sh-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 980px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; } .sh-seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(16,17,22,.14); }
.sh-tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .sh-tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 11px 12px; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .sh-tbl th:first-child { border-radius: 12px 0 0 12px; border-left: 1px solid var(--border); } .sh-tbl th:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid var(--border); }
.sh-tbl td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .sh-tbl tr:last-child td { border-bottom: 0; } .sh-tbl tr.click { cursor: pointer; } .sh-tbl tr.click:hover td { background: var(--primary-tint); } .sh-tbl .nw { white-space: nowrap; } .sh-tbl .r { text-align: right; }
.sh-who { display: flex; align-items: center; gap: 12px; } .sh-who i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--primary-soft); color: var(--primary-ink); flex: none; } .sh-who i.t2 { background: var(--warn-soft); color: var(--warn); } .sh-who i.t3 { background: color-mix(in srgb, var(--s3) 14%, var(--bg)); color: var(--s3); }
.sh-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; } .sh-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); } .sh-dot.w::before { background: #E0A21F; } .sh-dot.f::before { background: var(--text-2); }

/* Телефон: «Все слоты» студента: панель недели переносится, слоты не шире экрана. */
@media (max-width: 720px) {
  .sf { padding: 14px 12px 16px; }
  .sf .tbar { flex-wrap: wrap; } .sf .tbar b { white-space: nowrap; } .sf .tbar .grow { display: none; }
  .sf-slot { gap: 12px; padding: 12px; } .sf-time { width: 52px; }
  .sf-slot .btn { flex: none; }
}

/* Телефон: таблица занятий превращается в карточки, чтобы время, статус и кнопка не уходили за край. */
@media (max-width: 720px) {
  .sh-tbl thead { display: none; }
  .sh-tbl, .sh-tbl tbody { display: block; }
  .sh-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .sh-tbl tr:last-child { border-bottom: 0; }
  .sh-tbl td, .sh-tbl tr:last-child td { padding: 0; border: 0; }
  .sh-tbl td:nth-child(1) { grid-column: 1 / -1; }
  .sh-tbl td:nth-child(2) { grid-column: 1; font-size: 13px; color: var(--text-2); }
  .sh-tbl td:nth-child(3) { grid-column: 2; font-size: 13px; }
  .sh-tbl td:nth-child(4) { grid-column: 1; }
  .sh-tbl td:nth-child(5) { grid-column: 2; }
  .sh-tbl tr.click:hover td { background: transparent; }
}

/* ---- «Скоро»: функции изучения языка пока выключены ---- */
.soon-lock { position: relative; pointer-events: none; user-select: none; }
.soon-lock::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: grayscale(.7); }
.soon-lock::after { content: attr(data-soon); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.08); z-index: 3; padding: 3px 10px; border-radius: 980px; font: 600 11px/1.5 inherit; letter-spacing: .02em; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
button.soon-lock, a.soon-lock, .btn.soon-lock { display: inline-flex; }
button.soon-lock::after, a.soon-lock::after, .btn.soon-lock::after { top: -9px; left: auto; right: -6px; transform: none; padding: 0 7px; font-size: 10px; }
.sidebar a.soon-lock { opacity: .55; }
.sidebar a.soon-lock::before { display: none; }
.sidebar a.soon-lock::after { position: static; transform: none; box-shadow: none; margin-left: auto; padding: 0 8px; font-size: 10.5px; }
.sidebar a.soon-lock { display: flex; align-items: center; }
.tabs .soon-lock::before { display: none; }
.tabs .soon-lock { opacity: .55; }
.tabs .soon-lock::after { position: static; transform: none; box-shadow: none; margin-left: 6px; font-size: 10px; padding: 0 7px; }
.content.soon-page::before { content: '⏳ ' attr(data-soon); display: block; position: sticky; top: 8px; z-index: 5; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; font-weight: 600; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.content.soon-page > * { opacity: .42; pointer-events: none; user-select: none; filter: grayscale(.45); }

.sh-tile.hi.soon-lock::before, .soon-lock .hi::before { background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* ---- метрики студента (student-metrics.js) ---- */
.sm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .sm-row:last-child { border-bottom: 0; } .sm-row b { font-weight: 600; }
.sm-fc { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-top: 14px; font-size: 13.5px; color: var(--text-2); } .sm-fc b { color: var(--text); }
.sh-bal .sm-fc { margin-top: 12px; padding: 12px 14px; font-size: 13px; }
.sm-hm { display: grid; grid-template-columns: 54px repeat(7, 1fr); gap: 6px; margin-top: 14px; font-size: 11.5px; color: var(--text-2); align-items: center; } .sm-hm .dow { text-align: center; }
.sm-hm i, .sm-lg i { display: block; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--s1) 8%, var(--bg)); border: 1px solid var(--border); }
.sm-hm i.l1, .sm-lg i.l1 { background: color-mix(in srgb, var(--s1) 32%, var(--bg)); border-color: transparent; } .sm-hm i.l2, .sm-lg i.l2 { background: color-mix(in srgb, var(--s1) 62%, var(--bg)); border-color: transparent; } .sm-hm i.l3, .sm-lg i.l3 { background: var(--s1); border-color: transparent; }

/* ---- главная и «Прогресс» студента: спокойная раскладка ---- */
.sh-grid { align-items: stretch; }
.sh-5 { grid-column: span 5; } .sh-7 { grid-column: span 7; }
@media (max-width: 1250px) { .sh-5, .sh-7 { grid-column: span 12; } }
.soon-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 14px 18px; border: 1px dashed var(--border-hover); border-radius: 18px; color: var(--text-2); font-size: 13.5px; }
.soon-strip b { color: var(--primary-ink); } .soon-chip { padding: 3px 11px; border-radius: 980px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; }
.sh-stack { align-content: stretch; grid-auto-rows: auto; } .sh-stack > .sh-card:last-child { align-self: stretch; }
.sh-card h2 + .notif { margin-top: 14px; } .sh-card .notif + .notif { margin-top: 8px; border-radius: 12px; } .sh-card .notif { padding: 12px 14px; border-radius: 12px; }
.sh-card .notif.unread { background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); } .sh-card .notif:not(.unread) { border: 1px solid var(--border); }

/* ---- расписание студента: «Моё» / «Все слоты» ---- */
.sc-tabs { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 980px; margin-bottom: 14px; }
.sc-tabs button { border: 0; background: transparent; padding: 7px 16px; border-radius: 980px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.sc-tabs button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(16,17,22,.12); }
.sc-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); font-size: 13.5px; color: var(--text-2); }
.sf { background: var(--bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: 16px 20px 20px; }
.sf .tbar { margin-bottom: 12px; }
.sf-filters { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; } .sf-filters .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-day { margin-top: 18px; } .sf-day h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.sf-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sf-slot { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer; }
.sf-slot:hover { border-color: var(--border-hover); background: var(--bg); }
.sf-time { width: 64px; flex: none; font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .sf-time small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.sf-info { flex: 1; min-width: 0; } .sf-info b { display: block; } .sf-info span { font-size: 13px; color: var(--text-2); }
.ba-opts { display: grid; gap: 10px; } .ba-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer; }
.ba-opt.on { border-color: var(--primary); background: var(--primary-tint); } .ba-opt input { margin-top: 4px; accent-color: var(--primary); }
.ba-opt b { display: block; } .ba-opt small { display: block; margin-top: 2px; color: var(--text-2); font-size: 13px; line-height: 1.4; }

/* ---- команда: права администраторов ---- */
.tm-note { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--text-2); font-size: 13.5px; max-width: 920px; }
.tm-list { display: grid; gap: 16px; max-width: 920px; }
.tm-card { background: var(--bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: 20px 22px; } .tm-card.off { opacity: .65; }
.tm-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .tm-head .grow { flex: 1; min-width: 160px; }
.tm-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 800px) { .tm-presets { grid-template-columns: 1fr 1fr; } }
.tm-preset { text-align: left; font: inherit; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); }
.tm-preset b { display: block; font-size: 14px; } .tm-preset small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12px; line-height: 1.35; }
.tm-preset:hover { border-color: var(--border-hover); } .tm-preset.on { border-color: var(--primary); background: var(--primary-tint); } .tm-preset.custom { cursor: default; opacity: .7; } .tm-preset.custom.on { opacity: 1; }
.tm-perms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .tm-perms { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .tm-perms { grid-template-columns: 1fr; } }
.tm-perm { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; } .tm-perm.on { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: var(--primary-tint); }
.tm-perm input { margin-top: 3px; accent-color: var(--primary); } .tm-perm b { display: block; font-size: 13.5px; } .tm-perm small { display: block; color: var(--text-2); font-size: 12px; line-height: 1.35; }
.tm-empty { max-width: 560px; padding: 24px; border: 1px dashed var(--border-hover); border-radius: 20px; }

/* ---- заявки (leads.js) ---- */
.ld-kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } @media (max-width: 900px) { .ld-kp { grid-template-columns: 1fr 1fr; } }
.ld-k { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; } .ld-k small { color: var(--text-2); font-size: 12.5px; } .ld-k b { display: block; font-size: 26px; letter-spacing: -.03em; margin: 2px 0; } .ld-k span { font-size: 12px; color: var(--text-2); }
.ld-k.warn { background: var(--warn-soft); border-color: transparent; } .ld-k.warn b { color: var(--warn); }
.ld-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .ld-search { flex: 1; min-width: 200px; max-width: 320px; border-radius: 980px; } .ld-src { width: auto; border-radius: 980px; }
.ld-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.ld-col { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); border: 1px solid var(--border); border-radius: 20px; padding: 12px; min-height: 280px; transition: background .12s, border-color .12s; }
.ld-col.won { background: var(--primary-soft); } .ld-col.over { border-color: var(--primary); background: var(--primary-tint); }
.ld-col h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .ld-col h3 em { font-style: normal; background: var(--bg); border: 1px solid var(--border); border-radius: 980px; font-size: 11.5px; padding: 1px 9px; color: var(--text-2); }
.ld-none { margin: 18px 0; text-align: center; color: var(--text-3); font-size: 13px; }
.ld-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 12px 13px; margin-bottom: 9px; box-shadow: 0 1px 3px rgba(16,17,22,.05); cursor: pointer; user-select: none; }
.ld-card:hover { border-color: var(--border-hover); } .ld-card.sel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .ld-card.drag { opacity: .45; }
.ld-card .nm { font-weight: 700; font-size: 14px; } .ld-card .ph { font-size: 12.5px; color: var(--text-2); margin-top: 1px; } .ld-card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ld-tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 980px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); } .ld-tag.src { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.ld-card .foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); }
.due { font-weight: 600; } .due.late { color: var(--red); } .due.today { color: var(--warn); }
.av2 { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.ld-shade { position: fixed; inset: 0; z-index: 60; background: rgba(16,17,22,.28); }
.ld-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 100vw); background: var(--bg); border-left: 1px solid var(--border); box-shadow: -16px 0 40px rgba(16,17,22,.14); padding: 20px 22px 28px; overflow-y: auto; }
.ld-drawer .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .ld-drawer h2 { margin: 0 0 2px; font-size: 20px; } .ld-drawer .ph { font-size: 14px; color: var(--primary-ink); font-weight: 600; }
.ld-drawer .steps { display: flex; gap: 4px; margin: 14px 0; } .ld-drawer .steps i { flex: 1; height: 6px; border-radius: 4px; background: var(--border); } .ld-drawer .steps i.d { background: var(--s1); }
.ld-drawer .row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .ld-drawer .row2 > span { color: var(--text-2); }
.ld-drawer .inp.sm { padding: 6px 10px; font-size: 13px; width: auto; max-width: 210px; }
.ld-drawer .acts { display: grid; gap: 8px; margin: 14px 0; } .ld-drawer textarea { margin-top: 4px; }
.ld-drawer .tl { margin-top: 16px; border-left: 2px solid var(--border); padding-left: 14px; display: grid; gap: 12px; font-size: 13px; } .ld-drawer .tl small { display: block; color: var(--text-2); }
.ld-slots { display: grid; gap: 8px; } .ld-slot { text-align: left; font: inherit; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; color: var(--text); } .ld-slot:hover { border-color: var(--primary); background: var(--primary-tint); } .ld-slot b, .ld-slot span { display: block; } .ld-slot span { font-size: 12.5px; color: var(--text-2); }

/* ---- «Прогресс» студента: сетка карточек (student-metrics.js progressGrid) ---- */
.pc-page { max-width: 1280px; }
.pc-who { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.pc-who .ava { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 60%, white), var(--primary)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
.pc-who h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pc-who p { margin: 2px 0 0; color: var(--text-2); font-size: 14px; } .pc-who .grow { flex: 1; }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .pc-grid { grid-template-columns: 1fr; } }
.pc { background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 16px 18px 18px; min-width: 0; box-shadow: var(--shadow); }
.pc.span3 { grid-column: span 3; } @media (max-width: 1100px) { .pc.span3 { grid-column: span 2; } } @media (max-width: 700px) { .pc.span3 { grid-column: span 1; } }
.pc-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .pc-hd .nav-ico { color: var(--text-2); } .pc-hd .nav-ico svg { width: 20px; height: 20px; } .pc-hd b { flex: 1; font-size: 15px; font-weight: 700; }
.pc-big { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .pc-sub { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.pc-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin: 10px 0 4px; } .pc-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--s1) 30%, var(--bg)); } .pc-bars i.hi { background: var(--s1); }
.pc-flex { display: flex; gap: 16px; align-items: center; }
.pc-ring { --p: 0; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--s1) calc(var(--p) * 1%), color-mix(in srgb, var(--s1) 14%, var(--bg)) 0); display: grid; place-items: center; flex: none; } .pc-ring span { width: 78px; height: 78px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 18px; letter-spacing: -.02em; text-align: center; }
.pc-link { display: inline-block; margin-top: 6px; color: var(--primary-ink); font-weight: 600; font-size: 13px; text-decoration: underline; }
.pc-kv { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .pc-kv span { color: var(--text-2); }
.pc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pc-two > div { border-radius: 14px; padding: 11px 13px; } .pc-two b { display: block; font-size: 20px; letter-spacing: -.02em; } .pc-two span { font-size: 12px; color: var(--text-2); } .pc-two .bad { background: var(--bad-soft); } .pc-two .good { background: var(--primary-soft); }
.pc-li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .pc-li:first-child { border-top: 0; } .pc-li .t { flex: 1; min-width: 0; } .pc-li small { display: block; color: var(--text-2); font-size: 12px; }
.dotc { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-hover); flex: none; display: grid; place-items: center; font-size: 11px; color: #fff; } .dotc.ok { background: var(--s1); border-color: var(--s1); } .dotc.bad { background: var(--red); border-color: var(--red); } .dotc.wait { border: 1.5px dashed var(--text-3); } .dotc.off { background: var(--surface); color: var(--text-3); }
.pc-hm.sm-hm { grid-template-columns: 44px repeat(7, 1fr); gap: 5px; margin-top: 0; font-size: 11px; } .pc-hm.sm-hm i { height: 26px; border-radius: 7px; } .pc-hm .d { text-align: center; }
.pc-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 980px; margin-bottom: 10px; } .pc-tabs::-webkit-scrollbar { display: none; } .pc-tabs button { flex: none; white-space: nowrap; border: 0; background: transparent; padding: 5px 14px; border-radius: 980px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; } .pc-tabs button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(16,17,22,.12); }
.pc .btn.sm { padding: 5px 12px; font-size: 12.5px; border-radius: 980px; }
.sh-btn.sm { padding: 7px 14px; font-size: 13px; }

/* ---- штатные преподаватели: график, согласование, часы (staff-schedule.js) ---- */
.ss-note { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--text-2); font-size: 13.5px; max-width: 920px; }
.ss-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ss-cols.wide { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } @media (max-width: 1100px) { .ss-cols, .ss-cols.wide { grid-template-columns: 1fr; } }
.ss-avail { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 4px; font-size: 11px; color: var(--text-2); align-items: center; user-select: none; } .ss-avail .d { text-align: center; font-weight: 600; }
.ss-cell { display: block; height: 22px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; } .ss-cell.on { background: color-mix(in srgb, var(--s1) 55%, var(--bg)); border-color: transparent; } .ss-cell.les { background: var(--s1); border-color: transparent; } .ss-cell.bad { background: var(--red); border-color: transparent; }
.ss-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 10px; } .ss-lg span { display: inline-flex; align-items: center; gap: 6px; } .ss-lg .ss-cell { width: 14px; height: 14px; border-radius: 4px; cursor: default; } .ss-sw { width: 12px; height: 12px; border-radius: 4px; background: var(--s1); display: inline-block; } .ss-sw.o { background: var(--warn); } .ss-sw.x { background: var(--red); }
.ss-wknav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .ss-wknav b { flex: 1; text-align: center; }
.ss-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .ss-kpi.big { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .ss-kpi.big { grid-template-columns: 1fr 1fr; } }
.ss-kpi > div { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; } .ss-kpi b { display: block; font-size: 20px; letter-spacing: -.02em; } .ss-kpi span { font-size: 12px; color: var(--text-2); }
.ss-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13px; margin-top: 8px; } .ss-warn i { font-style: normal; font-weight: 800; flex: none; }
.ss-warn.red { background: var(--bad-soft); color: var(--bad); } .ss-warn.amber { background: var(--warn-soft); color: var(--warn); } .ss-warn.ok { background: var(--primary-soft); color: var(--primary-ink); }
.ss-act { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .ss-act .btn { flex: 1; justify-content: center; }
.ss-q { border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; background: var(--bg); cursor: pointer; } .ss-q:hover { border-color: var(--border-hover); } .ss-q.sel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ss-q .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ss-q small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.ss-week { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; font-size: 11px; }
.ss-dh { background: var(--surface); text-align: center; font-weight: 600; padding: 6px 0; color: var(--text-2); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); height: 29px; box-sizing: border-box; }
.ss-gut .ss-dh { border-left: 0; } .ss-gut span { position: absolute; right: 5px; transform: translateY(-50%); color: var(--text-3); margin-top: 0; } .ss-gut > div + div { margin-top: 0; }
.ss-dc { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--border) 33px 34px); }
.ss-ev { position: absolute; left: 3px; right: 3px; border-radius: 7px; background: var(--s1); color: #fff; font-size: 10.5px; font-weight: 600; padding: 3px 5px; overflow: hidden; line-height: 1.25; } .ss-ev.o { background: var(--warn); } .ss-ev.x { background: var(--red); }
.ss-hours td:not(:first-child), .ss-hours th:not(:first-child) { text-align: right; white-space: nowrap; } tr.ss-tot td { font-weight: 700; background: var(--surface); }
.ev.draft { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--bg)) 0 6px, var(--bg) 6px 12px) !important; border: 1.5px dashed var(--primary) !important; color: var(--text) !important; }
.ss-stack { display: grid; gap: 16px; }
.pc-hd { flex-wrap: wrap; row-gap: 8px; }
.ss-neg { color: var(--bad); } .ss-total { font-size: 18px; } .ss-warnchip { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 980px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.ss-rowbtn { display: inline-flex; gap: 6px; } .ss-hours td:last-child { text-align: right; }
.ss-adjform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; } .ss-adjform .inp { width: 100%; } .ss-adjform .btn { grid-column: span 2; justify-content: center; }
.ss-hours th, .ss-hours td { padding-left: 8px; padding-right: 8px; } .ss-hours td:first-child { white-space: nowrap; }
.modal .tbl td:not(:first-child) { white-space: nowrap; }

/* ---- замены (substitutions.js) ---- */
.ss-subrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .ss-subrow:first-child { border-top: 0; }
.ss-subrow .main { flex: 1; min-width: 260px; } .ss-subrow .main small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.ss-subrow .side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ss-subrow .inp.sm { padding: 6px 10px; font-size: 13px; width: auto; }

/* ---- язык кабинета ---- */
.lang-sw { margin-right: 8px; min-width: 44px; justify-content: center; font-weight: 700; }
.auth-lang { position: absolute; top: 16px; right: 16px; } .auth { position: relative; }
html[lang="kk"] .pc-hm.sm-hm { grid-template-columns: 64px repeat(7, 1fr); }
.pc .sh-chip { white-space: normal; }

/* ---- инструкция и экскурсия (help.js) ---- */
.help-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; margin-right: 8px; font-weight: 800; justify-content: center; }
.hp-over { position: fixed; inset: 0; z-index: 80; background: rgba(16,17,22,.4); display: grid; place-items: center; padding: 16px; }
.hp { background: var(--bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 24px 64px rgba(16,17,22,.28); width: min(980px, 100%); height: min(700px, 90vh); display: flex; flex-direction: column; overflow: hidden; }
.hp-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .hp-head h3 { margin: 0; font-size: 18px; } .hp-head .grow { flex: 1; }
.hp-main { display: grid; grid-template-columns: 230px minmax(0, 1fr); flex: 1; min-height: 0; } @media (max-width: 720px) { .hp-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .hp-list { display: flex; overflow-x: auto; border-right: 0 !important; border-bottom: 1px solid var(--border); padding: 8px !important; } .hp-item { white-space: nowrap; } }
.hp-list { border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.hp-item { text-align: left; font: inherit; font-size: 14px; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); cursor: pointer; font-weight: 500; } .hp-item:hover { background: var(--bg); } .hp-item.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.hp-body { padding: 22px 26px 26px; overflow-y: auto; } .hp-body h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; } .hp-sum { margin: 0 0 14px; color: var(--text-2); font-size: 15px; }
.hp-body h4 { margin: 18px 0 8px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .hp-body ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; } .hp-tips li { color: var(--primary-ink); }
.hp-act { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.tour-block { position: fixed; inset: 0; z-index: 90; }
.tour-spot { position: fixed; z-index: 91; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(16,17,22,.55), 0 0 0 3px var(--primary); transition: all .22s ease; display: none; }
.tour-pop { position: fixed; z-index: 92; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 48px rgba(16,17,22,.3); padding: 16px 18px 14px; }
.tour-step { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-ink); } .tour-pop h4 { margin: 4px 0 6px; font-size: 16px; } .tour-pop p { margin: 0 0 14px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.tour-act { display: flex; gap: 8px; align-items: center; } .tour-act .grow { flex: 1; }

/* Инструкция: пошаговые рецепты, словарик, «если не получается», кнопка внутри раздела */
.hp-how { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 8px; } .hp-how[open] { border-color: var(--primary); background: #fff; }
.hp-how summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; gap: 8px; align-items: center; } .hp-how summary::-webkit-details-marker { display: none; }
.hp-how summary::before { content: '＋'; color: var(--primary); font-weight: 700; } .hp-how[open] summary::before { content: '－'; }
.hp-body .hp-how ol { margin: 0; padding: 0 16px 14px 40px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; } .hp-how li::marker { color: var(--primary); font-weight: 700; }
.hp-terms { margin: 0; display: grid; grid-template-columns: minmax(110px, 190px) 1fr; gap: 6px 14px; font-size: 14.5px; line-height: 1.45; } .hp-terms dt { font-weight: 700; color: var(--primary-ink); } .hp-terms dd { margin: 0; color: var(--text-2); }
.hp-trouble { background: #fff8e6; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; font-size: 14.5px; } .hp-trouble p { margin: 4px 0 0; color: var(--text-2); line-height: 1.5; }
.page-help { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: #fff; color: var(--primary-ink); font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px 8px 8px; border-radius: 999px; box-shadow: 0 6px 18px rgba(16,17,22,.12); cursor: pointer; }
.page-help span { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 14px; } .page-help:hover { border-color: var(--primary); }
@media (max-width: 720px) { .hp-terms { grid-template-columns: 1fr; gap: 0; } .hp-terms dd { margin-bottom: 8px; } .page-help { padding: 8px; font-size: 0; gap: 0; } .page-help span { font-size: 15px; } }

/* Инструкция сбоку: страница под ней видна и переключается вместе с разделом */
@media (min-width: 900px) {
  .hp-over { background: rgba(16,17,22,.06); place-items: stretch end; padding: 12px; pointer-events: none; }
  .hp { pointer-events: auto; width: min(620px, 62vw); height: 100%; }
  .hp-main { grid-template-columns: 170px minmax(0, 1fr); }
  .hp-item { font-size: 13.5px; padding: 8px 10px; }
  .hp-body { padding: 18px 20px 22px; }
}

/* Обзор: задачи на сегодня из живых данных */
.ov .todo .todo-row { display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;font-size:13.5px;font-weight:600 }
.ov .todo .todo-row:last-child { border:0 } .ov .todo .todo-row span { flex:1 } .ov .todo .todo-row small { display:block;color:var(--text-2);font-size:12px;font-weight:400 } .ov .todo .todo-row i { font-style:normal;color:var(--text-2);font-size:18px } .ov .todo .todo-row:hover i { color:var(--primary) }

/* Подпись часового пояса под заголовком расписания */
.tz-note { margin: 4px 0 12px; font-size: 12.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 2px 10px; } .page-head + .tz-note { margin-top: -4px; }

/* Остаток переносов в окне запроса */
.rs-quota { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 600 } .rs-quota.out { background: var(--bad-soft); color: var(--bad) }

/* Сетки штатного режима на узком экране: листаются вбок, а не сжимаются до нечитаемых колонок */
.ss-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ss-scroll .ss-week { min-width: 560px; } .ss-scroll .ss-avail { touch-action: none; }
@media (max-width: 700px) { .ss-cell { height: 28px; } .ss-q { padding: 14px; } }

/* Инструкция на телефоне: разделы одной строкой сверху, текст занимает остальное место */
@media (max-width: 720px) {
  .hp-over { padding: 8px; align-items: stretch; } .hp { height: 100%; border-radius: 18px; }
  .hp-main { grid-template-rows: auto minmax(0, 1fr); }
  .hp-list { flex-direction: row; flex: none; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 6px; scrollbar-width: thin; }
  .hp-item { flex: none; padding: 8px 14px; border: 1px solid var(--border); background: var(--bg); } .hp-item.on { border-color: var(--primary); }
  .hp-body { padding: 16px 16px 20px; } .hp-head { padding: 12px 14px; gap: 8px; }
}

/* Обзор: двухколоночные ряды на телефоне складываются в одну колонку */
@media (max-width: 700px) { .ov .ovrow.o2 { grid-template-columns: minmax(0, 1fr); } .ov .ovrow > * { min-width: 0; } }

/* Нажимаемость на телефоне: кнопки, вкладки и маленькие значки не меньше ~40 px */
@media (max-width: 700px) {
  .btn, .btn.sm { min-height: 40px; }
  .pc-tabs button, .sc-tabs button, .tabs button, .pill-tabs button { min-height: 38px; }
  .swatch { width: 38px; height: 38px; } .swatches { gap: 8px; flex-wrap: wrap; }
  .tm-ib, .icon-btn { min-width: 40px; min-height: 40px; }
  .stp-btn { min-width: 40px; min-height: 40px; }
  .seg2 button, .ptabs button { min-height: 38px; } select.inp { min-height: 40px; }
}

/* Календарь расписания: недоступность учителя и отсутствия */
.dcol .na { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--text) 7%, transparent); pointer-events: none; z-index: 0; }
.dcol .abs-day { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 14%, transparent) 0 7px, transparent 7px 14px); border-left: 3px solid var(--warn); }
.dcol .abs-day.pend { border-left-style: dashed; opacity: .75; } .dcol .abs-day span { position: sticky; top: 6px; display: inline-block; margin: 6px 0 0 6px; padding: 2px 8px; border-radius: 980px; background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 700; }
.dcol .ev { z-index: 1; }
.legend i.na-lg { background: color-mix(in srgb, var(--text) 14%, var(--bg)); } .legend i.abs-lg { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, var(--warn-soft) 3px 6px); }
.dh .dh-abs { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--warn); }
.cal-abs { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--warn-soft); color: var(--warn); font-size: 12.5px; } .cal-abs b { font-weight: 700; }
.cal-teachers { padding: 10px 16px 0; }

/* Календарь отсутствий школы */
.ac-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; } .ac-nav b { min-width: 130px; text-align: center; text-transform: capitalize; }
.ac-lg { border: 0; padding: 0 0 10px; } .ac-lg i.vacation { background: var(--primary); } .ac-lg i.sick { background: #E0A21F; } .ac-lg i.other { background: color-mix(in srgb, var(--text) 35%, var(--bg)); } .ac-lg i.pend { background: repeating-linear-gradient(135deg, var(--text-3) 0 3px, var(--bg) 3px 6px); }
.ac-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 14px; }
.ac-grid { min-width: calc(130px + var(--n) * 26px); font-size: 11px; }
.ac-row { display: grid; grid-template-columns: 130px repeat(var(--n), minmax(24px, 1fr)); border-bottom: 1px solid var(--border); align-items: stretch; } .ac-row:last-child { border-bottom: 0; }
.ac-name { position: sticky; left: 0; z-index: 1; background: var(--bg); padding: 8px 10px; font-weight: 600; font-size: 12.5px; border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-head .ac-name { background: var(--surface); } .ac-d { text-align: center; padding: 6px 0; color: var(--text-2); background: var(--surface); font-weight: 600; } .ac-d.today { color: var(--primary-ink); background: var(--primary-soft); }
.ac-c { border-left: 1px solid var(--border); min-height: 32px; } .ac-c.today { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ac-c.vacation { background: var(--primary); } .ac-c.sick { background: #E0A21F; } .ac-c.other { background: color-mix(in srgb, var(--text) 35%, var(--bg)); }
.ac-c.pend { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }

/* Ответ клиенту из карточки заявки */
.ld-reply { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); } .ld-reply h4 { margin: 0 0 8px; font-size: 13px; } .ld-reply .inp { width: 100%; margin-bottom: 8px; } .ld-reply p { margin: 0 0 8px; }

/* Опрос NPS у студента и карточка на главной */
.sh-nps { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; background: var(--primary-soft); border-color: transparent; }
.nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; } .nps-n { border: 1px solid var(--border); background: var(--bg); border-radius: 10px; padding: 10px 0; font: inherit; font-weight: 600; cursor: pointer; } .nps-n.on { background: var(--primary); color: var(--on-primary, #fff); border-color: var(--primary); }
.nps-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin: 4px 0 10px; }
@media (max-width: 420px) { .nps-scale { grid-template-columns: repeat(6, 1fr); } .nps-n { padding: 12px 0; } }