:root {
  --yellow:#FFD400; --graphite:#3E535D; --ink:#171717; --orange:#FF9900;
  --bg:#FAFAFA; --g1:#696969; --g2:#D9D9D9; --g3:#EDEDED; --line:#E4E4E4; --white:#fff;
  --fut:#9DB0BA; --ns:#C0582B; --ok:#2E7D5B;
  --tektur:"Tektur","Bahnschrift","Segoe UI",Arial,sans-serif;
  --inter:"Inter","Segoe UI",Roboto,Arial,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { background:var(--bg); color:var(--ink); font-family:var(--inter); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; border:0; cursor:pointer; background:none; color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
b { font-weight:600; }
small { font-size:12px; }
.muted { color:var(--g1); font-weight:400; }
.warn { color:var(--ns); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

.app { display:grid; grid-template-columns:216px minmax(0,1fr); min-height:100vh; }
.side { background:var(--graphite); color:#fff; padding:24px 14px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.logo { display:block; font-family:var(--tektur); font-weight:700; font-size:19px; letter-spacing:.04em; color:var(--yellow); padding:0 10px; line-height:1; white-space:nowrap; }
.logo small { display:block; font-family:var(--inter); font-weight:500; font-size:11px; letter-spacing:.02em; color:rgba(255,255,255,.62); margin-top:8px; }
.nav { margin-top:30px; display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500; color:rgba(255,255,255,.82); }
.nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav a.active { background:var(--yellow); color:var(--ink); font-weight:600; }
.ico { width:18px; height:18px; border-radius:5px; background:currentColor; opacity:.55; mask-size:contain; -webkit-mask-size:contain; }
.nav a.active .ico { opacity:.9; }
.ico-home { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.ico-branches { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V7l9-4 9 4v14h-6v-6H9v6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V7l9-4 9 4v14h-6v-6H9v6z'/%3E%3C/svg%3E"); }
.ico-instructors { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E"); }
.ico-students { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3Ccircle cx='16' cy='9' r='3'/%3E%3Cpath d='M2 20c0-4 3-6 6-6s6 2 6 6zM13 20c0-3 2-5 5-5s5 2 5 5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3Ccircle cx='16' cy='9' r='3'/%3E%3Cpath d='M2 20c0-4 3-6 6-6s6 2 6 6zM13 20c0-3 2-5 5-5s5 2 5 5z'/%3E%3C/svg%3E"); }
.ico-payments { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Crect x='2' y='9' width='20' height='3' fill='%23000'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Crect x='2' y='9' width='20' height='3' fill='%23000'/%3E%3C/svg%3E"); }
.ico-actions { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-13h-8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-13h-8z'/%3E%3C/svg%3E"); }
.who { margin-top:auto; padding:12px 10px 0; border-top:1px solid rgba(255,255,255,.12); font-size:13px; }
.who-name { font-weight:600; }
.who-role { color:rgba(255,255,255,.6); font-size:12px; }
.link { color:rgba(255,255,255,.6); font-size:12px; padding:6px 0 0; }
.link:hover { color:#fff; }

.main { padding:26px 32px 40px; max-width:1360px; width:100%; }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
h1 { font-family:var(--tektur); font-size:26px; font-weight:700; letter-spacing:.01em; line-height:1.1; }
.sub { color:var(--g1); margin-top:6px; }
h2 { font-size:18px; font-weight:600; line-height:1.3; }
h3 { font-size:15px; font-weight:600; margin-bottom:12px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
h3 .muted { font-size:12px; }

.periods { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.chip { padding:7px 12px; border-radius:20px; background:var(--white); border:1px solid var(--line); font-weight:500; font-size:13px; }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.custom { display:inline-flex; gap:4px; align-items:center; margin-left:6px; }
.custom input[type=date] { font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); }
.btn { display:inline-block; background:var(--ink); color:#fff; padding:10px 16px; border-radius:9px; font-weight:600; font-size:14px; }
.btn:hover { background:#000; }
.btn-quiet { display:inline-block; background:var(--white); border:1px solid var(--line); padding:7px 12px; border-radius:8px; font-weight:500; font-size:13px; }
.btn-small { display:inline-block; background:var(--ink); color:#fff; padding:7px 12px; border-radius:8px; font-weight:600; font-size:13px; white-space:nowrap; }

.card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.card.dark { background:var(--graphite); color:#fff; border-color:var(--graphite); }
.card.dark .muted { color:rgba(255,255,255,.6); }
.grid2 { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; }
.grid2 > .card { margin-bottom:16px; }

.hero { background:var(--yellow); border-radius:16px; padding:22px 26px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 28px; margin-bottom:16px; }
.hero-num { font-family:var(--tektur); font-size:112px; font-weight:700; line-height:.9; letter-spacing:-.02em; }
.hero-body p { margin:6px 0 12px; max-width:640px; }
.hero-actions { margin-bottom:12px; }
.mini { border-collapse:collapse; width:100%; max-width:680px; background:rgba(255,255,255,.45); border-radius:10px; overflow:hidden; }
.mini td { padding:7px 10px; border-bottom:1px solid rgba(0,0,0,.08); font-size:13px; }
.mini tr:last-child td { border-bottom:0; }
.hero-foot { margin-top:10px; font-size:12px; color:rgba(0,0,0,.65); }
.hero-nib { margin-top:12px; padding:10px 12px; background:rgba(0,0,0,.08); border-radius:10px; font-size:13px; }
.hero-nib a { text-decoration:underline; font-weight:600; margin-left:6px; }
.sig-nib { border-left-color:var(--graphite); }

.kpi { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.kpi div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--g3); }
.kpi dt { font-weight:500; }
.kpi dt .muted { display:block; font-size:11px; }
.kpi dd { font-family:var(--tektur); font-size:22px; font-weight:700; white-space:nowrap; }
.kpi dd small { display:block; font-family:var(--inter); font-size:11px; color:var(--g1); font-weight:500; text-align:right; }
.note { margin-top:10px; font-size:12px; color:var(--g1); }
.note.light { color:rgba(255,255,255,.65); }
.big { font-family:var(--tektur); font-size:40px; font-weight:700; line-height:1; margin:4px 0 12px; }
.big small { font-family:var(--inter); font-size:14px; font-weight:500; color:rgba(255,255,255,.7); }
.bar { height:8px; background:rgba(255,255,255,.18); border-radius:4px; overflow:hidden; margin-bottom:12px; }
.bar span { display:block; height:100%; background:var(--yellow); }
.rows div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.rows dd { font-family:var(--tektur); font-weight:700; font-size:16px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:8px; vertical-align:-1px; }
.dot.y { background:var(--yellow); } .dot.g { background:rgba(255,255,255,.35); }

.signals { list-style:none; display:flex; flex-direction:column; gap:8px; }
.sig { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:10px 12px; border-radius:10px; background:var(--bg); border-left:4px solid var(--g2); }
.sig-idle { border-left-color:var(--yellow); }
.sig-ahead { border-left-color:var(--ns); }
.sig-full { border-left-color:var(--ok); }
.sig-empty { border-left-color:var(--orange); }

.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-weight:600; color:var(--g1); font-size:12px; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:8px 8px; border-bottom:1px solid var(--g3); vertical-align:middle; }
.tbl tbody tr:hover { background:var(--bg); }
.tbl tfoot td { font-weight:600; border-top:2px solid var(--line); border-bottom:0; }
.tbl td a { font-weight:500; }
.fill { display:inline-block; width:54px; height:6px; background:var(--g3); border-radius:3px; margin-right:8px; vertical-align:middle; overflow:hidden; }
.fill i { display:block; height:100%; background:var(--graphite); }

.days { display:flex; gap:6px; align-items:flex-end; height:200px; padding-top:18px; }
.day { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.col { flex:1; width:100%; max-width:46px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--g3); border-radius:6px 6px 2px 2px; overflow:hidden; }
.seg { display:block; width:100%; }
.seg.done { background:var(--graphite); } .seg.ns { background:var(--ns); } .seg.booked { background:var(--fut); } .seg.free { background:var(--g2); }
.day.today .col { outline:2px solid var(--yellow); }
.day-n { font-family:var(--tektur); font-weight:700; font-size:13px; margin-top:4px; }
.day-l { font-size:11px; color:var(--g1); white-space:nowrap; }
.legend { margin-top:10px; font-size:12px; color:var(--g1); display:flex; gap:12px; flex-wrap:wrap; }
.sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.sw.done { background:var(--graphite); } .sw.ns { background:var(--ns); } .sw.booked { background:var(--fut); } .sw.free { background:var(--g2); }

.bars { list-style:none; display:flex; flex-direction:column; gap:8px; }
.bars li { display:grid; grid-template-columns:150px minmax(0,1fr) 80px; gap:10px; align-items:center; font-size:13px; }
.bar-l b, .bar-l span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-l span { font-size:11px; }
.bar-t { height:10px; background:var(--g3); border-radius:5px; overflow:hidden; display:flex; }
.bar-t i { display:block; height:100%; }
.bar-t .done { background:var(--graphite); } .bar-t .ns { background:var(--ns); } .bar-t .booked { background:var(--fut); }
.bar-r { text-align:right; } .bar-r b, .bar-r span { display:block; } .bar-r span { font-size:11px; }

.foot { margin-top:28px; font-size:12px; color:var(--g1); }

.login-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:440px; width:100%; }
.login .logo { color:var(--ink); padding:0; margin-bottom:20px; }
.login .logo small { color:var(--g1); }
.login h1 { margin-bottom:10px; }
.login p { margin-bottom:14px; }
.login .btn { width:100%; text-align:center; margin-bottom:14px; }
.login code { font-size:12px; }
.small { font-size:12px; }

@media (max-width: 1100px) {
  .grid2 { grid-template-columns:1fr; }
  .hero-num { font-size:84px; }
}
@media (max-width: 760px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; top:auto; bottom:0; left:0; right:0; height:auto; padding:6px 6px; flex-direction:row; align-items:center; z-index:10; }
  .logo, .who { display:none; }
  .nav { margin:0; flex-direction:row; width:100%; justify-content:space-around; }
  .nav a { flex-direction:column; gap:3px; padding:6px 4px; font-size:10px; border-radius:8px; }
  .main { padding:16px 16px 90px; }
  .hero { grid-template-columns:1fr; padding:18px; }
  .hero-num { font-size:72px; }
  .kpi { grid-template-columns:1fr; }
  .bars li { grid-template-columns:110px minmax(0,1fr) 64px; }
  h1 { font-size:22px; }
  .custom { margin-left:0; }
}

/* форми, вкладки, допоміжне (екрани 2-6) */
.inp { font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); min-width:0; }
.inp.wide { width:100%; }
textarea.inp { resize:vertical; }
select.inp { max-width:260px; }
.tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.grid3 > .card { margin-bottom:16px; }
.big.ink { color:var(--ink); }
.big.ink small { color:var(--g1); }
.kpi.one { grid-template-columns:1fr; }
.frm { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin:8px 0 4px; }
.frm.frm-col { flex-direction:column; align-items:stretch; }
.frm label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--g1); }
.frm .row { display:flex; gap:10px; flex-wrap:wrap; }
.frm .row label { flex:1; min-width:140px; }
.frm .btn { align-self:flex-start; }
details { margin-bottom:8px; }
summary { cursor:pointer; font-weight:500; padding:6px 0; }
.checks { display:flex; flex-direction:column; gap:4px; max-height:260px; overflow:auto; padding:6px; border:1px solid var(--g3); border-radius:8px; }
.chk { display:flex; gap:8px; align-items:baseline; font-size:13px; color:var(--ink); flex-direction:row; }
.chk .muted { font-size:11px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.bcard { display:block; margin:0; }
.bcard:hover { border-color:var(--graphite); }
.bnum { font-size:15px; margin-bottom:8px; }
.brow { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--g1); padding:4px 0; border-top:1px solid var(--g3); }
.log { list-style:none; font-size:13px; display:flex; flex-direction:column; gap:5px; }
.card.ok { background:#EAF6EF; border-color:#CDE9D8; }
.ok-t { color:var(--ok); }
.mt { margin-top:18px; }
tr.off td { color:var(--g1); }
tr.daysum td { background:var(--bg); }
.msg { display:flex; flex-direction:column; gap:8px; }
.msg label { font-size:14px; }
code { font-family:Consolas, "Courier New", monospace; font-size:12px; background:var(--g3); padding:2px 6px; border-radius:4px; }
@media (max-width: 1100px) { .grid3 { grid-template-columns:1fr; } }

/* телефон: таблиця героя не розтягує сторінку */
.main { min-width:0; }
.hero, .hero-body { min-width:0; }
.mini { table-layout:fixed; }
.mini td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini td:first-child { width:40%; }
@media (max-width: 760px) {
  .mini td:nth-child(2), .mini td:nth-child(3) { display:none; }
  .mini td:first-child { width:auto; }
  .periods { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .head { align-items:flex-start; }
  .sub { font-size:12px; }
}
@media (max-width: 760px) { html, body { overflow-x:hidden; } .checks { max-height:none; } .frm .row label { min-width:0; } }

/* запис учня з панелі */
.hdr-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.slotrow { display:grid; grid-template-columns:220px minmax(0,1fr); gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--g3); }
.slotrow-l { font-size:13px; font-weight:500; }
.slots { display:flex; flex-wrap:wrap; gap:6px; }
.slot { padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--white); font-weight:600; font-size:13px; }
.slot:hover { background:var(--yellow); border-color:var(--yellow); }
.slot:disabled { opacity:.45; cursor:not-allowed; }
.slot small { font-weight:400; color:var(--g1); margin-left:4px; }
.card.warn-card { background:#FFF4E5; border-color:#F5D9B0; }
@media (max-width: 760px) { .slotrow { grid-template-columns:1fr; } }

/* сьогодні, тренд */
.lnk { text-decoration:underline; }
.rows.top { margin-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.ico-today { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Crect x='3' y='9' width='18' height='2' fill='%23000'/%3E%3Crect x='7' y='3' width='2' height='4'/%3E%3Crect x='15' y='3' width='2' height='4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Crect x='3' y='9' width='18' height='2' fill='%23000'/%3E%3Crect x='7' y='3' width='2' height='4'/%3E%3Crect x='15' y='3' width='2' height='4'/%3E%3C/svg%3E"); }
.tday { display:flex; flex-direction:column; gap:10px; }
.shift { border:1px solid var(--g3); border-radius:10px; padding:10px 12px; }
.shift-h { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; margin-bottom:8px; }
.hrs { display:flex; flex-wrap:wrap; gap:4px; }
.hr { font-size:12px; padding:4px 8px; border-radius:6px; background:var(--g3); white-space:nowrap; }
.hr.booked, .hr.active { background:#DCE5EA; } .hr.done { background:var(--graphite); color:#fff; } .hr.no_show { background:var(--ns); color:#fff; } .hr.free { background:var(--yellow); }
.hr a { color:inherit; }
.hr.held { background:#FBE7C6; } .hr.exam { background:#E4DDF1; }
.trend { width:100%; height:auto; display:block; }
.trend text { font-family:var(--inter); font-size:11px; fill:var(--g1); }
.trend .lbl { font-weight:600; fill:var(--ink); }
.sticky-first td:first-child, .sticky-first th:first-child { position:sticky; left:0; background:var(--white); }