/* ============================================================
   MARKRASOMA — Design System
   One School. One Platform. Complete Control.
   A Markrah Media Product
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:root {
  /* Brand — derived from the MARKRASOMA logo (navy + electric blue) */
  --brand-50:#EEF5FF; --brand-100:#D9E8FE; --brand-200:#B6D3FD; --brand-300:#85B7FB;
  --brand-400:#4E94F7; --brand-500:#0B6BEA; --brand-600:#0B5CD4; --brand-700:#0A4BAD;
  --brand-800:#0D3D88; --brand-900:#123567;
  --navy:#0E2A47; --navy-2:#0A1F35; --navy-3:#061525;
  --accent: var(--brand-600); /* replaced at runtime with school branding */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, white);
  --ok:#0E9F6E; --ok-soft:#E3F7EF;
  --warn:#B45309; --warn-soft:#FEF3E2;
  --err:#DC2626; --err-soft:#FDECEC;
  --info:#0284C7; --info-soft:#E3F4FC;
  --violet:#6D28D9; --violet-soft:#F1EAFE;
  --bg:#F4F6FA; --bg-2:#ECF0F6; --card:#FFFFFF; --card-2:#F8FAFD;
  --ink:#152238; --ink-2:#51607A; --ink-3:#8593AB;
  --line:#E3E8F0; --line-2:#EDF1F7;
  --shadow-sm: 0 1px 2px rgba(14,32,55,.05);
  --shadow: 0 1px 3px rgba(14,32,55,.06), 0 4px 14px rgba(14,32,55,.05);
  --shadow-lg: 0 10px 40px rgba(14,32,55,.14);
  --radius:12px; --radius-lg:16px; --radius-sm:8px;
  --topbar-h:60px; --sidebar-w:248px;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  --bg:#0A1220; --bg-2:#0D1626; --card:#111C2E; --card-2:#15223A;
  --ink:#E7EDF7; --ink-2:#9DAAC2; --ink-3:#66748E;
  --line:#1D2B44; --line-2:#182640;
  --brand-50:#0E1E38; --brand-100:#12294C; --brand-200:#173A66; --brand-300:#1E4E88;
  --accent-soft: color-mix(in srgb, var(--accent) 26%, #0D1626);
  --ok-soft:#0C2B21; --warn-soft:#2E2210; --err-soft:#331515; --info-soft:#0C2637; --violet-soft:#231A3A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 3px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.55);
}
::selection { background: var(--brand-200); color: var(--navy); }
[data-theme="dark"] ::selection { background: var(--brand-700); color: #fff; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1,h2,h3,h4 { color: var(--ink); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.muted { color: var(--ink-2); } .muted-3 { color: var(--ink-3); }
.small { font-size: 12px; } .tiny { font-size: 11px; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.nowrap { white-space: nowrap; }
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.row { display:flex; align-items:center; gap:8px; }
.row-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grow { flex:1; min-width:0; }
.center { text-align:center; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.hidden { display:none !important; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:10px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer;
  background:var(--brand-600); color:#fff; line-height:1.2;
  transition: background .15s, box-shadow .15s, transform .05s, border-color .15s, color .15s;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.btn:hover { background:var(--brand-700); text-decoration:none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline:2px solid var(--brand-400); outline-offset:2px; }
.btn svg { width:16px; height:16px; flex:none; }
.btn-ghost { background:transparent; color:var(--ink-2); box-shadow:none; border-color:var(--line); }
.btn-ghost:hover { background:var(--bg-2); color:var(--ink); }
.btn-outline { background:transparent; color:var(--brand-600); border-color:var(--brand-200); box-shadow:none; }
.btn-outline:hover { background:var(--brand-50); }
[data-theme="dark"] .btn-outline { border-color:var(--brand-300); }
.btn-soft { background:var(--brand-50); color:var(--brand-700); box-shadow:none; }
[data-theme="dark"] .btn-soft { color:var(--brand-300); }
.btn-soft:hover { background:var(--brand-100); }
.btn-danger { background:var(--err); } .btn-danger:hover { background:#B91C1C; }
.btn-ok { background:var(--ok); } .btn-ok:hover { background:#0B8A60; }
.btn-sm { padding:5px 10px; font-size:12.5px; border-radius:8px; }
.btn-sm svg { width:14px; height:14px; }
.btn-lg { padding:12px 22px; font-size:15px; border-radius:12px; }
.btn-block { width:100%; }
.btn[disabled], .btn.loading { opacity:.55; pointer-events:none; }
.btn.loading::after { content:''; width:13px; height:13px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > label { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.field > label .req { color:var(--err); }
.input, select.input, textarea.input {
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); font-size:13.5px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
[data-theme="dark"] .input:focus { box-shadow:0 0 0 3px var(--brand-900); }
.input::placeholder { color:var(--ink-3); }
textarea.input { resize:vertical; min-height:80px; }
select.input { appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238593AB' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.input-err { border-color:var(--err); }
.field .hint { font-size:11.5px; color:var(--ink-3); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.checkline { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.checkline input { width:16px; height:16px; accent-color: var(--brand-600); }
.switch { position:relative; width:38px; height:22px; flex:none; }
.switch input { opacity:0; width:100%; height:100%; position:absolute; cursor:pointer; margin:0; z-index:2; }
.switch i { position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.18s; }
.switch i::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.18s; box-shadow:var(--shadow-sm); }
.switch input:checked + i { background:var(--brand-600); }
.switch input:checked + i::after { left:19px; }

/* ---------- cards ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad { padding:18px 20px; }
.card-head { padding:16px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card-title { font-size:14.5px; font-weight:700; }
.card-sub { font-size:12px; color:var(--ink-3); margin-top:2px; }
.card-flush { padding:0; overflow:hidden; }

/* ---------- badges & pills ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:99px; font-size:11.5px; font-weight:600; line-height:1.5; white-space:nowrap; }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8; }
.badge.no-dot::before { display:none; }
.b-green { background:var(--ok-soft); color:var(--ok); }
.b-red { background:var(--err-soft); color:var(--err); }
.b-amber { background:var(--warn-soft); color:var(--warn); }
.b-blue { background:var(--info-soft); color:var(--info); }
.b-gray { background:var(--bg-2); color:var(--ink-2); }
.b-violet { background:var(--violet-soft); color:var(--violet); }
.b-brand { background:var(--brand-50); color:var(--brand-700); }
[data-theme="dark"] .b-brand { color:var(--brand-300); }
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:8px; background:var(--bg-2); color:var(--ink-2); font-size:12px; font-weight:600; }

/* ---------- avatars ---------- */
.avatar { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; color:#fff; flex:none; letter-spacing:.02em; }
.avatar-sm { width:26px; height:26px; font-size:10.5px; }
.avatar-lg { width:64px; height:64px; font-size:22px; border-radius:18px; }
.avatar-xl { width:84px; height:84px; font-size:28px; border-radius:22px; }

/* ---------- KPI stat cards ---------- */
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); display:flex; gap:14px; align-items:center; transition:box-shadow .15s, transform .15s; cursor:default; position:relative; overflow:hidden; }
.kpi:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.kpi .kpi-ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.kpi .kpi-ic svg { width:20px; height:20px; }
.kpi .kpi-v { font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.kpi .kpi-l { font-size:12px; color:var(--ink-2); font-weight:600; }
.kpi .kpi-t { font-size:11px; color:var(--ink-3); margin-top:1px; }
.kpi-clickable { cursor:pointer; }

/* ---------- tables ---------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; padding:11px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; background:var(--card-2); border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; z-index:2; }
.tbl th.sortable { cursor:pointer; user-select:none; }
.tbl th.sortable:hover { color:var(--brand-600); }
.tbl td { padding:10px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background:var(--card-2); }
.tbl tbody tr.clickable { cursor:pointer; }
.tbl tbody tr.selected { background:var(--brand-50); }
[data-theme="dark"] .tbl tbody tr.selected { background:var(--brand-900); }
.tbl .num { text-align:right; font-variant-numeric: tabular-nums; }
.tbl th.num { text-align:right; }
.tbl-empty { padding:44px 20px; }

/* table toolbar */
.tbl-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.searchbox { position:relative; flex:1; min-width:200px; max-width:360px; }
.searchbox svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-3); }
.searchbox .input { padding-left:33px; }
.tbl-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; font-size:12.5px; color:var(--ink-2); flex-wrap:wrap; }

/* pagination */
.pager { display:flex; gap:4px; }
.pager button { min-width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer; padding:0 8px; }
.pager button:hover { background:var(--bg-2); }
.pager button.on { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.pager button[disabled] { opacity:.4; cursor:default; }

/* ---------- modal ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(9,19,36,.55); backdrop-filter:blur(3px); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px 16px; overflow-y:auto; animation:fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } }
.modal { background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:560px; animation:popIn .18s cubic-bezier(.2,.9,.3,1.2); border:1px solid var(--line); }
.modal.wide { max-width:860px; }
.modal.xwide { max-width:1080px; }
@keyframes popIn { from { opacity:0; transform:translateY(14px) scale(.98); } }
.modal-head { padding:18px 22px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.modal-title { font-size:16.5px; font-weight:700; }
.modal-sub { font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.modal-x { background:none; border:none; color:var(--ink-3); cursor:pointer; padding:6px; border-radius:8px; display:flex; }
.modal-x:hover { background:var(--bg-2); color:var(--ink); }
.modal-body { padding:16px 22px; max-height:65vh; overflow-y:auto; }
.modal-foot { padding:14px 22px 20px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* ---------- toast ---------- */
#toasts { position:fixed; top:16px; right:16px; z-index:3000; display:flex; flex-direction:column; gap:10px; max-width:min(380px, calc(100vw - 32px)); }
.toast { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand-500); border-radius:12px; box-shadow:var(--shadow-lg); padding:12px 16px; display:flex; gap:11px; align-items:flex-start; animation:slideIn .25s cubic-bezier(.2,.9,.3,1.1); font-size:13px; }
@keyframes slideIn { from { opacity:0; transform:translateX(30px); } }
.toast.t-ok { border-left-color:var(--ok); } .toast.t-err { border-left-color:var(--err); } .toast.t-warn { border-left-color:var(--warn); }
.toast .t-ic { width:20px; height:20px; flex:none; margin-top:1px; }
.toast .t-title { font-weight:700; font-size:13px; }
.toast .t-msg { color:var(--ink-2); font-size:12.5px; margin-top:1px; }
.toast.out { animation:slideOut .25s forwards; }
@keyframes slideOut { to { opacity:0; transform:translateX(40px); } }

/* ---------- tabs ---------- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; border:none; background:none; border-bottom:2.5px solid transparent; margin-bottom:-1px; white-space:nowrap; font-family:inherit; }
.tab:hover { color:var(--ink); }
.tab.on { color:var(--brand-600); border-bottom-color:var(--brand-600); }
.tabs-inner { display:flex; gap:6px; background:var(--bg-2); padding:4px; border-radius:11px; margin-bottom:16px; overflow-x:auto; }
.tabs-inner .tab { border-radius:8px; padding:7px 14px; border-bottom:none; margin-bottom:0; }
.tabs-inner .tab.on { background:var(--card); color:var(--brand-600); box-shadow:var(--shadow-sm); }

/* ---------- dropdown ---------- */
.dropdown { position:relative; }
.dd-menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); min-width:210px; padding:6px; z-index:900; animation:popIn .12s ease; }
.dd-item { display:flex; align-items:center; gap:10px; width:100%; padding:8.5px 12px; border:none; background:none; border-radius:8px; font-size:13px; color:var(--ink); cursor:pointer; text-align:left; font-family:inherit; font-weight:500; }
.dd-item:hover { background:var(--bg-2); }
.dd-item svg { width:15px; height:15px; color:var(--ink-2); }
.dd-item.danger { color:var(--err); } .dd-item.danger svg { color:var(--err); }
.dd-sep { height:1px; background:var(--line); margin:5px 8px; }

/* ---------- empty & loading ---------- */
.empty { text-align:center; padding:48px 20px; color:var(--ink-2); }
.empty svg { width:44px; height:44px; color:var(--ink-3); margin-bottom:12px; opacity:.7; }
.empty .e-title { font-weight:700; font-size:14.5px; color:var(--ink); }
.empty .e-hint { font-size:12.5px; margin-top:4px; }
.skel { background:linear-gradient(90deg, var(--bg-2) 25%, var(--line-2) 50%, var(--bg-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }
@keyframes shimmer { to { background-position:-200% 0; } }
.load-bar { height:3px; background:var(--bg-2); overflow:hidden; border-radius:99px; }
.load-bar i { display:block; height:100%; width:40%; background:var(--brand-500); border-radius:99px; animation:loadbar 1.1s infinite ease-in-out; }
@keyframes loadbar { 0% { margin-left:-40%; } 100% { margin-left:100%; } }

/* ---------- progress ---------- */
.prog { height:7px; background:var(--bg-2); border-radius:99px; overflow:hidden; }
.prog i { display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }

/* ---------- banner (integration status) ---------- */
.banner { display:flex; gap:12px; padding:13px 16px; border-radius:var(--radius); font-size:13px; align-items:flex-start; border:1px solid; }
.banner svg { width:17px; height:17px; flex:none; margin-top:1px; }
.banner.warn { background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 30%, transparent); color:var(--warn); }
.banner.info { background:var(--info-soft); border-color:color-mix(in srgb, var(--info) 30%, transparent); color:var(--info); }
.banner.ok { background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 30%, transparent); color:var(--ok); }
.banner .b-body { color:var(--ink-2); }
.banner .b-title { font-weight:700; color:inherit; }

/* ---------- timeline (activity) ---------- */
.timeline { display:flex; flex-direction:column; }
.tl-item { display:flex; gap:12px; padding:9px 0; position:relative; }
.tl-item::before { content:''; position:absolute; left:15px; top:38px; bottom:-6px; width:1.5px; background:var(--line); }
.tl-item:last-child::before { display:none; }
.tl-dot { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; z-index:1; }
.tl-dot svg { width:15px; height:15px; }
.tl-title { font-size:13px; font-weight:600; }
.tl-sub { font-size:12px; color:var(--ink-2); }

/* ---------- definition lists ---------- */
.dl { display:grid; grid-template-columns: 130px 1fr; gap:7px 14px; font-size:13px; }
.dl dt { color:var(--ink-3); font-weight:600; }
.dl dd { color:var(--ink); }

/* ---------- notifications ---------- */
.notif { display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-2); align-items:flex-start; }
.notif:hover { background:var(--card-2); }
.notif .n-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.notif .n-ic svg { width:16px; height:16px; }
.notif.unread { background:var(--brand-50); }
[data-theme="dark"] .notif.unread { background:var(--brand-900); }
.notif .n-title { font-weight:600; font-size:13px; }
.notif .n-body { font-size:12.5px; color:var(--ink-2); margin-top:1px; }

/* ---------- charts ---------- */
.chart-box { position:relative; }
.chart-tip { position:absolute; pointer-events:none; background:var(--navy); color:#fff; font-size:11px; padding:5px 9px; border-radius:7px; transform:translate(-50%,-130%); white-space:nowrap; z-index:5; box-shadow:var(--shadow-lg); }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); }
.legend i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; }

/* ---------- wizard ---------- */
.wiz-steps { display:flex; gap:0; margin-bottom:26px; }
.wiz-step { flex:1; text-align:center; position:relative; }
.wiz-step::before { content:''; position:absolute; top:15px; left:-50%; width:100%; height:2.5px; background:var(--line); }
.wiz-step:first-child::before { display:none; }
.wiz-step .w-dot { width:32px; height:32px; border-radius:50%; background:var(--card); border:2.5px solid var(--line); color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; position:relative; z-index:1; }
.wiz-step.done::before, .wiz-step.on::before { background:var(--brand-600); }
.wiz-step.done .w-dot { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.wiz-step.on .w-dot { border-color:var(--brand-600); color:var(--brand-600); box-shadow:0 0 0 4px var(--brand-100); }
.wiz-step .w-lbl { font-size:11.5px; font-weight:600; color:var(--ink-3); margin-top:6px; }
.wiz-step.on .w-lbl { color:var(--brand-600); }

/* ---------- misc ---------- */
.divider { height:1px; background:var(--line); margin:18px 0; }
.crumbs { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); margin-bottom:6px; flex-wrap:wrap; }
.crumbs a { color:var(--ink-3); } .crumbs a:hover { color:var(--brand-600); }
.crumbs .sep { opacity:.6; }
.page-title { font-size:21px; font-weight:800; letter-spacing:-.02em; }
.page-sub { font-size:13px; color:var(--ink-2); margin-top:3px; }
.money { font-variant-numeric:tabular-nums; }
.att-btns { display:flex; gap:6px; }
.att-btn { border:1.5px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:9px; padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.att-btn:hover { border-color:var(--ink-3); }
.att-btn.on-Present, .att-btn.on-present { background:var(--ok-soft); border-color:var(--ok); color:var(--ok); }
.att-btn.on-Late, .att-btn.on-late { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.att-btn.on-Absent, .att-btn.on-absent { background:var(--err-soft); border-color:var(--err); color:var(--err); }
.att-btn.on-Excused, .att-btn.on-excused { background:var(--info-soft); border-color:var(--info); color:var(--info); }
.bulk-bar { position:sticky; bottom:12px; background:var(--navy); color:#fff; border-radius:14px; padding:12px 18px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-lg); z-index:50; flex-wrap:wrap; }
.bulk-bar .btn-ghost { border-color:rgba(255,255,255,.25); color:#fff; }
.bulk-bar .btn-ghost:hover { background:rgba(255,255,255,.12); }
kbd { background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:11px; font-family:var(--font-mono); color:var(--ink-2); }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app { min-height:100vh; }
.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); background:var(--navy-2);
  color:#B9C7DD; display:flex; flex-direction:column; z-index:600; transition:transform .22s ease;
  background-image: radial-gradient(1200px 500px at -10% -10%, rgba(11,91,212,.25), transparent 55%);
}
.sb-brand { display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.sb-brand img { width:38px; height:38px; border-radius:11px; background:#fff; padding:3px; }
.sb-brand .sb-name { font-weight:800; font-size:15.5px; color:#fff; letter-spacing:.01em; }
.sb-brand .sb-sub { font-size:10px; color:#7B8DA8; letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.sb-school { margin:12px 14px 4px; padding:10px 12px; border-radius:11px; background:rgba(255,255,255,.05); display:flex; align-items:center; gap:10px; }
.sb-school .avatar { width:32px; height:32px; border-radius:9px; font-size:11px; }
.sb-school .s-name { font-size:12.5px; font-weight:700; color:#fff; line-height:1.25; }
.sb-school .s-sub { font-size:10.5px; color:#7B8DA8; }
.sb-nav { flex:1; overflow-y:auto; padding:8px 10px 16px; scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.sb-nav::-webkit-scrollbar { width:5px; } .sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:99px; }
.sb-sec { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#5E7290; font-weight:700; padding:16px 10px 6px; }
.sb-item { display:flex; align-items:center; gap:11px; padding:8.5px 11px; border-radius:10px; color:#AEBDD5; font-size:13px; font-weight:500; cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:inherit; position:relative; transition:background .12s, color .12s; margin-bottom:1px; }
.sb-item:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.sb-item.on { background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 90%, #fff 0%), color-mix(in srgb, var(--accent) 55%, transparent)); color:#fff; font-weight:600; box-shadow:0 4px 14px rgba(11,91,212,.35); }
.sb-item.on::before { content:''; position:absolute; left:-10px; top:20%; bottom:20%; width:3.5px; border-radius:0 4px 4px 0; background:#fff; opacity:.9; }
.sb-item svg { width:17px; height:17px; flex:none; opacity:.85; }
.sb-item .sb-count { margin-left:auto; background:rgba(255,255,255,.14); color:#fff; font-size:10px; font-weight:700; border-radius:99px; padding:1px 7px; }
.sb-foot { padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); font-size:10.5px; color:#5E7290; line-height:1.6; }
.sb-foot b { color:#8FA3C2; }

.main { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:var(--topbar-h); background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:500; }
.tb-search { position:relative; flex:1; max-width:430px; }
.tb-search .input { background:var(--bg-2); border-color:transparent; border-radius:11px; padding-left:35px; }
.tb-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-3); }
.tb-search .g-res { position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; max-height:420px; overflow-y:auto; z-index:950; }
.g-res .gr-item { display:flex; gap:11px; align-items:center; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--line-2); }
.g-res .gr-item:hover { background:var(--bg-2); }
.g-res .gr-item:last-child { border-bottom:none; }
.g-res .gr-ic { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.g-res .gr-ic svg { width:14px; height:14px; }
.g-res .gr-title { font-size:13px; font-weight:600; }
.g-res .gr-sub { font-size:11.5px; color:var(--ink-3); }
.g-res .gr-type { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; padding:6px 14px 4px; background:var(--card-2); }
.tb-icon { position:relative; background:none; border:none; color:var(--ink-2); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tb-icon:hover { background:var(--bg-2); color:var(--ink); }
.tb-icon svg { width:19px; height:19px; }
.tb-icon .dot { position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--err); border:2px solid var(--card); }
.tb-user { display:flex; align-items:center; gap:10px; cursor:pointer; padding:5px 8px 5px 5px; border-radius:11px; }
.tb-user:hover { background:var(--bg-2); }
.tb-user .tu-name { font-size:13px; font-weight:600; line-height:1.2; }
.tb-user .tu-role { font-size:11px; color:var(--ink-3); }
.tb-menu { position:absolute; top:calc(100% + 8px); right:0; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); min-width:240px; padding:6px; z-index:950; }
.tb-menu .tu-head { padding:11px 12px; border-bottom:1px solid var(--line-2); margin-bottom:5px; }
.notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:390px; max-width:calc(100vw - 30px); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; z-index:950; }
.notif-panel .np-head { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.notif-panel .np-list { max-height:420px; overflow-y:auto; }
.content { padding:24px 26px 40px; flex:1; width:100%; max-width:1440px; margin:0 auto; }
.mobile-only { display:none; }
.sb-backdrop { display:none; }

/* bottom nav (mobile) */
.bottomnav { display:none; }

/* ============================================================
   MARKETING SITE — multipage glass design (mk-*)
   ============================================================ */
.mk { min-height:100vh; background:var(--bg); color:var(--ink); position:relative; overflow-x:clip; }
.mk::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 500px at 12% -6%, rgba(11,107,234,.16), transparent 62%),
    radial-gradient(660px 430px at 90% 2%, rgba(16,185,129,.11), transparent 56%),
    radial-gradient(950px 640px at 50% 112%, rgba(11,107,234,.09), transparent 60%); }
[data-theme="dark"] .mk::before {
  background:
    radial-gradient(760px 500px at 12% -6%, rgba(35,90,190,.20), transparent 62%),
    radial-gradient(660px 430px at 90% 2%, rgba(16,150,120,.10), transparent 56%),
    radial-gradient(950px 640px at 50% 112%, rgba(35,90,190,.10), transparent 60%); }
.mk > * { position:relative; z-index:1; }

/* header — floating glass bar */
.mk-head { position:sticky; top:14px; z-index:800; padding:0 20px; }
.mk-head-in { max-width:1140px; margin:0 auto; display:flex; align-items:center; gap:22px;
  background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 34px rgba(13,38,76,.10);
  border-radius:18px; padding:9px 12px 9px 18px; }
[data-theme="dark"] .mk-head-in { background:rgba(13,23,42,.62); border-color:rgba(148,178,255,.15); box-shadow:0 10px 34px rgba(0,0,0,.45); }
.mk-logo { display:flex; align-items:center; gap:10px; text-decoration:none !important; color:var(--ink); }
.mk-logo img { width:34px; height:34px; }
.mk-logo b { font-size:15px; letter-spacing:.01em; display:block; line-height:1.2; }
.mk-logo small { display:block; font-size:9.5px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.mk-nav { display:flex; gap:4px; margin-left:auto; }
.mk-nav a { font-size:13.5px; font-weight:500; color:var(--ink-2); padding:8px 13px; border-radius:10px; text-decoration:none !important; }
.mk-nav a:hover { color:var(--brand-600); background:rgba(11,107,234,.07); }
.mk-nav a.on { color:var(--brand-600); background:rgba(11,107,234,.12); font-weight:600; }
.mk-head-cta { display:flex; gap:9px; }

/* hero */
.mk-hero { padding:108px 24px 64px; text-align:center; }
.mk-hero--page { padding:80px 24px 30px; }
.mk-in { max-width:1140px; margin:0 auto; }
.mk-kicker { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.02em;
  color:var(--brand-600); background:rgba(11,107,234,.09); border:1px solid rgba(11,107,234,.18); border-radius:99px; padding:6px 15px; margin-bottom:26px; }
.mk-kicker svg { width:14px; height:14px; }
.mk-h1 { font-size:clamp(40px, 6.4vw, 68px); font-weight:800; letter-spacing:-.035em; line-height:1.04; margin:0 auto; max-width:900px; }
.mk-grad { background:linear-gradient(96deg, #0B6BEA 10%, #10B981 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mk-lead { max-width:660px; margin:26px auto 0; font-size:clamp(15.5px, 2vw, 18px); color:var(--ink-2); line-height:1.7; }
.mk-ctas { display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap; }
.mk-stats { display:flex; justify-content:center; margin-top:60px; flex-wrap:wrap; }
.mk-stat { padding:4px 34px; border-left:1px solid var(--line-2); text-align:center; }
.mk-stat:first-child { border-left:none; }
.mk-stat b { display:block; font-size:27px; font-weight:800; letter-spacing:-.02em; }
.mk-stat span { font-size:12.5px; color:var(--ink-3); font-weight:500; }

/* sections & glass cards */
.mk-section { padding:80px 24px; }
.mk-h2 { font-size:clamp(26px, 3.6vw, 40px); font-weight:800; letter-spacing:-.03em; text-align:center; max-width:720px; margin:14px auto 0; line-height:1.15; }
.mk-sub { text-align:center; color:var(--ink-2); max-width:600px; margin:16px auto 52px; font-size:16px; line-height:1.65; }
.mk-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.mk-card { border-radius:22px; padding:30px 28px;
  background:linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.52));
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 30px rgba(13,38,76,.08);
  transition:transform .22s ease, box-shadow .22s ease; }
[data-theme="dark"] .mk-card { background:linear-gradient(150deg, rgba(22,34,56,.74), rgba(15,24,40,.52)); border-color:rgba(148,178,255,.13); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.mk-card:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(13,38,76,.14); }
.mk-card h3 { font-size:17px; margin-bottom:9px; letter-spacing:-.01em; }
.mk-card p { font-size:13.8px; color:var(--ink-2); line-height:1.66; }
.mk-card-ic { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.mk-card-ic svg { width:22px; height:22px; }
.mk-tint-brand { background:rgba(11,107,234,.12); color:var(--brand-600); }
.mk-tint-ok { background:rgba(16,185,129,.14); color:var(--ok); }
.mk-tint-info { background:rgba(14,165,233,.13); color:var(--info); }
.mk-tint-warn { background:rgba(234,179,8,.16); color:var(--warn); }
.mk-more { text-align:center; margin-top:36px; }

/* module chip wall */
.mk-chipwall { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:860px; margin:0 auto; }
.mk-mod { padding:9px 18px; border-radius:99px; font-size:13px; font-weight:600; color:var(--ink-2);
  background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
[data-theme="dark"] .mk-mod { background:rgba(20,32,54,.58); border-color:rgba(148,178,255,.14); }

/* steps */
.mk-steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.mk-step { border-radius:22px; padding:28px 26px;
  background:linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.52));
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 30px rgba(13,38,76,.08); }
[data-theme="dark"] .mk-step { background:linear-gradient(150deg, rgba(22,34,56,.74), rgba(15,24,40,.52)); border-color:rgba(148,178,255,.13); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.mk-step-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.mk-step-num { width:38px; height:38px; border-radius:13px; background:linear-gradient(135deg, #0B6BEA, #123567); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
.mk-step-ic { color:var(--ink-3); }
.mk-step-ic svg { width:22px; height:22px; }
.mk-step h3 { font-size:16px; margin-bottom:8px; }
.mk-step p { font-size:13.5px; color:var(--ink-2); line-height:1.6; }

/* CTA band */
.mk-band { display:flex; align-items:center; justify-content:space-between; gap:28px; border-radius:26px; padding:44px 46px;
  background:linear-gradient(120deg, rgba(11,107,234,.94), rgba(18,53,103,.96));
  color:#fff; box-shadow:0 22px 60px rgba(11,107,234,.28); flex-wrap:wrap; }
.mk-band h2 { font-size:clamp(22px, 3vw, 30px); letter-spacing:-.02em; color:#fff; }
.mk-band p { color:rgba(255,255,255,.85); margin-top:8px; max-width:520px; font-size:14.5px; line-height:1.6; }
.mk-band-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.mk-band .btn { background:#fff; color:#0B2E5E; border:1px solid #fff; }
.mk-band .btn:hover { background:#F2F6FF; }
.mk-band .btn-ghost { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); }
.mk-band .btn-ghost:hover { background:rgba(255,255,255,.22); }

/* features page */
.mk-group-head { display:flex; align-items:center; gap:13px; margin-bottom:24px; }
.mk-group-ic { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:rgba(11,107,234,.1); color:var(--brand-600); }
.mk-group-ic svg { width:20px; height:20px; }
.mk-group-head h2 { font-size:clamp(21px, 2.6vw, 28px); font-weight:800; letter-spacing:-.02em; }
.mk-two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mk-checklist { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:11px; }
.mk-checklist li { display:flex; gap:10px; align-items:flex-start; font-size:13.8px; color:var(--ink-2); line-height:1.5; }
.mk-checklist svg { width:16px; height:16px; color:var(--ok); flex:none; margin-top:2px; }

/* pricing */
.mk-pricing { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch; }
.mk-price { position:relative; display:flex; flex-direction:column; border-radius:24px; padding:34px 30px;
  background:linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.52));
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 30px rgba(13,38,76,.08); }
[data-theme="dark"] .mk-price { background:linear-gradient(150deg, rgba(22,34,56,.74), rgba(15,24,40,.52)); border-color:rgba(148,178,255,.13); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.mk-price.featured { border:1.5px solid rgba(11,107,234,.65); box-shadow:0 24px 60px rgba(11,107,234,.22); }
.mk-price-flag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--brand-600); color:#fff; font-size:11px; font-weight:700; border-radius:99px; padding:4px 14px; letter-spacing:.04em; }
.mk-price h3 { font-size:17px; }
.mk-price-amount { font-size:38px; font-weight:800; letter-spacing:-.03em; margin:14px 0 2px; }
.mk-price-amount small { font-size:13.5px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.mk-price-desc { font-size:13px; color:var(--ink-2); min-height:38px; line-height:1.5; }
.mk-price ul { list-style:none; margin:20px 0 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mk-price li { display:flex; gap:9px; font-size:13px; color:var(--ink-2); align-items:flex-start; line-height:1.5; }
.mk-price li svg { width:15px; height:15px; color:var(--ok); flex:none; margin-top:2px; }
.mk-notes { display:flex; flex-direction:column; gap:10px; max-width:780px; margin:34px auto 0; }
.mk-notes > div { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.55; padding:12px 16px; border-radius:14px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
[data-theme="dark"] .mk-notes > div { background:rgba(20,32,54,.55); border-color:rgba(148,178,255,.12); }
.mk-notes svg { width:15px; height:15px; color:var(--brand-600); flex:none; margin-top:1px; }

/* faq */
.mk-faqs { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.mk-faq { border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 6px 24px rgba(13,38,76,.06); }
[data-theme="dark"] .mk-faq { background:rgba(20,32,54,.6); border-color:rgba(148,178,255,.13); }
.mk-faq-q { display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; text-align:left; padding:20px 24px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; background:none; border:none; color:var(--ink); }
.mk-faq-chev svg { width:18px; height:18px; color:var(--ink-3); transition:transform .2s; }
.mk-faq.open .mk-faq-chev svg { transform:rotate(180deg); color:var(--brand-600); }
.mk-faq-a { display:none; padding:0 24px 20px; }
.mk-faq.open .mk-faq-a { display:block; }
.mk-faq-a p { font-size:14px; color:var(--ink-2); line-height:1.7; }

/* demo request page */
.mk-planpill { display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:8px 16px; border-radius:99px; font-size:13px; font-weight:600; background:rgba(16,185,129,.12); color:var(--ok); border:1px solid rgba(16,185,129,.35); }
.mk-planpill svg { width:15px; height:15px; }
.mk-demo-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; }
.mk-formcard { padding:36px; }
.mk-formcard-head h2 { font-size:24px; letter-spacing:-.02em; }
.mk-formcard-head p { font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.6; }
.mk-mods-lbl { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin:26px 0 10px; }
.mk-pickwall { display:flex; flex-wrap:wrap; gap:8px; }
.mk-pick { padding:7px 15px; border-radius:99px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--line-2); background:rgba(255,255,255,.55); color:var(--ink-2); font-family:inherit; }
[data-theme="dark"] .mk-pick { background:rgba(20,32,54,.5); }
.mk-pick.on { background:rgba(11,107,234,.12); border-color:rgba(11,107,234,.5); color:var(--brand-600); }
.mk-demo-side { display:flex; flex-direction:column; gap:18px; }
.mk-ol { margin:14px 0 0 18px; display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.mk-contact-chips { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.mk-contact-chip { display:flex; align-items:center; gap:13px; padding:12px 16px; border-radius:14px; text-decoration:none !important;
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--ink);
  transition:transform .15s, box-shadow .15s; }
[data-theme="dark"] .mk-contact-chip { background:rgba(20,32,54,.55); border-color:rgba(148,178,255,.14); }
.mk-contact-chip:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(13,38,76,.12); }
.mk-contact-chip svg { width:18px; height:18px; color:var(--brand-600); flex:none; }
.mk-contact-chip small { display:block; font-size:11px; color:var(--ink-3); font-weight:600; letter-spacing:.03em; }
.mk-contact-chip b { display:block; font-size:14px; font-weight:700; }
.mk-success { text-align:center; padding:30px 10px; }
.mk-success-ic { width:74px; height:74px; border-radius:50%; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; background:rgba(16,185,129,.14); color:var(--ok); }
.mk-success-ic svg { width:34px; height:34px; }
.mk-success h2 { font-size:26px; letter-spacing:-.02em; }
.mk-success > p { color:var(--ink-2); max-width:520px; margin:12px auto 0; line-height:1.65; font-size:14.5px; }
.mk-success-next { text-align:left; max-width:560px; margin:26px auto; padding:20px 24px; border-radius:16px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); }
[data-theme="dark"] .mk-success-next { background:rgba(20,32,54,.5); border-color:rgba(148,178,255,.12); }
.mk-success-next ol { margin:10px 0 0 18px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.mk-success-chips { max-width:480px; margin:0 auto 22px; }

/* footer */
.mk-foot { margin-top:44px; padding:56px 24px 30px; border-top:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.82));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
[data-theme="dark"] .mk-foot { background:linear-gradient(180deg, rgba(13,23,42,.5), rgba(13,23,42,.88)); }
.mk-foot-grid { display:grid; grid-template-columns:2fr 1fr 1.25fr 1fr; gap:36px; }
.mk-foot-brand p { font-size:13px; color:var(--ink-2); line-height:1.65; max-width:300px; margin-top:16px; }
.mk-foot-co { font-size:12px; color:var(--ink-3); margin-top:10px; }
.mk-foot h5 { font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-bottom:14px; font-weight:700; }
.mk-foot a { display:block; font-size:13px; color:var(--ink-2); padding:4px 0; text-decoration:none !important; }
.mk-foot a:hover { color:var(--brand-600); }
.mk-foot .mk-foot-contact a { display:flex; align-items:center; gap:9px; }
.mk-foot .mk-foot-contact a svg { width:15px; height:15px; color:var(--brand-600); flex:none; }
.mk-foot-hours { font-size:12px; color:var(--ink-3); padding:8px 0 0; display:block; }
.mk-foot-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--line-2); font-size:12px; color:var(--ink-3); }

/* ============================================================
   AUTH PAGES (split layout: photo panel + form)
   ============================================================ */
.auth-wrap { min-height:100vh; display:flex; }
.auth-side { flex:1.05; position:relative; overflow:hidden; display:flex; flex-direction:column; padding:48px 52px; color:#fff;
  background:#0C1B33 url('/assets/auth-side.jpg') center/cover no-repeat; }
.auth-side::before { content:''; position:absolute; inset:0; background:linear-gradient(205deg, rgba(9,20,40,.30) 0%, rgba(9,20,40,.70) 72%, rgba(6,14,28,.88) 100%); }
.auth-side > * { position:relative; z-index:1; }
.as-brand { display:flex; align-items:center; gap:12px; text-decoration:none !important; color:#fff; }
.as-brand img { width:44px; height:44px; background:#fff; border-radius:13px; padding:3px; }
.as-brand b { font-size:18px; letter-spacing:.01em; display:block; line-height:1.25; }
.as-brand span { display:block; font-size:10.5px; color:rgba(255,255,255,.78); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.auth-side h2 { color:#fff; font-size:clamp(24px, 3vw, 34px); letter-spacing:-.02em; margin-top:auto; line-height:1.2; max-width:430px; }
.as-points { margin:26px 0 34px; display:flex; flex-direction:column; gap:11px; max-width:440px; }
.as-point { display:flex; gap:11px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:13px; padding:11px 15px; }
.as-point svg { width:16px; height:16px; color:#7EB8FF; flex:none; }
.as-foot { font-size:11.5px; color:rgba(255,255,255,.62); }
.auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--bg); }
.auth-card { width:100%; max-width:430px; }
.auth-card .card { padding:32px; border-radius:20px; box-shadow:var(--shadow-lg); }
.auth-title { font-size:23px; font-weight:800; letter-spacing:-.02em; }
.auth-sub { font-size:13.5px; color:var(--ink-2); margin:6px 0 22px; }

/* ============================================================
   PORTAL (parent & student)
   ============================================================ */
.child-card { display:flex; gap:16px; align-items:center; padding:18px 20px; border:1.5px solid var(--line); border-radius:16px; background:var(--card); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.child-card:hover { border-color:var(--brand-400); box-shadow:var(--shadow); }
.child-card.on { border-color:var(--brand-600); background:var(--brand-50); }
[data-theme="dark"] .child-card.on { background:var(--brand-900); }

/* ============================================================
   PRINT
   ============================================================ */
.print-only { display:none; }
@media print {
  body { background:#fff !important; }
  .sidebar, .topbar, .bottomnav, #toasts, .no-print, .crumbs { display:none !important; }
  .main { margin:0 !important; }
  .content { padding:0 !important; max-width:none !important; }
  .card { box-shadow:none !important; border-color:#d5dbe5 !important; }
  .print-only { display:block !important; }
  .print-area { position:absolute; inset:0; padding:24px; background:#fff; z-index:9999; }
}
.receipt-doc { background:#fff; color:#111; max-width:640px; margin:0 auto; padding:34px 38px; border-radius:14px; }
.receipt-doc .rc-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--navy); padding-bottom:18px; margin-bottom:20px; }
.receipt-doc table { width:100%; border-collapse:collapse; font-size:13px; }
.receipt-doc td { padding:7px 4px; border-bottom:1px solid #E8ECF2; }
.receipt-doc td:last-child { text-align:right; font-weight:600; }
.receipt-doc .rc-total td { border-top:2.5px solid #111; border-bottom:none; font-weight:800; font-size:15px; padding-top:12px; }
.reportcard { background:#fff; color:#111; max-width:800px; margin:0 auto; padding:36px 40px; border-radius:14px; }
.reportcard table { width:100%; border-collapse:collapse; font-size:12.5px; }
.reportcard th { border:1px solid #c9d2e0; padding:7px 9px; background:#EEF2F8; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.reportcard td { border:1px solid #c9d2e0; padding:6.5px 9px; text-align:center; }
.reportcard td.l { text-align:left; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mk-cards { grid-template-columns: repeat(2, 1fr); }
  .mk-steps { grid-template-columns: repeat(2, 1fr); }
  .mk-demo-grid { grid-template-columns: 1fr; }
  .mk-price.featured { transform:none; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform:translateX(-100%); width:270px; box-shadow:none; }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .sb-backdrop { display:none; position:fixed; inset:0; background:rgba(9,19,36,.5); z-index:550; }
  .sb-backdrop.on { display:block; }
  .main { margin-left:0; }
  .mobile-only { display:inline-flex; }
  .content { padding:18px 16px 96px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mk-two { grid-template-columns: 1fr; }
  .mk-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .mk-nav { display:none; }
  .mk-head-cta .btn-ghost { display:none; }
  .mk-head { top:8px; }
  .auth-side { display:none; }
  .form-grid { grid-template-columns: 1fr; }
  .bottomnav { display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--line); z-index:700; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -4px 24px rgba(14,32,55,.08); }
  .bottomnav a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:600; color:var(--ink-3); padding:5px 10px; border-radius:10px; text-decoration:none !important; }
  .bottomnav a svg { width:20px; height:20px; }
  .bottomnav a.on { color:var(--brand-600); }
  .tb-hide-m { display:none !important; }
  .tbl-toolbar { flex-direction:column; align-items:stretch; }
  .searchbox { max-width:none; }
}
@media (max-width: 640px) {
  .mk-logo small { display:none; }
  .mk-logo img { width:30px; height:30px; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .mk-cards, .mk-cards--3, .mk-steps, .mk-pricing { grid-template-columns: 1fr; }
  .mk-hero { padding:72px 20px 46px; }
  .mk-hero--page { padding:56px 20px 22px; }
  .mk-section { padding:56px 20px; }
  .mk-stat { padding:4px 16px; }
  .mk-stat b { font-size:21px; }
  .mk-band { flex-direction:column; text-align:center; padding:34px 24px; }
  .mk-band p { margin-left:auto; margin-right:auto; }
  .mk-formcard { padding:26px 20px; }
  .mk-foot-grid { grid-template-columns: 1fr 1fr; }
  .mk-head-in { padding:8px 10px 8px 14px; gap:10px; }
  .modal-overlay { padding:0; align-items:stretch; }
  .modal { max-width:100% !important; border-radius:0; min-height:100vh; }
  .dl { grid-template-columns: 110px 1fr; }
  .wiz-steps { flex-wrap:wrap; gap:10px; }
  .wiz-step { flex:none; width:calc(50% - 5px); }
  .wiz-step::before { display:none; }
  .receipt-doc, .reportcard { padding:20px 16px; }
}
@media (max-width: 420px) {
  .bottomnav a span { display:none; }
}