/* Po prostu korki — design system (tokens + components).
   Source of truth for values: context/design/design-system.md; ported from the approved mock-ups.
   Breakpoints: >=1200 full layout, 768-1199 icon-only sidebar, <768 slide-over menu + stacked tables. */

:root {
  --orange: #FD671B;
  --orange-ink: #C24909; /* darkest of the brand orange that keeps white text >= 4.5:1 (the mock-up's #D4500A measures 4.24) */
  --orange-ink-hover: #A83F07;
  --orange-50: #FFF2EA;
  --navy-900: #0C2247;
  --navy-850: #131F2B;
  --navy-800: #152137;
  --gray-400: #9EA7B0;
  --gray-500: #767F8D; /* decorative icons: >= 3:1 on white */
  --gray-600: #5E6778;
  --ink: #152137;
  --page: #F6F7FA;
  --surface: #FFFFFF;
  --border: #E8EBF0;
  --green: #1F7A44;
  --green-50: #E3F4EB;
  --red: #C8323A;
  --red-50: #FEF0F1;
  --purple: #6E5FC2;
  --purple-50: #F1EFFD;
  --blue: #2F55D4;
  --blue-50: #EEF2FF;
  --cal-blue: #E1EFFC;
  --cal-orange: #FDE1C9;
  --cal-green: #D5ECDA;
  --cal-purple: #E7DCFA;
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-logo: 'Caveat', cursive;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--ink); background: var(--page); min-height: 100vh; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-pop); }
.skip:focus { top: 8px; }

/* ---------- shell ---------- */
.app { display: flex; min-height: 100vh; background: var(--page); }
.side { width: 232px; flex: none; background: var(--navy-900); color: #fff; display: flex; flex-direction: column; padding: 20px 0 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side.slim { width: 188px; background: var(--navy-850); }
.logo { font-family: var(--font-logo); font-size: 34px; line-height: 34px; text-align: center; color: #fff; padding: 0 16px; font-weight: 600; }
.logo.dark { color: var(--ink); }
.logo i { display: block; height: 3px; width: 70%; margin: 2px auto 0; background: var(--orange); border-radius: 3px; }
.side .logo { font-size: 30px; }
.tag { font-size: 12px; color: rgba(255, 255, 255, .7); text-align: center; margin: 8px 16px 20px; }
.nav { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, .08); }
.nav a[aria-current="page"] { background: var(--orange-ink); }
.nav a.disabled { opacity: .5; pointer-events: none; }
.side.slim .nav a { height: 40px; font-size: 14px; }
.side-foot { margin: auto 14px 0; display: grid; gap: 8px; }
.side-link, .logout { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; color: rgba(255, 255, 255, .85); background: none; border: 0; font: inherit; font-size: 14px; text-decoration: none; width: 100%; border-radius: 10px; text-align: left; }
.side-link:hover, .logout:hover { background: rgba(255, 255, 255, .08); text-decoration: none; color: #fff; }
.side-foot form { margin: 0; }
.main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.top { min-height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; gap: 16px; flex-wrap: wrap; }
.top h1 { font-family: var(--font-head); font-weight: 600; font-size: 24px; line-height: 30px; }
.top p { color: var(--gray-600); font-size: 13px; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.top-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.user { display: flex; align-items: center; gap: 10px; }
.user b { display: block; font-size: 14px; }
.user small { color: var(--gray-600); font-size: 12px; }
.content { padding: 0 24px 32px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 1440px; }
.col { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rail { flex: 0 1 360px; min-width: 300px; display: flex; flex-direction: column; gap: 16px; }
.full { flex: 1 1 100%; min-width: 0; }
.row { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* mobile top bar + slide-over (shown <768px) */
.mbar { display: none; }
.scrim { display: none; }
.nav-toggle { width: 44px; height: 44px; background: none; border: 0; color: #fff; display: grid; place-items: center; border-radius: 10px; }
.nav-toggle:hover { background: rgba(255, 255, 255, .08); }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 16px 18px; min-width: 0; }
.ch { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ct { font-family: var(--font-head); font-size: 12px; line-height: 16px; letter-spacing: .05em; font-weight: 600; text-transform: uppercase; color: var(--gray-600); }
.more { font-size: 12px; font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
.more svg.i { width: 14px; height: 14px; }
.stat { display: flex; gap: 12px; align-items: center; padding: 14px; }
.stat .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.stat .ic svg.i { width: 24px; height: 24px; }
.stat small { display: block; color: var(--gray-600); font-size: 12px; line-height: 16px; }
.stat strong { display: block; font-family: var(--font-head); font-size: 26px; line-height: 32px; font-weight: 600; }
.stat em { font-style: normal; color: var(--gray-600); font-size: 12px; }
.t-green { background: var(--green-50); color: var(--green); }
.t-purple { background: var(--purple-50); color: var(--purple); }
.t-orange { background: var(--orange-50); color: var(--orange-ink); }
.t-blue { background: var(--blue-50); color: var(--blue); }
.t-red { background: var(--red-50); color: var(--red); }
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--gray-600); padding: 20px 8px; }
.empty svg.i { width: 32px; height: 32px; color: var(--gray-500); }

/* ---------- tables ---------- */
.tw { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--gray-600); font-size: 12px; padding: 0 8px 8px 0; white-space: nowrap; }
.tbl td { padding: 10px 8px 10px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl .r { text-align: right; padding-right: 0; }
.neg { color: var(--red); font-weight: 600; }
.pos { color: var(--green); font-weight: 600; }
.badge { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.badge svg.i { width: 12px; height: 12px; }
.b-green { background: var(--green-50); color: var(--green); }
.b-blue { background: var(--blue-50); color: var(--blue); }
.b-red { background: var(--red-50); color: var(--red); }
.b-orange { background: var(--orange-50); color: var(--orange-ink); }
.b-purple { background: var(--purple-50); color: var(--purple); }
.b-yellow { background: #FFE7A3; color: #6B4A00; }
.b-gray { background: #EEF0F4; color: var(--gray-600); }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; background: var(--page); }
.btn.pri { background: var(--orange-ink); border-color: var(--orange-ink); color: #fff; }
.btn.pri:hover { background: var(--orange-ink-hover); }
.btn.grn { background: var(--green); border-color: var(--green); color: #fff; }
.btn.dng { color: var(--red); border-color: #F3C7CA; }
.btn.dng-fill { background: var(--red); border-color: var(--red); color: #fff; }
.btn.dng-fill:hover { background: #A82930; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; }
.btn svg.i { width: 16px; height: 16px; }
.btn-form { display: inline; margin: 0; }

.field { display: grid; gap: 4px; min-width: 0; }
.field label, .field .lbl { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.field input[type=text], .field input[type=date], .field input[type=time], .field input[type=number], .field input[type=password], .field input[type=email], .field input[type=search], .field select, .field textarea,
.inp { height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; background: #fff; font: inherit; color: var(--ink); width: 100%; }
.field textarea { height: auto; min-height: 88px; padding: 10px 12px; }
.field select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus, .inp:focus { outline: 2px solid var(--orange-ink); outline-offset: 0; border-color: var(--orange); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field .hint { margin-top: 0; }
.field-check { display: flex; gap: 8px; align-items: center; }
.field-check label { font-size: 14px; color: var(--ink); font-weight: 500; }
.field-check input { width: 18px; height: 18px; accent-color: var(--orange-ink); }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--red); font-size: 12px; font-weight: 500; }
.form { display: grid; gap: 14px; max-width: 640px; }
.form-card { max-width: 720px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.status-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.status-tab { display: inline-flex; gap: 6px; align-items: center; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--gray-600); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.status-tab .n { background: #EEF0F4; color: var(--gray-600); border-radius: 10px; padding: 0 7px; font-size: 12px; line-height: 18px; }
.status-tab:hover { color: var(--ink); }
.status-tab.on { color: var(--orange-ink); border-bottom-color: var(--orange-ink); font-weight: 600; }
.status-tab.on .n { background: var(--orange-50); color: var(--orange-ink); }
.avail-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* relative: the visually hidden cell labels must not stretch the page */
.avail { border-collapse: collapse; width: 100%; min-width: 380px; font-size: 12px; font-variant-numeric: tabular-nums; }
.avail th { font-weight: 600; color: var(--gray-600); padding: 2px 4px; text-align: center; white-space: nowrap; }
.avail tbody th { text-align: right; padding-right: 6px; }
.avail td { border: 1px solid var(--border); text-align: center; height: 36px; min-width: 44px; padding: 0; }
.avail td.on { background: var(--green-50); color: var(--green); font-weight: 700; }
.avail td:has(input:checked) { background: var(--green-50); }
.avail-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; cursor: pointer; }
.avail-cell input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.avail-toggle { border: 0; background: none; color: var(--blue); font-size: 13px; line-height: 1; min-width: 24px; min-height: 24px; padding: 0 2px; border-radius: 6px; }
.avail-toggle:hover { background: var(--blue-50); }
.avail-period { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; }
.avail-period h2 { font-family: var(--font-head); font-size: 15px; line-height: 22px; }
.filters { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; flex-wrap: wrap; }
.filters .field { width: 200px; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--gray-600); }
.chip { display: inline-flex; gap: 4px; align-items: center; background: var(--blue-50); color: var(--blue); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink); flex: none; }
.av.s { width: 28px; height: 28px; font-size: 11px; }
.av.l { width: 56px; height: 56px; font-size: 18px; }
.c1 { background: var(--cal-blue); } .c2 { background: var(--cal-orange); } .c3 { background: var(--cal-green); } .c4 { background: var(--cal-purple); }
.tile { border-radius: 12px; padding: 16px 8px; display: grid; gap: 10px; justify-items: center; text-align: center; font-weight: 500; font-size: 14px; text-decoration: none; }
.tile:hover { text-decoration: none; filter: brightness(.97); }
.tile svg.i { width: 36px; height: 36px; }

/* ---------- content helpers ---------- */
.who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.who b { display: block; font-size: 13px; }
.who small { display: block; color: var(--gray-600); font-size: 12px; }
.who.big b { font-size: 16px; }
.who.big small { font-size: 13px; }
.list { display: grid; }
.list > * { padding: 10px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.list > *:first-child { border-top: 0; padding-top: 0; }
.list .k { display: flex; gap: 10px; align-items: center; color: var(--gray-600); }
.day { font-size: 12px; font-weight: 600; color: var(--gray-600); margin: 14px 0 4px; text-transform: capitalize; }
.day:first-child { margin-top: 0; }
.day.today { color: var(--orange-ink); }
.slot { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.slot .tm { width: 96px; color: var(--gray-600); font-size: 13px; flex: none; }
.slot .nm { flex: 1; min-width: 160px; }
.slot .nm b { display: block; font-size: 13px; }
.slot .nm small { color: var(--gray-600); font-size: 12px; }
.slot .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.slot.off .nm b { text-decoration: line-through; color: var(--gray-600); }
.slot:first-of-type { border-top: 0; }
.box { border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; min-width: 0; }
.box small { display: block; color: var(--gray-600); font-size: 12px; }
.box strong { font-family: var(--font-head); font-size: 22px; line-height: 30px; font-weight: 600; }
.notice { display: flex; gap: 10px; align-items: flex-start; background: var(--blue-50); color: #1E3A9E; border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.notice.warn { background: #FFF6E5; color: #7A4B00; }
.notice.error { background: var(--red-50); color: #8E1F26; }
.notice svg.i { width: 18px; height: 18px; margin-top: 1px; }
.notice a { font-weight: 600; }
.hint { color: var(--gray-600); font-size: 12px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; }
.h-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 26px; }
.sub { color: var(--gray-600); font-size: 13px; }

/* ---------- timetable ---------- */
.tt { --hr: 48px; display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); font-size: 12px; }
.tt .th { padding: 6px 4px; font-weight: 600; color: var(--gray-600); border-bottom: 1px solid var(--border); text-align: center; }
.tt .th.today { color: var(--orange-ink); }
.tt-hours { display: grid; }
.tt-hour { height: var(--hr); color: var(--gray-600); font-size: 11px; padding: 2px 4px 0 0; text-align: right; }
.tt-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hr) - 1px), var(--border) calc(var(--hr) - 1px), var(--border) var(--hr)); }
.tt-col.today { background-color: #FFFAF6; }
.blk { position: absolute; left: 2px; right: 2px; border-radius: 8px; padding: 3px 6px; font-size: 11px; line-height: 14px; overflow: hidden; color: var(--ink); text-decoration: none; border-left: 3px solid rgba(21, 33, 55, .25); }
.blk:hover { text-decoration: none; filter: brightness(.97); }
.blk b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.done { opacity: .6; }
.blk.due { border-left-color: var(--orange-ink); box-shadow: inset 0 0 0 1px var(--orange-ink); }
.blk.trial { border-left-style: dashed; }
.tt-av { position: absolute; left: 0; right: 0; background: var(--green-50); }
.tt-free { display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 11px; font-weight: 600; text-decoration: none; opacity: .85; }
.tt-free:hover { background: #CFEBDB; text-decoration: none; opacity: 1; }
.tt-cnt { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; line-height: 14px; color: var(--gray-600); border-bottom: 1px solid var(--border); }
.tchip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 0 6px; border-left: 4px solid var(--tc, var(--gray-500)); border-radius: 6px; background: var(--tc-bg, var(--border)); color: var(--ink); font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; vertical-align: middle; }
.tc-0 { --tc: #C0307F; --tc-bg: #F5DEEB; }
.tc-1 { --tc: #1F7A44; --tc-bg: #DBEAE1; }
.tc-2 { --tc: #6E5FC2; --tc-bg: #E8E5F5; }
.tc-3 { --tc: #6E8B00; --tc-bg: #E8ECD6; }
.tc-4 { --tc: #2F55D4; --tc-bg: #DEE4F8; }
.tc-5 { --tc: #9A6B00; --tc-bg: #EFE7D6; }
.tc-6 { --tc: #0093A8; --tc-bg: #D6EEF1; }
.tc-7 { --tc: #C24909; --tc-bg: #F5E2D8; }
.cal-filters { align-items: flex-end; }
.cal-tutors { position: relative; min-width: 220px; }
.cal-tutors summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; min-height: 40px; justify-content: center; list-style: none; }
.cal-tutors summary::-webkit-details-marker { display: none; }
.cal-tutors .lbl { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.cal-tutor-list { display: grid; gap: 6px; padding: 10px 12px; margin-top: 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; max-height: 260px; overflow: auto; }
.cal-tutor-list .field-check { align-items: center; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: 13px; }
.cal-legend .lbl { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.cal-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.tt-chips { display: flex; gap: 2px; align-items: center; justify-content: center; margin-top: 1px; }
.tt-chips .tchip { min-width: 20px; padding: 0 3px; font-size: 10px; line-height: 14px; border-left-width: 3px; }
.tt-chips small { font-size: 10px; color: var(--gray-600); }
.form-group { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0; display: grid; gap: 12px; }
.form-group legend { font-size: 12px; font-weight: 500; color: var(--gray-600); padding: 0 6px; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
@media (min-width: 768px) and (max-width: 1199px) { .side .nav-badge { position: absolute; margin: 0; transform: translate(14px, -12px); min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; } .side .nav a { position: relative; } }
.combo { position: relative; }
.combo-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.combo-input:focus { outline: 2px solid var(--orange-ink); outline-offset: 0; border-color: var(--orange); }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); max-height: 40vh; overflow-y: auto; }
.combo-list li { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; cursor: pointer; }
.combo-list li.on { background: var(--orange-50); box-shadow: inset 0 0 0 2px var(--orange-ink); }
.combo-list li.combo-none { color: var(--gray-600); cursor: default; }
.field select.is-locked, select.is-locked, .combo.is-locked .combo-input { background-color: var(--page); color: var(--gray-600); cursor: not-allowed; }
.field select.is-locked, select.is-locked, .combo.is-locked .combo-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6778' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
.guided-hint, .lock-hint { display: block; }
.tt-hr { position: absolute; left: 0; right: 0; display: block; border-bottom: 1px solid var(--border); }
.tt-hr:hover { background: var(--blue-50); }
.tt-owner .tt-av, .tt-owner .blk, .tt-owner .tt-cnt { pointer-events: none; }
.tt-cnt.has-free { background: var(--green-50); color: var(--green); }
.tt-cnt b { font-size: 12px; }
a.tt-cnt { text-decoration: none; }
a.tt-cnt:hover { filter: brightness(.96); }
.cal-month { border-collapse: collapse; width: 100%; min-width: 560px; table-layout: fixed; }
.cal-month th { font-weight: 600; color: var(--gray-600); font-size: 12px; padding: 4px; text-align: center; }
.cal-month td { border: 1px solid var(--border); vertical-align: top; height: 88px; padding: 0; }
.cal-month td a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 6px; color: var(--ink); text-decoration: none; }
.cal-month td a:hover { background: var(--blue-50); }
.cal-month td.other a { color: var(--gray-500); background: #FAFBFC; }
.cal-month td.today a b { color: var(--orange-ink); }
.cal-n { font-size: 11px; line-height: 14px; color: var(--green); }
.cal-n.trial { color: var(--orange-ink); }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 60; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 12px 14px; font-size: 13px; }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--orange-ink); }
.toast p { flex: 1; }
.toast button { background: none; border: 0; color: var(--gray-600); padding: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.toast button:hover { background: var(--page); }
.toast button svg.i { width: 16px; height: 16px; }

/* ---------- login ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--page); }
.auth-card { width: min(420px, 100%); display: grid; gap: 18px; }
.auth-card .logo { font-size: 44px; line-height: 44px; }
.auth-card .logo i { height: 4px; }
.auth-card h1 { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 26px; text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 1199px) and (min-width: 768px) {
  .side, .side.slim { width: 68px; }
  .side .tag, .side .nav a span, .side .side-link span, .side .logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .side .logo { font-size: 14px; line-height: 16px; padding: 0 4px; }
  .nav { padding: 0 10px; }
  .nav a, .side-link, .logout { justify-content: center; padding: 0; }
  .side-foot { margin: auto 10px 0; }
  .r4, .r5, .r6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .rail > * { flex: 1 1 300px; }
}

@media (max-width: 767px) {
  .app { display: block; }
  .mbar { display: flex; align-items: center; justify-content: space-between; height: 60px; background: var(--navy-850); color: #fff; padding: 0 12px 0 8px; position: sticky; top: 0; z-index: 30; }
  .mbar .logo { font-size: 28px; line-height: 26px; padding: 0; }
  .mbar .logo i { height: 2px; }
  .side, .side.slim { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(300px, 84vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: var(--shadow-pop); }
  .nav-open .side { transform: none; visibility: visible; }
  .nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(12, 34, 71, .5); z-index: 40; }
  .nav-open { overflow: hidden; }
  .nav a { height: 48px; }
  .top { padding: 16px 16px 8px; min-height: 0; }
  .top h1 { font-size: 22px; line-height: 28px; }
  .top-actions { width: 100%; }
  .top-actions .btn { flex: 1; }
  .content { padding: 0 16px 96px; }
  .col, .rail { flex-basis: 100%; min-width: 0; }
  .r2, .r3, .r4, .r5, .r6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { gap: 10px; }
  .stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .stat .ic { width: 36px; height: 36px; }
  .stat .ic svg.i { width: 20px; height: 20px; }
  .stat strong { font-size: 20px; line-height: 26px; }
  .tt-wrap { display: none; }
  .filters .field { width: 100%; }
  .btn { height: 44px; }
  .btn.sm { height: 36px; }
  .form-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px; margin: 0; flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .form-actions.static { position: static; border: 0; padding: 0; }

  /* tables become card lists; same text, same DOM order */
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; }
  .tbl.stack tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
  .tbl.stack td { display: flex; justify-content: space-between; gap: 12px; border-top: 0; padding: 4px 0; text-align: right; }
  .tbl.stack td::before { content: attr(data-label); color: var(--gray-600); font-size: 12px; text-align: left; flex: none; }
  .tbl.stack td.r { text-align: right; }
  .tbl.stack td[data-label=""]::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

@media (max-width: 767px) {
  .top .user { display: none; }
}

/* ---------- staff forms and lists ---------- */
.subj-grid { display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: #fff; }
.subj-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--border); }
.subj-row:first-child { border-top: 0; }
.subj-name { font-weight: 500; }
.subj-levels { display: flex; gap: 16px; flex-wrap: wrap; }
.subj-levels .chk { color: var(--ink); font-size: 14px; }
.subj-levels input { width: 18px; height: 18px; accent-color: var(--orange-ink); }
.slots-form { display: grid; gap: 10px; }
.slot-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--page); }
.row-link td:first-child a { font-weight: 600; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--gray-600); }
.kv dd { margin: 0; }
@media (max-width: 767px) {
  .slot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subj-row { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ch form { width: 100%; }
  .ch form .field { flex: 1 1 auto; width: auto !important; }
}

/* ---------- statistics: charts (server-rendered SVG), meters, notes ---------- */
:root {
  --series-1: #2F55D4; /* blue: lesson value */
  --series-2: #FD671B; /* orange: the owner margin */
  --series-3: #1F7A44; /* green: payments received */
  --series-4: #6E5FC2; /* purple: tutor payouts */
  --series-5: #0C2247; /* navy: costs */
}
.chart { margin: 0; }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-svg { display: block; width: 100%; height: auto; }
.ch-grid path { stroke: var(--border); stroke-width: 1; fill: none; }
.ch-axis, .ch-axis text { fill: var(--gray-600); font-size: 10px; font-family: var(--font-body); }
.ch-val { fill: var(--ink); font-size: 11px; font-family: var(--font-body); }
.cs1 { fill: var(--series-1); } .cs2 { fill: var(--series-2); } .cs3 { fill: var(--series-3); }
.cs4 { fill: var(--series-4); } .cs5 { fill: var(--series-5); }
.cl1, .cl2, .cl3, .cl4, .cl5 { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cl1 { stroke: var(--series-1); } .cl2 { stroke: var(--series-2); } .cl3 { stroke: var(--series-3); }
.cl4 { stroke: var(--series-4); } .cl5 { stroke: var(--series-5); }
.cm { stroke: var(--surface); stroke-width: 2; }
.cm1 { fill: var(--series-1); } .cm2 { fill: var(--series-2); } .cm3 { fill: var(--series-3); }
.cm4 { fill: var(--series-4); } .cm5 { fill: var(--series-5); }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--gray-600); }
.legend li { display: inline-flex; gap: 6px; align-items: center; }
.cw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cw1 { background: var(--series-1); } .cw2 { background: var(--series-2); } .cw3 { background: var(--series-3); }
.cw4 { background: var(--series-4); } .cw5 { background: var(--series-5); }
.chart-data { margin-top: 8px; font-size: 13px; }
.chart-data summary { cursor: pointer; color: var(--gray-600); font-size: 12px; }
.meter { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; margin-top: 8px; }
.meter > i { display: block; height: 100%; background: var(--orange); border-radius: 5px; }
.note { margin: 4px 0 16px; font-size: 13px; color: var(--gray-600); }
.note summary { cursor: pointer; font-weight: 500; }
.note ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.tbl tr.total td { border-top: 2px solid var(--border); }
@media (max-width: 767px) {
  .row.one-m { grid-template-columns: minmax(0, 1fr); }
}

/* statistics: weekday x hour heat map, matrix */
.heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; min-width: 520px; }
.heat th { font-weight: 500; color: var(--gray-600); padding: 2px 4px; text-align: center; white-space: nowrap; }
.heat tbody th { text-align: left; }
.heat .hm { min-width: 28px; height: 26px; text-align: center; border-radius: 4px; }
.hm0 { background: var(--page); }
.hm1 { background: #DDE5FB; }
.hm2 { background: #B5C5F4; }
.hm3 { background: #7F98EA; }
.hm4 { background: var(--series-1); color: #fff; }
.matrix th, .matrix td { white-space: nowrap; }