/* =====================================================================
   Link Academy AMS — stylesheet (no build step)
   Visual identity follows the original AMS v6: glass cards, soft colour
   blobs, blue→violet brand, light + dark themes.  RTL/LTR via logical
   properties.  Mobile (<900px) behaves like an iOS app: bottom tab bar,
   large titles, bottom sheets, safe-area aware.
   ===================================================================== */
:root {
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --accent: #2562EA; --accent-h: #1D4ED8; --accent-l: rgba(37, 98, 234, .12); --accent-g: rgba(37, 98, 234, .3);
  --violet: #7C3AED; --purple: #8B5CF6; --info: #06B6D4;
  --ok: #10B981; --ok-l: rgba(16, 185, 129, .12);
  --warn: #F59E0B; --warn-l: rgba(245, 158, 11, .14);
  --err: #EF4444; --err-l: rgba(239, 68, 68, .1);
  --r: 16px; --rs: 11px; --rx: 7px;
  --side-w: 262px; --top-h: 64px; --tab-h: 58px;
  --t: .28s cubic-bezier(.4, 0, .2, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
[data-theme="light"], :root:not([data-theme]) {
  color-scheme: light;
  --bg: #EEF2F7; --fg: #0F172A; --fg2: #475569; --mt: #94A3B8;
  --card: rgba(255, 255, 255, .62); --card-s: rgba(255, 255, 255, .88); --solid: #FFFFFF;
  --gb: rgba(255, 255, 255, .6); --line: rgba(15, 23, 42, .07); --soft: rgba(15, 23, 42, .045);
  --input: rgba(255, 255, 255, .75); --hover: rgba(37, 98, 234, .05);
  --side: rgba(255, 255, 255, .55); --top: rgba(238, 242, 247, .72); --tabbar: rgba(248, 250, 252, .78);
  --sh: 0 4px 24px rgba(15, 23, 42, .06); --sh-lg: 0 24px 60px rgba(15, 23, 42, .18);
  --b1: rgba(37, 98, 234, .1); --b2: rgba(16, 185, 129, .08); --b3: rgba(245, 158, 11, .07); --b4: rgba(124, 58, 237, .06);
  --accent-t: #2562EA; --ok-t: #059669; --warn-t: #B45309; --err-t: #DC2626; --purple-t: #7C3AED;
  --banner-err: rgba(254, 242, 242, .85); --banner-err-b: #FECACA; --banner-err-t: #991B1B;
  --pinned: rgba(254, 243, 199, .55);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0F1E; --fg: #F1F5F9; --fg2: #A3B1C6; --mt: #64748B;
  --card: rgba(17, 25, 45, .62); --card-s: rgba(17, 25, 45, .9); --solid: #111A2E;
  --gb: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .07); --soft: rgba(255, 255, 255, .06);
  --input: rgba(30, 41, 59, .6); --hover: rgba(96, 140, 250, .08);
  --side: rgba(10, 15, 30, .72); --top: rgba(10, 15, 30, .72); --tabbar: rgba(12, 18, 34, .8);
  --sh: 0 4px 24px rgba(0, 0, 0, .3); --sh-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --b1: rgba(37, 98, 234, .16); --b2: rgba(16, 185, 129, .09); --b3: rgba(245, 158, 11, .06); --b4: rgba(124, 58, 237, .1);
  --accent-l: rgba(79, 125, 247, .16);
  --accent-t: #7AA2FF; --ok-t: #34D399; --warn-t: #FBBF24; --err-t: #F87171; --purple-t: #A78BFA;
  --banner-err: rgba(127, 29, 29, .22); --banner-err-b: rgba(248, 113, 113, .3); --banner-err-t: #FCA5A5;
  --pinned: rgba(245, 158, 11, .08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent }
body { font-family: var(--font); background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.55; min-height: 100vh; overflow-x: hidden; transition: background var(--t), color var(--t) }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
svg.i { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
[x-cloak] { display: none !important }
::-webkit-scrollbar { width: 7px; height: 7px } ::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--mt); border-radius: 4px; opacity: .6 }
::selection { background: var(--accent-g) }

/* ---------- background blobs (from the original) ---------- */
.bg-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden }
.bg-blobs i { position: absolute; border-radius: 50%; filter: blur(80px); animation: blob 22s ease-in-out infinite alternate }
.bg-blobs i:nth-child(1) { width: 620px; height: 620px; background: var(--b1); top: -12%; inset-inline-start: -6% }
.bg-blobs i:nth-child(2) { width: 520px; height: 520px; background: var(--b2); bottom: -16%; inset-inline-end: -6%; animation-delay: -7s }
.bg-blobs i:nth-child(3) { width: 420px; height: 420px; background: var(--b3); top: 38%; left: 48%; animation-delay: -14s }
.bg-blobs i:nth-child(4) { width: 380px; height: 380px; background: var(--b4); top: 8%; inset-inline-end: 18%; animation-delay: -4s }
@keyframes blob { 0% { transform: translate(0, 0) scale(1) } 50% { transform: translate(30px, -40px) scale(1.06) } 100% { transform: translate(-20px, 20px) scale(.96) } }
@media (prefers-reduced-motion: reduce) { .bg-blobs i { animation: none } }

/* ---------- glass helpers ---------- */
.card, .glass { background: var(--card); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--gb); border-radius: var(--r); box-shadow: var(--sh); transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t) }

/* ---------- layout ---------- */
.shell { display: flex; min-height: 100vh }
.sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side-w); background: var(--side); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); border-inline-end: 1px solid var(--gb); display: flex; flex-direction: column; z-index: 40; transition: transform var(--t), background var(--t) }
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 22px 18px; border-bottom: 1px solid var(--line) }
.brand-logo { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--accent), var(--violet)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px; box-shadow: 0 6px 18px rgba(79, 70, 229, .35); flex-shrink: 0 }
.brand-name { font-weight: 800; color: var(--fg); font-size: 17px; line-height: 1.2; letter-spacing: -.2px }
.brand-sub { font-size: 11px; color: var(--mt); letter-spacing: .4px }
.nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px }
.nav-label { font-size: 10.5px; font-weight: 700; color: var(--mt); padding: 16px 12px 7px; text-transform: uppercase; letter-spacing: 1.3px }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--rs); color: var(--fg2); font-weight: 500; margin-bottom: 2px; position: relative; transition: background var(--t), color var(--t) }
.nav a:hover { background: var(--hover); color: var(--accent-t) }
.nav a.active { background: var(--accent-l); color: var(--accent-t); font-weight: 600 }
.nav a.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 3px; background: var(--accent) }
.nav a .soon { margin-inline-start: auto; font-size: 10px; background: var(--soft); color: var(--mt); padding: 1px 8px; border-radius: 20px }
.nav a .count { margin-inline-start: auto; font-size: 11px; font-weight: 700; background: var(--err); color: #fff; padding: 1px 8px; border-radius: 20px; min-width: 22px; text-align: center }
.side-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px }
.side-foot .avatar { border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--info)); color: #fff }
.side-foot .sf-name { font-weight: 600; font-size: 13px; line-height: 1.25 }
.side-foot .sf-role { font-size: 11px; color: var(--mt) }
.side-foot form { margin-inline-start: auto }
.sheet-grab { display: none }
.main { flex: 1; margin-inline-start: var(--side-w); min-width: 0; display: flex; flex-direction: column }
.topbar { height: var(--top-h); background: var(--top); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border-bottom: 1px solid var(--gb); display: flex; align-items: center; gap: 10px; padding: 0 28px; position: sticky; top: 0; z-index: 30; transition: background var(--t) }
.topbar h1 { font-size: 18px; font-weight: 700; letter-spacing: -.2px; transition: opacity var(--t) }
.topbar .spacer { flex: 1 }
.hamburger { display: none }
.content { padding: 28px; max-width: 1440px; width: 100%; margin: 0 auto; animation: fu .35s ease }
@keyframes fu { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.overlay { display: none }
.tabbar { display: none }

/* ---------- top actions ---------- */
.tb-btn, .bell { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gb); border-radius: var(--rs); background: var(--card); color: var(--fg2); cursor: pointer; transition: all var(--t); flex-shrink: 0 }
.tb-btn:hover, .bell:hover { background: var(--accent-l); color: var(--accent-t); border-color: var(--accent) }
.theme-ic-dark { display: none } [data-theme="dark"] .theme-ic-dark { display: block } [data-theme="dark"] .theme-ic-light { display: none }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border: 1px solid var(--gb); border-radius: var(--rs); background: var(--card); font-weight: 500; font-size: 13px; cursor: pointer; color: var(--fg2); transition: all var(--t) }
.lang-btn:hover { border-color: var(--accent); color: var(--accent-t) }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 4px; padding-inline-end: 12px; height: 40px; border-radius: var(--rs); border: 1px solid var(--gb); background: var(--card); cursor: pointer }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-l); color: var(--accent-t); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0 }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; border-radius: 13px }
.avatar.c { color: #fff }
.user-btn .avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--info)); color: #fff; font-size: 12px }
.user-btn .u-name { font-weight: 600; font-size: 13px; line-height: 1.2 }
.user-btn .u-role { font-size: 11px; color: var(--mt) }
.dropdown { position: relative }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); background: var(--card-s); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border: 1px solid var(--gb); border-radius: var(--r); box-shadow: var(--sh-lg); min-width: 230px; padding: 6px; z-index: 50 }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; background: none; border: 0; cursor: pointer; text-align: start; font-size: 13.5px; color: var(--fg) }
.menu a:hover, .menu button:hover { background: var(--hover) }
.menu .danger { color: var(--err-t) }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0 }

/* ---------- cards / grid ---------- */
.card-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line) }
.card-h > svg.i { color: var(--accent-t) }
.card-h h2, .card-h h3 { font-size: 15px; font-weight: 700 }
.card-h .spacer { flex: 1 }
.card-b { padding: 20px }
.grid { display: grid; gap: 20px }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
/* KPI cards — like the original: icon tile, big number, label, soft bubble */
.stat { padding: 22px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; --c: var(--accent) }
.stat::after { content: ''; position: absolute; top: -34px; inset-inline-end: -34px; width: 110px; height: 110px; border-radius: 50%; background: var(--c); opacity: .08; transition: transform var(--t) }
a.stat:hover { transform: translateY(-3px) } a.stat:hover::after { transform: scale(1.15) }
.stat-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px }
.stat-ic svg.i { width: 21px; height: 21px }
.stat-v { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px }
.stat-l { color: var(--fg2); font-size: 13px }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap }
.page-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.3px }
.page-head p { color: var(--fg2); font-size: 13px }
.page-head .spacer { flex: 1 }
.mb { margin-bottom: 20px }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 17px; border-radius: var(--rs); border: 1px solid transparent; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: all var(--t); white-space: nowrap; line-height: 1.3 }
.btn:active { transform: scale(.97) }
.btn-p { background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--accent-g) } .btn-p:hover { background: var(--accent-h) }
.btn-o { background: var(--card); border-color: var(--gb); color: var(--fg2) } .btn-o:hover { border-color: var(--accent); color: var(--accent-t) }
[data-theme="light"] .btn-o { background: rgba(255, 255, 255, .7); border-color: rgba(15, 23, 42, .08) }
.btn-d { background: var(--err-l); color: var(--err-t) } .btn-d:hover { background: var(--err); color: #fff }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37, 211, 102, .28) } .btn-wa:hover { background: #1DA851 }
.btn-ok { background: var(--ok); color: #fff; box-shadow: 0 4px 14px rgba(16, 185, 129, .28) } .btn-ok:hover { background: #059669 }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px }
.btn-ic { padding: 7px; border-radius: 9px }
.btn-block { width: 100% }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none }

/* ---------- forms ---------- */
.field { margin-bottom: 16px }
.field label, .lbl { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; color: var(--fg) }
.field .hint { font-size: 12px; color: var(--mt); margin-top: 5px }
.input, select.input, textarea.input { width: 100%; padding: 10px 14px; border: 1px solid var(--gb); border-radius: var(--rs); background: var(--input); outline: none; transition: border var(--t), box-shadow var(--t), background var(--t); font-size: 14px; color: var(--fg) }
[data-theme="light"] .input { border-color: rgba(15, 23, 42, .1) }
.input::placeholder { color: var(--mt) }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l) }
.input.is-invalid { border-color: var(--err) }
select.input option { background: var(--solid); color: var(--fg) }
.err { color: var(--err-t); font-size: 12px; margin-top: 5px }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none }
.check input, input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0 }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px }
.search { position: relative }
.search svg.i { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--mt); width: 16px; height: 16px; pointer-events: none }
.search .input { padding-inline-start: 38px; min-width: 260px }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto }
table.tbl { width: 100%; border-collapse: collapse }
.tbl th { text-align: start; font-size: 11px; font-weight: 700; color: var(--mt); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; text-transform: uppercase; letter-spacing: .8px }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle }
.tbl tr:last-child td { border-bottom: 0 }
.tbl tbody tr { transition: background var(--t) } .tbl tbody tr:hover { background: var(--hover) }
.tbl .actions { display: flex; gap: 6px; justify-content: flex-end }
.cell-user { display: flex; align-items: center; gap: 10px }
.cell-user small { display: block; color: var(--mt); font-size: 12px }
.muted { color: var(--mt) } .small { font-size: 12px }
.ltr { direction: ltr; unicode-bidi: embed }

/* ---------- badges / pills / alerts ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap }
.b-ok { background: var(--ok-l); color: var(--ok-t) } .b-err { background: var(--err-l); color: var(--err-t) } .b-warn { background: var(--warn-l); color: var(--warn-t) }
.b-info { background: var(--accent-l); color: var(--accent-t) } .b-mt { background: var(--soft); color: var(--fg2) } .b-purple { background: rgba(139, 92, 246, .13); color: var(--purple-t) }
.badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 500; background: var(--card); border: 1px solid var(--gb); color: var(--fg2); white-space: nowrap }
[data-theme="light"] .pill { background: rgba(255, 255, 255, .8); border-color: rgba(15, 23, 42, .07) }
.pill svg.i { width: 13px; height: 13px }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--rs); margin-bottom: 18px; font-size: 13.5px; border: 1px solid transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) }
.alert-ok { background: var(--ok-l); color: var(--ok-t); border-color: rgba(16, 185, 129, .25) }
.alert-err { background: var(--err-l); color: var(--err-t); border-color: rgba(239, 68, 68, .25) }
.alert-warn { background: var(--warn-l); color: var(--warn-t); border-color: rgba(245, 158, 11, .3) }
.alert-info { background: var(--accent-l); color: var(--accent-t); border-color: rgba(37, 98, 234, .2) }
.cred { font-family: ui-monospace, Menlo, monospace; background: var(--solid); color: var(--fg); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); direction: ltr; display: inline-block }
.empty { text-align: center; padding: 50px 20px; color: var(--mt) }
.empty svg.i { width: 44px; height: 44px; margin-bottom: 10px; stroke-width: 1.5 }

/* ---------- permissions ---------- */
.perm-group { border: 1px solid var(--line); border-radius: var(--rs); padding: 14px 16px; margin-bottom: 12px; background: var(--soft) }
.perm-group-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 700 }
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px }
.perm-list .check { font-size: 13px; color: var(--fg2) }
.progress { height: 6px; background: var(--soft); border-radius: 6px; overflow: hidden; min-width: 90px }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 6px }

/* ---------- activity feed ---------- */
.feed { list-style: none }
.feed li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.feed li:last-child { border-bottom: 0 }
.feed .dot { width: 34px; height: 34px; border-radius: 11px; background: var(--accent-l); color: var(--accent-t); display: grid; place-items: center; flex-shrink: 0 }
.feed .dot svg.i { width: 15px; height: 15px }
.feed .dot.done { background: var(--ok-l); color: var(--ok-t) } .feed .dot.todo { background: var(--soft); color: var(--mt) }
.feed .when { font-size: 12px; color: var(--mt) }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr }
.auth-side { background: linear-gradient(145deg, #0B1224 0%, #1E3A8A 55%, var(--violet) 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; position: relative; overflow: hidden }
.auth-side::after { content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(96, 165, 250, .35), transparent 70%); inset-block-end: -170px; inset-inline-end: -170px }
.auth-side .brand-name { color: #fff }
.auth-side h2 { font-size: 34px; font-weight: 800; line-height: 1.3; margin-top: auto; max-width: 460px; letter-spacing: -.3px }
.auth-side p { color: #BFDBFE; margin-top: 14px; max-width: 440px; font-size: 15px }
.auth-feats { display: flex; gap: 22px; margin-top: 34px; margin-bottom: auto; flex-wrap: wrap; position: relative; z-index: 1 }
.auth-feats div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #DBEAFE }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative }
.auth-box { width: 100%; max-width: 400px; padding: 34px 30px }
.auth-box h1 { font-size: 25px; font-weight: 800; letter-spacing: -.3px }
.auth-box .sub { color: var(--fg2); margin: 6px 0 26px }
.auth-top { position: absolute; top: calc(20px + var(--safe-t)); inset-inline-end: 24px; display: flex; gap: 8px }
.auth-mlogo { display: none }
.pw-wrap { position: relative }
.pw-wrap .input { padding-inline-end: 44px }
.pw-toggle { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--mt); padding: 6px }

/* ---------- pagination ---------- */
.pager { display: flex; align-items: center; gap: 6px; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap }
.pager .pages { display: flex; gap: 4px; flex-wrap: wrap }
.pager a, .pager span.pg { min-width: 36px; height: 36px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--gb); font-size: 13px; background: var(--card) }
.pager a:hover { border-color: var(--accent); color: var(--accent-t) }
.pager .cur { background: var(--accent); color: #fff; border-color: var(--accent) }
.pager .dis { color: var(--mt); opacity: .6 }

[dir="rtl"] .flip { transform: scaleX(-1) }

/* ---------- impersonation bar ---------- */
.imp-bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #6D28D9, var(--violet)); color: #fff; padding: 10px 28px; font-weight: 500; font-size: 13.5px; flex-wrap: wrap; position: relative; z-index: 2 }
.imp-bar form { margin-inline-start: auto }
.imp-bar .btn { background: #fff; color: #6D28D9; box-shadow: none }

/* ---------- per-user permission overrides ---------- */
.ovr-list { display: grid; gap: 6px }
.ovr-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.ovr-row:last-child { border-bottom: 0 }
.ovr-name { font-size: 13px; color: var(--fg2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.seg, .seg2 { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; gap: 2px; flex-shrink: 0 }
.seg label, .seg2 label { cursor: pointer } .seg input, .seg2 input { display: none }
.seg span { display: block; padding: 5px 12px; font-size: 12px; color: var(--fg2); border-radius: 8px; transition: all var(--t) }
.seg-inherit input:checked + span { background: var(--solid); color: var(--fg); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .1) }
.seg-grant input:checked + span { background: var(--ok); color: #fff; font-weight: 600 }
.seg-deny input:checked + span { background: var(--err); color: #fff; font-weight: 600 }
.seg2 span { display: flex; gap: 5px; align-items: center; padding: 7px 12px; font-size: 12.5px; color: var(--fg2); border-radius: 8px; transition: all var(--t) }
.seg2 input:checked + span { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 2px 8px var(--accent-g) }
.seg2 svg.i { width: 14px; height: 14px }

/* ---------- toolbar / chips ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.toolbar .input { width: auto; min-width: 0; padding: 8px 12px; font-size: 13px }
.toolbar .search { flex: 1 1 240px } .toolbar .search .input { width: 100%; min-width: 0; padding-inline-start: 38px }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 30px; border: 1px solid var(--gb); background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: all var(--t) }
[data-theme="light"] .chip { background: rgba(255, 255, 255, .7); border-color: rgba(15, 23, 42, .07) }
.chip:hover { color: var(--accent-t); border-color: var(--accent) }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px var(--accent-g) }
.chip .n { background: var(--soft); border-radius: 20px; padding: 0 7px; font-size: 11.5px }
.chip.on .n { background: rgba(255, 255, 255, .22) }

/* ---------- customer list ---------- */
.clist { display: flex; flex-direction: column }
.crow { display: grid; grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); position: relative; transition: background var(--t) }
.crow:hover { background: var(--hover) }
.crow:last-child { border-bottom: 0 }
.crow .cname { font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.crow .cname a:hover { color: var(--accent-t) }
.crow .cname a::after { content: ''; position: absolute; inset: 0; z-index: 0 }
.crow .cpick input, .crow .btn, .crow a.btn { position: relative; z-index: 1 }
.crow .csub { font-size: 12px; color: var(--mt); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px }
.crow .cbadges { display: flex; gap: 5px; flex-wrap: wrap }
.crow .cowner { font-size: 12.5px; color: var(--fg2) }
.crow .cpick { display: flex; align-items: center; gap: 12px }
.crow .chev { display: none }
.head-row { font-size: 11px; font-weight: 700; color: var(--mt); padding-block: 11px; text-transform: uppercase; letter-spacing: .8px }
.head-row:hover { background: none }
.bulkbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--accent-l); border-bottom: 1px solid var(--line); font-size: 13px }
.bulkbar .input { width: auto; padding: 7px 10px }

/* ---------- profile hero (from the original) ---------- */
.phero { padding: 26px; position: relative; overflow: hidden }
.phero::after { content: ''; position: absolute; top: -60px; inset-inline-end: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--accent-l); pointer-events: none }
.phead { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1 }
.p-avatar { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 28px; flex-shrink: 0; box-shadow: 0 10px 24px rgba(15, 23, 42, .16); letter-spacing: .5px }
.phead h2 { font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.phead .alt { color: var(--fg2); font-size: 14px; margin-top: 2px }
.pmeta { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--fg2) }
.pmeta span { display: inline-flex; gap: 5px; align-items: center }
.pmeta svg.i { width: 15px; height: 15px; color: var(--mt) }
.pstats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px }
.pstat { text-align: center; padding: 8px 14px; border-radius: var(--rs); background: var(--card); border: 1px solid var(--gb); min-width: 84px }
[data-theme="light"] .pstat { background: rgba(255, 255, 255, .75); border-color: rgba(15, 23, 42, .06) }
.pstat b { display: block; font-size: 21px; font-weight: 800; line-height: 1.2 }
.pstat span { font-size: 11px; color: var(--mt) }
.pactions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; align-self: flex-end; justify-content: flex-end }
.p-edit { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--fg2); z-index: 2; transition: all var(--t) }
.p-edit:hover { background: var(--accent-l); color: var(--accent-t) }
.p-quick { display: none }
.m-back, .m-only { display: none }
.side-foot .lang-mini { width: 34px; height: 34px }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r); margin-bottom: 18px; font-size: 13.5px }
.banner-err { background: var(--banner-err); border: 1px solid var(--banner-err-b); color: var(--banner-err-t); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) }
.banner-err strong { color: inherit; font-weight: 700 }
.banner svg.i { width: 22px; height: 22px; flex-shrink: 0 }
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line) }
.counters div { padding: 12px 10px; text-align: center; border-inline-start: 1px solid var(--line) }
.counters div:first-child { border-inline-start: 0 }
.counters b { display: block; font-size: 20px; line-height: 1.2 }
.counters span { font-size: 12px; color: var(--fg2) }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tabs a { padding: 11px 18px; font-weight: 600; color: var(--fg2); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; transition: all var(--t); font-size: 13.5px }
.tabs a:hover { color: var(--accent-t) }
.tabs a.on { color: var(--accent-t); border-bottom-color: var(--accent) }
.tabs a .n { background: var(--soft); border-radius: 20px; padding: 0 7px; font-size: 11.5px }
.tabs a.on .n { background: var(--accent-l) }
.side-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start }
.kv { display: grid; gap: 10px }
.kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 9px }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0 }
.kv dt, .kv .k { color: var(--mt) } .kv .v { font-weight: 600; text-align: end; overflow-wrap: anywhere }
.contact { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line) }
.contact:last-child { border-bottom: 0 }
.contact .cv { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; font-weight: 500 }
.contact .cv small { display: block; font-size: 11.5px; color: var(--mt); font-weight: 400 }
.contact .ci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-l); color: var(--accent-t); flex-shrink: 0 }
.contact .ci.wa { background: rgba(37, 211, 102, .14); color: #16A34A }
.contact .ci svg.i { width: 16px; height: 16px }

/* ---------- course relationship cards (from the original) ---------- */
.sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap }
.sec-h h3 { font-size: 15px; font-weight: 700; display: flex; gap: 8px; align-items: center }
.sec-h h3 svg.i { color: var(--accent-t) }
.sec-h .spacer { flex: 1 }
.crel { display: flex; gap: 16px; padding: 18px; margin-bottom: 12px; position: relative; overflow: hidden; --c: var(--accent) }
.crel::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 110px; height: 110px; border-radius: 50%; background: var(--c); opacity: .09; pointer-events: none }
.crel-bar { width: 5px; align-self: stretch; border-radius: 4px; background: var(--c); flex-shrink: 0 }
.crel-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--c); flex-shrink: 0; box-shadow: 0 6px 16px rgba(15, 23, 42, .15) }
.crel-ic svg.i { width: 21px; height: 21px }
.crel-body { flex: 1; min-width: 0; position: relative; z-index: 1 }
.crel-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.crel-top .t { font-weight: 800; font-size: 15.5px; letter-spacing: -.2px }
.crel-top .sp { flex: 1 }
.crel-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.crel-alert { margin-top: 12px; padding: 9px 12px; border-radius: var(--rs); font-size: 12.5px; border: 1px dashed var(--gb); background: var(--input); color: var(--fg2); display: flex; gap: 8px; align-items: center }
.crel-alert svg.i { width: 15px; height: 15px; flex-shrink: 0 }
.crel-alert.warn { border-color: rgba(245, 158, 11, .45); background: var(--warn-l); color: var(--warn-t) }
.crel-alert.err { border-color: rgba(239, 68, 68, .4); background: var(--err-l); color: var(--err-t) }
.crel-alert.info { border-color: rgba(6, 182, 212, .4); background: rgba(6, 182, 212, .08); color: #0891B2 }
[data-theme="dark"] .crel-alert.info { color: #67E8F9 }
.crel-alert.ok { border-color: rgba(16, 185, 129, .4); background: var(--ok-l); color: var(--ok-t) }
.crel.slot-card { border-style: dashed; border-width: 1.5px; border-color: var(--mt); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; align-items: center; color: var(--fg2); --c: var(--mt) }
.crel.slot-card .crel-ic { background: var(--soft); color: var(--mt); box-shadow: none }
.enr-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px }
.steps { display: flex; margin-top: 14px; gap: 4px }
.steps .s { flex: 1; text-align: center; font-size: 10.5px; color: var(--mt); position: relative; padding-top: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.steps .s::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 6px; border-radius: 4px; background: var(--soft) }
.steps .s.done::before { background: var(--ok) }
.steps .s.cur::before { background: linear-gradient(90deg, var(--accent), var(--violet)) }
.steps .s.cur { color: var(--accent-t); font-weight: 700 }
.steps .s.done { color: var(--ok-t) }
.steps .s.soon { opacity: .55 }
/* legacy rows kept for other pages */
.enr { padding: 14px 16px; border-bottom: 1px solid var(--line) }
.enr:last-child { border-bottom: 0 }
.enr-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.enr-top .t { font-weight: 600; font-size: 14.5px }
.enr-top .sp { flex: 1 }
.enr-meta { font-size: 12px; color: var(--mt); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap }
.res-card { margin-bottom: 16px; overflow: hidden }
.res-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--soft) }
.res-h .code { font-weight: 800 }
.slot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--mt); font-size: 13px }
.note { padding: 14px 18px; border-bottom: 1px solid var(--line) }
.note:last-child { border-bottom: 0 }
.note.pinned { background: var(--pinned) }
.note-h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--mt); margin-bottom: 6px }
.note-b { white-space: pre-wrap; font-size: 13.5px; overflow-wrap: anywhere }

/* ---------- forms (phase 2) ---------- */
.rows-list { display: grid; gap: 8px }
.row-line { display: flex; gap: 8px; align-items: center }
.row-line .input { min-width: 0 }
.row-line select.input { width: 130px; flex-shrink: 0 }
.sec-t { font-size: 14px; font-weight: 700; margin: 6px 0 12px; display: flex; gap: 8px; align-items: center }
.sec-t svg.i { color: var(--accent-t) }
.divider { border-top: 1px solid var(--line); margin: 6px -20px 18px }
.pay-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.pay-opts label { border: 1px solid var(--gb); background: var(--input); border-radius: var(--rs); padding: 11px; text-align: center; cursor: pointer; font-weight: 600; font-size: 13px; transition: all var(--t) }
[data-theme="light"] .pay-opts label { border-color: rgba(15, 23, 42, .1) }
.pay-opts input { display: none }
.pay-opts label:has(input:checked) { border-color: var(--accent); background: var(--accent-l); color: var(--accent-t) }
.pay-opts label.p-partial:has(input:checked) { border-color: var(--warn); background: var(--warn-l); color: var(--warn-t) }
.pay-opts label.p-unpaid:has(input:checked) { border-color: var(--err); background: var(--err-l); color: var(--err-t) }
.warnbox { background: var(--warn-l); color: var(--warn-t); border-radius: var(--rs); padding: 10px 12px; font-size: 12.5px; margin-top: 8px; display: flex; gap: 8px }
.warnbox.info { background: var(--accent-l); color: var(--accent-t) }
.warnbox svg.i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px }
.modal { background: var(--card-s); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); border: 1px solid var(--gb); border-radius: 20px; width: 100%; max-width: 470px; max-height: 90vh; overflow: auto; box-shadow: var(--sh-lg); animation: mi .3s cubic-bezier(.2, .9, .3, 1.1) }
[data-theme="light"] .modal { background: rgba(255, 255, 255, .92) }
@keyframes mi { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
.modal-h { padding: 17px 22px; border-bottom: 1px solid var(--line); font-weight: 700; display: flex; align-items: center; gap: 10px }
.modal-h > svg.i { color: var(--accent-t) }
.modal-h button { margin-inline-start: auto; background: var(--soft); border: 0; cursor: pointer; color: var(--fg2); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center }
.modal-h button svg.i { width: 16px; height: 16px }
.modal-b { padding: 18px 22px }
.modal-f { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }

/* ---------- delivery queue ---------- */
.q-item { padding: 15px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; transition: background var(--t) }
.q-item:hover { background: var(--hover) }
.q-item:last-child { border-bottom: 0 }
.q-courses { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px }
.q-age { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--soft); color: var(--fg2); white-space: nowrap }
.q-age.old { background: var(--err-l); color: var(--err-t) }
.q-age.mid { background: var(--warn-l); color: var(--warn-t) }
.q-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }

/* ---------- notifications bell ---------- */
.bell .dot-n { position: absolute; top: -5px; inset-inline-end: -5px; background: var(--err); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg) }
.menu.notif { width: 350px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden }
.notif-h { display: flex; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); font-weight: 700 }
.notif-h form { margin-inline-start: auto } .notif-h button { font-size: 12px; color: var(--accent-t); background: none; border: 0; cursor: pointer; width: auto; padding: 0 }
.n-item { display: flex !important; gap: 11px; padding: 12px 15px !important; border-radius: 0 !important; border-bottom: 1px solid var(--line); align-items: flex-start !important }
.n-item.unread { background: var(--accent-l) }
.n-item .ni { width: 34px; height: 34px; border-radius: 11px; background: var(--accent-l); color: var(--accent-t); display: grid; place-items: center; flex-shrink: 0 }
.n-item .ni svg.i { width: 15px; height: 15px }
.n-item .nt { font-weight: 500; font-size: 13px; line-height: 1.4 }
.n-item .nb { font-size: 12px; color: var(--fg2); margin-top: 2px }
.n-item .nw { font-size: 11px; color: var(--mt); margin-top: 3px }
.notif-f { display: block !important; text-align: center; padding: 11px !important; font-size: 12.5px !important; color: var(--accent-t) !important; justify-content: center !important }

/* ============================ responsive ============================ */
@media (max-width: 1200px) { .side-grid { grid-template-columns: 1fr } }
@media (max-width: 1100px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ---------------- phone / small tablet: the "app" layout ---------------- */
@media (max-width: 900px) {
  :root { --top-h: 52px; --r: 18px }
  body { font-size: 15px; background: var(--bg) }
  .bg-blobs i { filter: blur(60px); opacity: .9 }
  .main { margin-inline-start: 0 }

  /* nav bar */
  .topbar { height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 14px 0; gap: 8px; border-bottom-color: transparent }
  body.scrolled .topbar { border-bottom-color: var(--line) }
  .topbar h1 { font-size: 17px; font-weight: 700; position: absolute; inset-inline: 100px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 14px; pointer-events: none }
  .m-back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-t); font-weight: 500; font-size: 16px; margin-inline-start: -6px; max-width: 96px; white-space: nowrap; overflow: hidden }
  .m-back svg.i { width: 24px; height: 24px; stroke-width: 2.4 }
  .m-only { display: revert }
  .toolbar .m-only { display: inline-flex }
  .filters-closed > select.input { display: none }
  .clist:not(.selecting) .cpick input { display: none }
  body:has(.page-head) .topbar h1 { opacity: 0 }
  body.scrolled:has(.page-head) .topbar h1 { opacity: 1 }
  .tb-btn, .bell, .lang-btn { width: 38px; height: 38px; border-radius: 50%; padding: 0; justify-content: center }
  .lang-btn .lt, .user-btn .u-meta { display: none }
  .user-btn { padding: 0; height: 38px; width: 38px; border-radius: 50%; justify-content: center; border: 0; background: none }
  .user-btn .avatar { width: 34px; height: 34px; border-radius: 50% }
  .top-desk { display: none !important }

  /* large title */
  .content { padding: 6px 16px calc(var(--tab-h) + var(--safe-b) + 24px) }
  .page-head { margin-bottom: 16px }
  .page-head h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.6px }
  .page-head .btn-p { position: fixed; bottom: calc(var(--tab-h) + var(--safe-b) + 16px); inset-inline-end: 16px; z-index: 35; border-radius: 30px; padding: 13px 20px; box-shadow: 0 10px 30px var(--accent-g) }

  /* bottom tab bar */
  .tabbar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 45; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--tabbar); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border-top: 1px solid var(--line) }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--mt); background: none; border: 0; cursor: pointer; position: relative; transition: color .15s }
  .tabbar svg.i { width: 24px; height: 24px; stroke-width: 1.8 }
  .tabbar .on { color: var(--accent-t) }
  .tabbar .on svg.i { stroke-width: 2.3 }
  .tabbar .tb-n { position: absolute; top: 5px; inset-inline-start: calc(50% + 6px); background: var(--err); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px }

  /* "More" = sidebar as a bottom sheet */
  .sidebar { inset: auto 0 0 0; width: auto; max-height: 86vh; border-radius: 24px 24px 0 0; border: 1px solid var(--gb); transform: translateY(105%) !important; transition: transform .38s cubic-bezier(.2, .9, .3, 1); background: var(--card-s); padding-bottom: var(--safe-b); z-index: 60; box-shadow: var(--sh-lg) }
  [data-theme="light"] .sidebar { background: rgba(248, 250, 252, .94) }
  .side-open .sidebar { transform: none !important }
  .side-open .overlay { display: block; position: fixed; inset: 0; background: rgba(2, 6, 23, .45); z-index: 55; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px) }
  .sheet-grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--mt); opacity: .5; margin: 8px auto 0 }
  .brand { padding: 12px 20px 14px }
  .nav { padding: 4px 14px 10px }
  .nav-label { padding: 14px 8px 6px }
  .nav a { padding: 12px 14px; font-size: 15px; background: var(--card); margin-bottom: 1px; border-radius: 0 }
  .nav-label + a, .nav > a:first-child { border-radius: 13px 13px 0 0 }
  .nav a:has(+ .nav-label), .nav a:last-child { border-radius: 0 0 13px 13px; margin-bottom: 0 }
  .nav-label + a:has(+ .nav-label), .nav-label + a:last-child { border-radius: 13px }
  .nav a.active::before { display: none }

  /* cards & lists: iOS inset-grouped look */
  .card { border-radius: var(--r) }
  .grid { gap: 12px }
  .g-2 { grid-template-columns: 1fr }
  .card-h { padding: 14px 16px } .card-b { padding: 16px }
  .toolbar { padding: 12px }
  .toolbar .search { flex-basis: 100% }
  .toolbar > select.input { flex: 1 1 45% }
  .toolbar > .btn-o[type="submit"] { display: none }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px }
  .chips::-webkit-scrollbar { display: none }
  .mb.chips { margin-inline: -16px; padding-inline: 16px }

  .crow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px }
  .crow .c-col { grid-column: 2; grid-row: auto }
  .crow .c-col.small { display: none !important }
  .crow .cowner { font-size: 12px }
  .crow .cowner .badge { background: none; padding: 0; color: var(--mt); font-weight: 500 }
  .crow .chev { display: block; grid-column: 3; grid-row: 1 / span 3; color: var(--mt); opacity: .7 }
  .crow .avatar { width: 42px; height: 42px; border-radius: 12px; font-size: 14px; align-self: start }
  .crow .cpick { grid-row: 1 / span 3; align-self: start }
  .head-row { display: none }
  .crow .cbadges .badge { font-size: 11px; padding: 2px 8px }

  /* profile */
  .phero { padding: 22px 16px 16px }
  .phead { flex-direction: column; align-items: center; text-align: center; gap: 12px }
  .phead > div { width: 100% }
  .phead h2 { justify-content: center; font-size: 22px }
  .pmeta { justify-content: center; font-size: 12.5px; gap: 6px 12px }
  .pstats { justify-content: center; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
  .pstat { min-width: 0; padding: 8px 4px }
  .pstat b { font-size: 18px }
  .pstat b.pay { font-size: 13.5px !important; line-height: 27px !important; white-space: nowrap }
  .p-avatar { width: 88px; height: 88px; font-size: 30px; border-radius: 26px }
  .pactions { display: none }
  .p-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; position: relative; z-index: 1 }
  .p-quick a, .p-quick button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--gb); font-size: 11.5px; font-weight: 600; color: var(--accent-t); cursor: pointer }
  [data-theme="light"] .p-quick a, [data-theme="light"] .p-quick button { background: rgba(255, 255, 255, .8); border-color: rgba(15, 23, 42, .06) }
  .p-quick svg.i { width: 22px; height: 22px }
  .p-quick .wa { color: #16A34A }
  .tabs { border-bottom: 0; background: var(--soft); border-radius: 12px; padding: 3px; gap: 2px; margin-bottom: 16px }
  .tabs a { flex: 1; justify-content: center; border: 0; margin: 0; padding: 8px 6px; border-radius: 9px; font-size: 13px }
  .tabs a.on { background: var(--solid); color: var(--fg); box-shadow: 0 2px 8px rgba(0, 0, 0, .1) }
  .tabs a .n { display: none }
  .banner { padding: 12px 14px; font-size: 13px }
  .crel { padding: 14px; gap: 12px }
  .crel-bar { display: none }
  .crel-ic { width: 40px; height: 40px; border-radius: 12px }
  .crel-top .t { font-size: 15px; width: 100% }
  .crel-top .sp { display: none }
  .steps .s { font-size: 9.5px }
  .enr-actions .btn { flex: 1 1 auto }
  .sec-h .btn { width: 100% }

  /* forms: 16px inputs stop iOS zoom; 44px touch targets */
  .input, select.input, textarea.input { font-size: 16px; padding: 12px 14px; border-radius: 12px }
  .toolbar .input { font-size: 15px; padding: 10px 12px }
  .toolbar .search .input { padding-inline-start: 38px }
  .btn { min-height: 44px; border-radius: 12px; padding: 10px 16px; font-size: 14.5px }
  .btn-sm { min-height: 38px; font-size: 13.5px }
  .btn-ic { min-height: 38px; min-width: 38px }
  .form-actions { position: sticky; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); background: var(--card-s); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 10px; border-radius: 16px; border: 1px solid var(--gb); box-shadow: var(--sh); z-index: 5 }
  .form-actions .btn { flex: 1 }

  /* modals become bottom sheets */
  .modal-bg { align-items: flex-end; padding: 0 }
  .modal { max-width: none; border-radius: 24px 24px 0 0; max-height: 90vh; padding-bottom: var(--safe-b); animation: sheet .38s cubic-bezier(.2, .9, .3, 1); border-bottom: 0 }
  .modal::before { content: ''; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--mt); opacity: .5; margin: 8px auto 0 }
  .modal-h { border-bottom: 0; font-size: 17px; padding: 10px 20px 6px }
  .modal-f { border-top: 0; flex-direction: column-reverse; padding: 10px 20px 16px }
  .modal-f .btn { width: 100% }
  @keyframes sheet { from { transform: translateY(100%) } to { transform: none } }

  /* notifications: sheet from the top */
  .menu { position: fixed; top: calc(var(--top-h) + var(--safe-t) + 6px); inset-inline: 10px; width: auto !important; max-width: none; max-height: calc(100vh - 150px); overflow-y: auto; border-radius: 20px }

  .q-item { grid-template-columns: auto minmax(0, 1fr); padding: 14px }
  .q-actions { grid-column: 1 / -1; justify-content: stretch }
  .q-actions .btn { flex: 1 }
  .imp-bar { padding: 10px 16px; font-size: 13px }
  .pager { padding: 12px 14px; justify-content: center }
  .pager > span:first-child { width: 100%; text-align: center }

  /* auth */
  .auth { grid-template-columns: 1fr } .auth-side { display: none }
  .auth-form { align-items: flex-start; padding: calc(70px + var(--safe-t)) 16px 30px }
  .auth-mlogo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; text-align: center }
  .auth-mlogo .brand-logo { width: 72px; height: 72px; border-radius: 20px; font-size: 32px }
  .auth-box { padding: 26px 20px }
  .auth-box h1 { text-align: center } .auth-box .sub { text-align: center }
}
@media (max-width: 560px) {
  .g-4 { grid-template-columns: 1fr 1fr } .g-3 { grid-template-columns: 1fr }
  .stat { padding: 16px } .stat-v { font-size: 26px } .stat-ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 4px }
  .stat-l { font-size: 12.5px; line-height: 1.35 }
  .search .input { min-width: 0 }
  .pay-opts { grid-template-columns: 1fr 1fr 1fr }
  .row-line select.input { width: 110px }
  .perm-list { grid-template-columns: 1fr }
  .ovr-row { flex-direction: column; align-items: stretch; gap: 8px }
  .seg { width: 100% } .seg label { flex: 1 } .seg span { text-align: center; padding: 7px 4px }
}
/* installed as an app (Add to Home Screen) */
@media (display-mode: standalone) { body { -webkit-user-select: none; user-select: none } input, textarea, .note-b, .cv, .ltr { -webkit-user-select: text; user-select: text } }
.m-back svg.i { transform: scaleX(-1) } [dir="rtl"] .m-back svg.i { transform: none }
@media (max-width: 900px) {
  .page-head > .btn-ic:first-child { display: none }
  .toolbar .search { flex: 1 1 0 }
  .toolbar .m-only { flex: 0 0 auto; min-height: 44px }
  .toolbar.filters-closed + .toolbar.chips { padding-top: 0; border-top: 0 }
}
@media (max-width: 900px) { .auth-top .lang-btn { width: auto; border-radius: 20px; padding: 0 14px } }
@media (max-width: 900px) {
  .m-back { text-overflow: ellipsis; max-width: 104px }
  .topbar:has(.m-back) h1 { inset-inline: 116px }
  .p-quick a, .p-quick button { text-align: center; line-height: 1.25 }
}

/* ================= Phase 3 · courses, batches, lectures, schedule ================= */
.toast { position: fixed; inset-inline: 0; margin-inline: auto; bottom: calc(var(--safe-b) + 90px); width: max-content; max-width: 90vw; background: rgba(15, 23, 42, .92); color: #fff; padding: 10px 18px; border-radius: 30px; font-size: 13px; font-weight: 600; z-index: 120; box-shadow: var(--sh-lg) }
.flip-rtl-prev { transform: scaleX(-1) } [dir="rtl"] .flip-rtl-prev { transform: none }
[dir="rtl"] .flip-rtl-next { transform: scaleX(-1) }
.hscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px } .hscroll::-webkit-scrollbar { display: none }
.chip svg.i { width: 14px; height: 14px }
.count { background: var(--soft); border-radius: 20px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; color: var(--fg2) }

/* batch list (identity of the old batch list: colour bar · meta · progress · status) */
.blist { display: flex; flex-direction: column }
.bitem { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: relative; transition: background var(--t); color: inherit; --c: var(--accent) }
.bitem:last-child { border-bottom: 0 }
.bitem::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c) }
[dir="rtl"] .bitem::before { border-radius: 4px 0 0 4px }
.bitem:hover { background: var(--hover) }
.bitem-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent) }
.bitem-ic svg.i { width: 20px; height: 20px }
.bitem-main { flex: 1; min-width: 0 }
.bitem-t { font-weight: 700; font-size: 14.5px; color: var(--fg); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.bitem-t .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.code { font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 1px 8px; border-radius: 6px; letter-spacing: .3px }
.bitem-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--mt); margin-top: 5px }
.bitem-meta span { display: inline-flex; gap: 5px; align-items: center }
.bitem-meta svg.i { width: 13px; height: 13px }
.bitem-meta .hl { color: var(--fg2); font-weight: 600 }
.bitem-prog { width: 190px; flex-shrink: 0 }
.bp-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mt); margin-bottom: 5px; gap: 8px }
.bp-top b { color: var(--c); font-size: 12px }
.bitem.compact { padding: 12px 18px } .bitem.compact .bitem-main .bp-top { margin-top: 6px }

/* hero for batch / course pages */
.bhero { position: relative; overflow: hidden; padding: 22px 24px 18px; --c: var(--accent) }
.bhero-bar { position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--c) }
.bhead { display: flex; gap: 16px; align-items: flex-start }
.bhead h2 { font-size: 20px; font-weight: 800; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; line-height: 1.35 }
.bhead h2 a { color: inherit } .bhead h2 a:hover { color: var(--c) }
.bhero-ic { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: var(--c); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 40%, transparent) }
.bhero-ic svg.i { width: 27px; height: 27px }
.bkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px }
.bkpis.k5 { grid-template-columns: repeat(5, 1fr) }
.bkpi { background: var(--soft); border-radius: 14px; padding: 12px 14px; text-align: center; min-width: 0 }
.bkpi b { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bkpi b small { font-size: 14px; color: var(--mt); font-weight: 600 }
.bkpi > span { font-size: 11.5px; color: var(--mt); display: block; margin-top: 2px }
.bkpi .progress { margin-top: 8px; min-width: 0 }

/* lecture tracker (same grid as the old system) */
.lec-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--fg2); margin-bottom: 12px }
.lec-legend span { display: inline-flex; gap: 6px; align-items: center }
.lec-legend i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--gb); background: var(--card) }
.lec-legend .lg-done { background: rgba(16, 185, 129, .2); border-color: rgba(16, 185, 129, .45) }
.lec-legend .lg-can { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35) }
.lec-legend .lg-sub { border-radius: 50%; background: var(--warn); border: 0 }
.lecture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px }
.lec-cell { aspect-ratio: 1; border-radius: var(--rs); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: inherit; color: var(--fg); cursor: pointer; border: 1px solid var(--gb); background: var(--card); transition: transform var(--t), box-shadow var(--t); position: relative; padding: 0 }
[data-theme="light"] .lec-cell { background: rgba(255, 255, 255, .85); border-color: rgba(15, 23, 42, .08) }
.lec-cell:disabled { cursor: default }
.lec-cell:not(:disabled):hover { transform: scale(1.06) }
.lec-cell.completed { background: rgba(16, 185, 129, .15) !important; border-color: rgba(16, 185, 129, .35) !important; color: var(--ok-t) }
.lec-cell.completed::after { content: '✓'; position: absolute; top: 3px; inset-inline-end: 6px; font-size: 10px; font-weight: 800 }
.lec-cell.cancelled { background: rgba(239, 68, 68, .1) !important; border-color: rgba(239, 68, 68, .25) !important; color: var(--err-t); opacity: .75 }
.lec-cell.cancelled .lec-num, .lec-cell.cancelled .lec-date { text-decoration: line-through }
.lec-cell.today { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-l) }
.lec-cell.sub::before { content: ''; position: absolute; top: 5px; inset-inline-start: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn) }
.lec-cell.extra { border-style: dashed }
.lec-num { font-size: 17px; font-weight: 800; position: relative; line-height: 1.1 }
.lec-num.has-note::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); position: absolute; top: -1px; inset-inline-end: -8px }
.lec-date { font-size: 9.5px; color: var(--mt); margin-top: 3px }
.lec-was { font-size: 9px; font-weight: 700 }
.lec-actions .la-row { display: flex; gap: 10px }
.la { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--gb); background: var(--soft); color: var(--fg); font-family: inherit; cursor: pointer; transition: transform var(--t) }
.la:active { transform: scale(.97) }
.la svg.i { width: 24px; height: 24px }
.la b { font-size: 13.5px } .la small { font-size: 11px; color: var(--mt); text-align: center }
.la-ok { background: var(--ok-l); color: var(--ok-t); border-color: transparent }
.la-err { background: var(--err-l); color: var(--err-t); border-color: transparent }

/* students / waiting rows */
.srow { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line) }
.srow:last-child { border-bottom: 0 }
.srow-main { flex: 1; min-width: 0 }
.srow-t { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.srow-t a:hover { color: var(--accent-t) }
.srow-m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px }
.srow-a { display: flex; gap: 6px; flex-shrink: 0 }
.inline-edit { flex-basis: 100%; padding-top: 10px }
.check-line { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer }
.check-line input { width: 17px; height: 17px; accent-color: var(--accent) }

/* smart suggestions (old suggest panel) */
.suggest { overflow: hidden }
.suggest-h { display: flex; gap: 10px; align-items: center; padding: 16px 20px; font-weight: 700; font-size: 14.5px; background: var(--accent-l); color: var(--accent-t); border-bottom: 1px solid var(--line) }
.suggest-h small { display: block; font-weight: 500; font-size: 12px; opacity: .85; margin-top: 1px }
.suggest-h > svg.i { width: 20px; height: 20px; flex-shrink: 0 }
.sg-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.sg-row:last-of-type { border-bottom: 0 }
.sg-row:hover { background: var(--hover) }
.sg-row.is-block { background: color-mix(in srgb, var(--err) 4%, transparent) }
.sg-pick input { width: 17px; height: 17px; accent-color: var(--accent) }
.sg-main { flex: 1 1 260px; min-width: 0 }
.sg-extra { font-size: 11.5px; color: var(--mt); margin-top: 5px; display: flex; gap: 5px; align-items: center }
.sg-extra svg.i { width: 12px; height: 12px }
.srow-m .pill { cursor: pointer; font-family: inherit }
.cf { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600 }
.cf svg.i { width: 12px; height: 12px; stroke-width: 2.6 }
.cf-free { background: var(--ok-l); color: var(--ok-t) }
.cf-warn { background: var(--warn-l); color: var(--warn-t) }
.cf-block { background: var(--err-l); color: var(--err-t) }
.sg-invite { display: flex; gap: 6px; align-items: center; position: relative }
.sg-invite .input { font-size: 12px; padding: 6px 10px; min-height: 34px; width: 150px }
.sg-invite select.input { width: 160px; font-weight: 600 }
.sg-invite .inv-agreed { color: var(--ok-t); border-color: color-mix(in srgb, var(--ok) 45%, transparent) }
.sg-invite .inv-not_suitable, .sg-invite .inv-no_reply { color: var(--err-t) }
.sg-invite .inv-contacted, .sg-invite .inv-waiting_reply { color: var(--warn-t) }
.sg-saved { color: var(--ok-t); display: inline-flex } .sg-saved svg.i { width: 16px; height: 16px }
.sg-add { margin: 0 }
.sg-bulk { position: sticky; bottom: 0; border-top: 1px solid var(--line); border-bottom: 0 }

/* form helpers */
.daypick { display: flex; flex-wrap: wrap; gap: 6px }
.daypick label { cursor: pointer } .daypick input { display: none }
.daypick span { display: inline-flex; min-width: 62px; justify-content: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--gb); background: var(--card); font-size: 13px; font-weight: 600; color: var(--fg2); transition: all var(--t) }
[data-theme="light"] .daypick span { background: #fff; border-color: rgba(15, 23, 42, .1) }
.daypick input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 10px var(--accent-g) }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px }
.swatches input { display: none }
.swatches span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--s); cursor: pointer; transition: transform var(--t) }
.swatches input:checked + span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--s); transform: scale(1.05) }
.form-side { grid-template-columns: minmax(0, 1fr) 320px }
.plan-preview { position: sticky; top: calc(var(--top-h) + 16px); --c: var(--accent) }
.plan-preview .card-h svg.i { color: var(--c) }
.mini-lecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px }
.mini-lecs span { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 9px; background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent) }
.mini-lecs b { font-size: 13px; color: var(--c) } .mini-lecs small { font-size: 9.5px; color: var(--mt) }

/* course catalogue cards (old catalogue: coloured banner + icon) */
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px }
.ccard { padding: 0; overflow: hidden; color: inherit; transition: transform var(--t), box-shadow var(--t); --c: var(--accent); display: flex; flex-direction: column }
.ccard:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, .12) }
.ccard-top { height: 92px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000 10%)); display: grid; place-items: center; color: #fff; position: relative }
.ccard-top > svg.i { width: 36px; height: 36px; stroke-width: 1.8 }
.ccard-flag { position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(255, 255, 255, .92); color: #B45309; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 9px }
.ccard-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1 }
.ccard-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--c) }
.ccard-t { font-weight: 700; font-size: 15px; color: var(--fg) }
.ccard-d { font-size: 12px; color: var(--mt) }
.ccard-s { display: flex; gap: 12px; font-size: 12px; color: var(--mt); margin-top: auto; padding-top: 8px }
.ccard-s span { display: inline-flex; gap: 4px; align-items: center } .ccard-s svg.i { width: 13px; height: 13px }

/* weekly schedule */
.sched-bar { flex-wrap: wrap }
.wk-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.wk-range { font-size: 14px; margin-inline-start: 8px }
.sched-grid-wrap { overflow-x: auto; padding: 0 }
.sched-grid { display: grid; grid-template-columns: 70px repeat(7, minmax(120px, 1fr)); min-width: 900px }
.sg-corner, .sg-day { position: sticky; top: 0; background: var(--card-s); z-index: 1; border-bottom: 1px solid var(--line) }
.sg-day { text-align: center; padding: 10px 6px; font-size: 12px; color: var(--mt); display: flex; flex-direction: column; align-items: center; gap: 2px }
.sg-day b { font-size: 18px; color: var(--fg); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50% }
.sg-day.today { color: var(--accent-t) } .sg-day.today b { background: var(--accent); color: #fff }
.sg-time { font-size: 11px; color: var(--mt); padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line) }
.sg-cell { border-inline-start: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; min-height: 64px; display: flex; flex-direction: column; gap: 4px }
.sg-cell.today { background: color-mix(in srgb, var(--accent) 4%, transparent) }
.sblock { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 9px; font-size: 11px; color: var(--fg2); background: color-mix(in srgb, var(--c) 13%, transparent); border-inline-start: 3px solid var(--c); transition: transform var(--t) }
.sblock:hover { transform: scale(1.02) }
.sblock b { color: var(--fg); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sblock .si { color: var(--mt) }
.sblock.completed { opacity: .55 }
.sblock.cancelled { background: var(--err-l); border-color: var(--err); text-decoration: line-through; opacity: .7 }
.agenda { display: none }
.ag-item { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); color: inherit; position: relative; --c: var(--accent) }
.ag-item:last-child { border-bottom: 0 }
.ag-item:hover { background: var(--hover) }
.ag-time { width: 58px; flex-shrink: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--mt) }
.ag-time b { font-size: 13.5px; color: var(--fg) }
.ag-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-inline-start: 12px; border-inline-start: 3px solid var(--c) }
.ag-body b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ag-body > span { font-size: 12px; color: var(--mt) }
.ag-body .si { display: inline-flex; gap: 4px; align-items: center } .ag-body .si svg.i { width: 12px; height: 12px }
.ag-item.completed .ag-body b { color: var(--fg2) }
.ag-item.cancelled .ag-body b { text-decoration: line-through; color: var(--err-t) }
.ag-ok { color: var(--ok-t); width: 20px; height: 20px; flex-shrink: 0 }
.ag-item.dash .ag-time { width: 64px }

@media (max-width: 1200px) { .form-side { grid-template-columns: 1fr } .plan-preview { position: static } }
@media (max-width: 900px) {
  .bitem { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px }
  .bitem-ic { width: 38px; height: 38px }
  .bitem-main { flex: 1 1 calc(100% - 110px) }
  .bitem > .badge { position: absolute; top: 14px; inset-inline-end: 14px }
  .bitem-t { padding-inline-end: 70px }
  .bitem-prog { width: 100%; order: 3 }
  .bhero { padding: 18px 16px 14px }
  .bhead { flex-wrap: wrap; gap: 12px }
  .bhead h2 { font-size: 17.5px }
  .bhero-ic { width: 50px; height: 50px; border-radius: 15px }
  .bhead .pactions { width: 100%; display: flex; gap: 8px } .bhead .pactions .btn { flex: 1; justify-content: center }
  .bkpis, .bkpis.k5 { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px }
  .bkpis.k5 .bkpi:first-child { grid-column: 1 / -1 }
  .bkpi b { font-size: 21px }
  .lecture-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px }
  .lec-num { font-size: 15px }
  .srow { padding: 12px 16px }
  .sg-row { padding: 14px 16px; gap: 10px; align-items: flex-start }
  .sg-pick { order: -2; padding-top: 10px } .sg-row > .avatar { order: -1 }
  .sg-main { flex: 1 1 calc(100% - 90px) }
  .sg-invite { width: 100%; }
  .sg-invite select.input, .sg-invite .input { flex: 1; width: auto; min-height: 40px }
  .sg-add { width: 100% } .sg-add .btn { width: 100%; justify-content: center; min-height: 42px }
  .la-row { flex-direction: column }
  .sched-grid-wrap { display: none }
  .agenda { display: flex; flex-direction: column; gap: 14px }
  .ag-day { background: var(--card); border: 1px solid var(--gb); border-radius: var(--r); overflow: hidden; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) }
  [data-theme="light"] .ag-day { background: rgba(255, 255, 255, .75) }
  .ag-day.empty { background: transparent !important; border-style: dashed; -webkit-backdrop-filter: none; backdrop-filter: none }
  .ag-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px }
  .ag-h b { font-size: 22px; font-weight: 800; width: 40px; text-align: center }
  .ag-h span { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; line-height: 1.2 } .ag-h small { font-weight: 500; color: var(--mt); font-size: 11.5px }
  .ag-h em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 10px; border-radius: 20px }
  .ag-day.today .ag-h b { color: var(--accent-t) }
  .ag-none { padding: 0 16px 12px 66px; font-size: 12.5px; color: var(--mt) }
  [dir="rtl"] .ag-none { padding: 0 66px 12px 16px }
  .ag-day.empty .ag-h { padding-bottom: 2px }
  .ccards { grid-template-columns: repeat(2, 1fr); gap: 12px }
  .ccard-top { height: 70px } .ccard-top > svg.i { width: 28px; height: 28px }
  .ccard-b { padding: 10px 12px 12px } .ccard-t { font-size: 13.5px } .ccard-d { display: none }
  .ccard-s { gap: 8px; font-size: 11px; flex-wrap: wrap }
  .ccard-flag { font-size: 10px; top: 6px; inset-inline-end: 6px }
  .wk-range { width: 100%; margin: 6px 0 0 }
  .sched-bar select.input { width: 100% !important }
  .daypick span { min-width: 0; flex: 1 } .daypick { display: grid; grid-template-columns: repeat(4, 1fr) } .daypick label span { width: 100% }
  .toast { bottom: calc(var(--safe-b) + var(--tab-h) + 24px) }
}
/* suggestions: invite + add stacked in one column on desktop */
.sg-act { display: flex; flex-direction: column; gap: 6px; width: 190px; flex-shrink: 0 }
.sg-act .sg-invite { flex-direction: column; align-items: stretch }
.sg-act .sg-invite .input, .sg-act .sg-invite select.input { width: 100% }
.sg-act .sg-saved { position: absolute; top: 8px; inset-inline-end: 26px }
.sg-act .sg-add .btn { width: 100%; justify-content: center }
@media (max-width: 900px) {
  .sg-act { width: 100% }
  .sg-act .sg-invite { flex-direction: row }
}