/* ============================================================
   Smartclass 360 — Design System (light-first, themeable)
   Bespoke, hand-built. No frameworks.
   Default = light. Optional dark via html[data-theme="dark"].
   ============================================================ */

:root{
  /* brand constants */
  --indigo:    #4C4FD6;
  --indigo-lt: #6D6FE8;
  --teal:      #1FB8A6;
  --gold:      #E0A32E;
  --gold-lt:   #EEBB4A;
  --danger:    #D5514D;

  /* ---- LIGHT theme (default) ---- */
  --bg:        #F1EFE8;
  --bg-2:      #FBFAF6;
  --surface:   #FFFFFF;
  --surface-2: #F6F4EE;
  --text:      #1A1E29;
  --muted:     #6A7280;
  --border:    rgba(26,30,41,.10);

  --shadow-sm: 0 2px 12px -6px rgba(26,30,55,.14);
  --shadow:    0 16px 46px -22px rgba(26,30,55,.22);
  --shadow-lg: 0 40px 90px -34px rgba(26,30,55,.30);

  --sidebar-bg:        #FFFFFF;
  --sidebar-text:      #5A6273;
  --sidebar-strong:    #1A1E29;
  --sidebar-border:    rgba(26,30,41,.08);
  --sidebar-active:    linear-gradient(100deg, rgba(76,79,214,.12), rgba(31,184,166,.08));
  --sidebar-hover:     rgba(26,30,41,.045);
  --sec-color:         #98A0B0;

  --topbar-bg: rgba(251,250,246,.82);

  --field-bg:     #FFFFFF;
  --field-border: rgba(26,30,41,.16);
  --field-focus-bg: rgba(76,79,214,.05);

  /* login hero */
  --hero-bg: radial-gradient(125% 120% at 18% 12%, #E9EBFF 0%, #F1EFE8 46%, #E6F5F1 100%);
  --hero-text: #1A1E29;
  --hero-muted: #4C5568;
  --hero-line: rgba(26,30,41,.06);
  --bloom-op: .38;

  --card-bg: rgba(255,255,255,.72);
  --card-border: rgba(26,30,41,.10);
  --card-blur: 16px;

  /* radii & type */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --font-display: 'Frank Ruhl Libre', Georgia, serif;
  --font-ui: 'Rubik', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- DARK theme ---- */
html[data-theme="dark"]{
  --bg:        #0B0F1C;
  --bg-2:      #111731;
  --surface:   #151B30;
  --surface-2: #1B2242;
  --text:      #E9ECF6;
  --muted:     #99A0BC;
  --border:    rgba(255,255,255,.10);

  --shadow-sm: 0 2px 14px -6px rgba(0,0,0,.5);
  --shadow:    0 20px 54px -24px rgba(0,0,0,.6);
  --shadow-lg: 0 44px 96px -34px rgba(0,0,0,.66);

  --sidebar-bg:        linear-gradient(180deg, #0A0E1A 0%, #111731 100%);
  --sidebar-text:      #AEB5D6;
  --sidebar-strong:    #FFFFFF;
  --sidebar-border:    rgba(255,255,255,.08);
  --sidebar-active:    linear-gradient(100deg, rgba(76,79,214,.30), rgba(31,184,166,.14));
  --sidebar-hover:     rgba(255,255,255,.05);
  --sec-color:         #5C6689;

  --topbar-bg: rgba(17,23,49,.7);

  --field-bg:     rgba(255,255,255,.04);
  --field-border: rgba(255,255,255,.14);
  --field-focus-bg: rgba(76,79,214,.10);

  --hero-bg: radial-gradient(125% 120% at 15% 10%, #17205A 0%, #0B1030 44%, #070A18 100%);
  --hero-text: #E9ECF6;
  --hero-muted: #B9C0D9;
  --hero-line: rgba(255,255,255,.05);
  --bloom-op: .5;

  --card-bg: rgba(255,255,255,.05);
  --card-border: rgba(255,255,255,.10);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s var(--ease), color .4s var(--ease);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--gold); color:#fff; }

/* ---- theme toggle ---- */
.theme-toggle{
  width:40px; height:40px; border-radius:12px; flex:none;
  display:grid; place-items:center; color:var(--muted);
  border:1px solid var(--border); background:var(--surface);
  transition:color .2s var(--ease), transform .3s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover{ color:var(--gold); border-color:var(--gold); transform:rotate(-18deg); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .moon{ display:none; }
html[data-theme="dark"] .theme-toggle .sun{ display:none; }
html[data-theme="dark"] .theme-toggle .moon{ display:block; }
.theme-toggle.floating{ position:fixed; inset-block-start:1.3rem; inset-inline-end:1.3rem; z-index:20; }

/* ============================================================
   AUTH / LOGIN
   ============================================================ */
body.auth-page{ min-height:100vh; overflow:hidden; }
.auth-wrap{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; }

/* The brand hero is ALWAYS a dark "stage before the show" — cinematic indigo
   night with live light blooms — regardless of the app theme. The light-theme
   pastel version read as washed-out; a fixed dark hero gives the split-screen
   its contrast and lets the gold/teal brand light actually glow. */
.auth-brand{
  position:relative; overflow:hidden; display:flex; align-items:center;
  padding:clamp(2rem,5vw,5rem);
  background:
    radial-gradient(120% 140% at 82% -12%, #232A6E 0%, rgba(35,42,110,0) 55%),
    radial-gradient(130% 130% at 12% 112%, #0D3B36 0%, rgba(13,59,54,0) 58%),
    linear-gradient(158deg, #101433 0%, #0A0D22 52%, #070914 100%);
  color:#F2F4FE;
  isolation:isolate;
}
.auth-brand::before,
.auth-brand::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.5; z-index:-1;
  animation:drift 18s var(--ease) infinite alternate;
}
.auth-brand::before{
  width:52vmax; height:52vmax; left:-16vmax; top:-18vmax;
  background:radial-gradient(circle, #5A5DF0 0%, rgba(90,93,240,0) 66%);
}
.auth-brand::after{
  width:44vmax; height:44vmax; right:-14vmax; bottom:-16vmax;
  background:radial-gradient(circle, #17C9B4 0%, rgba(23,201,180,0) 64%);
  animation-delay:-6s;
}
.aurora-gold{
  position:absolute; z-index:-1; inset:auto -10% 14% -10%; height:40vmax;
  background:radial-gradient(58% 58% at 50% 50%, rgba(238,187,74,.30) 0%, rgba(238,187,74,0) 70%);
  transform:rotate(-8deg); animation:drift 22s var(--ease) infinite alternate-reverse;
}
.auth-brand .grain{
  position:absolute; inset:0; z-index:-1; opacity:.07; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-brand .grid{
  position:absolute; inset:0; z-index:-1; opacity:1; pointer-events:none;
  -webkit-mask-image:radial-gradient(75% 75% at 42% 28%, #000 0%, transparent 78%);
          mask-image:radial-gradient(75% 75% at 42% 28%, #000 0%, transparent 78%);
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:46px 46px;
}

.brand-inner{ position:relative; max-width:30rem; }
.brand-logo{ display:flex; align-items:center; gap:1rem; margin-bottom:2.8rem; animation:rise .8s var(--ease) both; }
/* the svg is a wide wordmark — unreadable squeezed into a chip; the typographic
   wordmark IS the logo here (explicit hexes: the green rebrand :root overrides --gold) */
.brand-logo img{ display:none; }
.brand-logo .lock{
  font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:#FFFFFF; letter-spacing:.2px;
  padding:.45rem 1.05rem; border-radius:99px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.auth-brand .brand-logo .lock b{ color:#EEBB4A; font-weight:700; }

.brand-title{
  font-family:var(--font-display); font-weight:900; color:#FFFFFF;
  font-size:clamp(2.7rem,4.6vw,4.3rem); line-height:1.05; letter-spacing:-.5px;
  margin-bottom:1.15rem; animation:rise .8s var(--ease) .08s both;
  text-shadow:0 4px 40px rgba(10,13,34,.6);
}
.brand-title .hl{
  background:linear-gradient(100deg, #F6CF7D, var(--gold-lt) 45%, #D89A25);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(238,187,74,.35));
}
.brand-tagline{
  font-size:1.16rem; color:#B9C2E4; max-width:26rem; margin-bottom:2.6rem; line-height:1.65;
  animation:rise .8s var(--ease) .16s both;
}
.brand-points{ list-style:none; display:grid; gap:.7rem; }
.brand-points li{
  display:flex; align-items:center; gap:.85rem; color:#D7DDF4; font-size:1.02rem; font-weight:500;
  padding:.72rem 1rem; border-radius:14px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px);
  animation:rise .7s var(--ease) both;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.brand-points li:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); transform:translateX(-4px); }
.brand-points li:nth-child(1){ animation-delay:.26s; }
.brand-points li:nth-child(2){ animation-delay:.34s; }
.brand-points li:nth-child(3){ animation-delay:.42s; }
.brand-points .tick{
  width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--indigo-lt), var(--teal));
  box-shadow:0 6px 18px -4px rgba(31,184,166,.55), inset 0 0 0 1px rgba(255,255,255,.25);
}
.brand-points .tick svg{ width:14px; height:14px; stroke:#fff; }

.auth-form-col{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(1.5rem,4vw,3rem); background:var(--bg-2); overflow:hidden;
}
/* soft brand echo behind the card so the form side isn't sterile */
.auth-form-col::before{
  content:""; position:absolute; width:64vmax; height:64vmax; border-radius:50%;
  right:-30vmax; top:-34vmax; pointer-events:none;
  background:radial-gradient(circle, rgba(76,79,214,.13) 0%, rgba(76,79,214,0) 62%);
}
.auth-form-col::after{
  content:""; position:absolute; width:50vmax; height:50vmax; border-radius:50%;
  left:-24vmax; bottom:-26vmax; pointer-events:none;
  background:radial-gradient(circle, rgba(31,184,166,.13) 0%, rgba(31,184,166,0) 62%);
}
.auth-card{
  position:relative; z-index:1;
  width:min(28rem,100%);
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:26px;
  padding:2.9rem 2.6rem 2.4rem;
  backdrop-filter:blur(var(--card-blur));
  box-shadow:var(--shadow-lg);
  animation:rise .8s var(--ease) .1s both;
}
/* gold→teal hairline signature along the card top */
.auth-card::before{
  content:""; position:absolute; inset-inline:1.4rem; top:0; height:3px; border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, transparent, var(--gold-lt) 30%, var(--teal) 70%, transparent);
  opacity:.85;
}
/* brand wordmark inside the card — on ALL sizes, so the form side never feels bare */
.auth-logo-sm{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.5rem; }
.auth-logo-sm img{ display:none; }
.auth-logo-sm .wm{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  padding:.3rem .85rem; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--border);
}
.auth-logo-sm .wm b{ color:#E0A32E; }
.auth-card h2{ font-family:var(--font-display); font-weight:900; font-size:2.1rem; margin-bottom:.35rem; }
.auth-card .sub{ color:var(--muted); margin-bottom:1.9rem; font-size:.98rem; }

.field{ position:relative; margin-bottom:1.15rem; }
.field input{
  width:100%; background:var(--field-bg); border:1.5px solid var(--field-border);
  border-radius:14px; padding:1.4rem 1.05rem .55rem;
  font-size:1.02rem; color:var(--text); font-family:inherit;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder{ color:transparent; }
.field label{
  position:absolute; inset-inline-start:1.05rem; top:1rem; color:var(--muted); font-size:1rem;
  pointer-events:none; transform-origin:right center;
  transition:transform .2s var(--ease), color .2s var(--ease), top .2s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--teal); background:var(--field-focus-bg); box-shadow:0 0 0 4px rgba(31,184,166,.16); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label{ top:.42rem; transform:scale(.78); color:var(--teal); }

.auth-row{ display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 1.5rem; }
.remember{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.9rem; cursor:pointer; user-select:none; }
.remember input{ accent-color:var(--teal); width:16px; height:16px; }

.btn-primary{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 1.2rem; font-size:1.08rem; font-weight:600; color:#fff; border-radius:14px;
  background:linear-gradient(100deg, #047857 0%, #10b981 55%, #2dd4a0 100%);
  box-shadow:0 16px 34px -12px rgba(16,185,129,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s var(--ease), box-shadow .3s var(--ease);
  position:relative; overflow:hidden;
}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(31,184,166,.55); }
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-primary:active{ transform:translateY(0) scale(.99); }
.btn-primary svg{ width:18px; height:18px; }

.auth-error{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(213,81,77,.10); border:1px solid rgba(213,81,77,.4); color:#B23A37;
  padding:.7rem .9rem; border-radius:var(--radius-sm); font-size:.92rem; margin-bottom:1.2rem;
  animation:shake .4s var(--ease);
}
html[data-theme="dark"] .auth-error{ color:#F1B4B2; }
.auth-foot{ margin-top:1.6rem; text-align:center; color:var(--muted); font-size:.82rem; }

/* ============================================================
   APP SHELL
   ============================================================ */
body.app{ background:var(--bg); }
.shell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }

.sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  background:var(--sidebar-bg); color:var(--sidebar-text);
  padding:1.5rem 1rem; display:flex; flex-direction:column;
  border-inline-start:1px solid var(--sidebar-border);
  transition:background .4s var(--ease);
}
.sidebar .s-logo{
  display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.6rem .6rem 1.2rem;
  border-bottom:1px solid var(--sidebar-border); margin-bottom:1rem;
}
/* wide logo on a white chip → always readable on light OR dark sidebar */
.sidebar .s-logo img{ height:34px; width:auto; max-width:170px; display:block;
  background:#fff; border-radius:10px; padding:6px 12px; box-sizing:content-box; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.sidebar .s-logo .wm{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--sidebar-strong); }
.sidebar .s-logo .wm b{ color:var(--gold); }

.nav{ list-style:none; display:grid; gap:.2rem; }
.nav .sec{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sec-color); margin:1rem .8rem .3rem; }
.nav a{
  display:flex; align-items:center; gap:.75rem; padding:.68rem .8rem; border-radius:12px;
  color:var(--sidebar-text); font-size:.95rem; font-weight:500; position:relative;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav a svg{ width:19px; height:19px; flex:none; opacity:.9; }
.nav a:hover{ background:var(--sidebar-hover); color:var(--sidebar-strong); transform:translateX(-3px); }
.nav a.active{ background:var(--sidebar-active); color:var(--sidebar-strong); }
.nav a.active::before{
  content:""; position:absolute; inset-inline-start:-1rem; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:0 4px 4px 0; background:var(--gold);
}
.sidebar .s-foot{ margin-top:auto; padding-top:1rem; }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; background:var(--topbar-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.topbar h1{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; }
.topbar .crumb{ color:var(--muted); font-size:.85rem; margin-top:.1rem; }
.topbar .actions{ display:flex; align-items:center; gap:1rem; }

.user-chip{ display:flex; align-items:center; gap:.7rem; }
.user-chip .who{ text-align:end; line-height:1.2; }
.user-chip .who .nm{ font-weight:600; font-size:.92rem; }
.user-chip .who .rl{ font-size:.76rem; color:var(--muted); }
.avatar{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:600; color:#fff; background:linear-gradient(135deg, var(--indigo), var(--teal)); box-shadow:var(--shadow-sm);
}
.btn-ghost{
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:10px;
  color:var(--muted); font-size:.88rem; border:1px solid var(--border); transition:all .2s var(--ease);
}
.btn-ghost:hover{ color:var(--danger); border-color:rgba(213,81,77,.4); background:rgba(213,81,77,.06); }
.btn-ghost svg{ width:16px; height:16px; }

.content{ padding:2rem; max-width:1200px; width:100%; }

.greeting{ margin-bottom:1.8rem; animation:rise .6s var(--ease) both; }
.greeting h2{ font-family:var(--font-display); font-weight:700; font-size:2rem; }
.greeting p{ color:var(--muted); margin-top:.25rem; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; margin-bottom:1.8rem; }
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; animation:rise .6s var(--ease) both;
}
.stat:nth-child(1){ animation-delay:.05s; } .stat:nth-child(2){ animation-delay:.12s; }
.stat:nth-child(3){ animation-delay:.19s; } .stat:nth-child(4){ animation-delay:.26s; }
.stat::after{ content:""; position:absolute; inset-block:0; inset-inline-end:0; width:4px; background:linear-gradient(var(--indigo), var(--teal)); }
.stat .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:.9rem; background:linear-gradient(135deg, rgba(76,79,214,.12), rgba(31,184,166,.12)); }
.stat .ic svg{ width:22px; height:22px; stroke:var(--indigo); }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1; }
.stat .lbl{ color:var(--muted); font-size:.9rem; margin-top:.35rem; }

.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); animation:rise .6s var(--ease) .3s both; }
.panel h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:.4rem; }
.panel p.lead{ color:var(--muted); margin-bottom:1.2rem; }
.steps{ list-style:none; display:grid; gap:.7rem; }
.steps li{ display:flex; gap:.8rem; align-items:flex-start; padding:.7rem; border-radius:12px; transition:background .2s var(--ease); }
.steps li:hover{ background:var(--surface-2); }
.steps .n{ width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; font-weight:600; font-size:.85rem; color:#fff; background:linear-gradient(135deg,var(--indigo),var(--teal)); }
.steps .tx b{ display:block; font-weight:600; }
.steps .tx span{ color:var(--muted); font-size:.9rem; }
.badge{ display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:99px; background:rgba(224,163,46,.16); color:var(--gold); margin-inline-start:.4rem; }

/* animations */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes drift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4vmax,3vmax) scale(1.12); } }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* responsive */
@media (max-width:880px){
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .auth-form-col{ min-height:100vh; }
  .auth-logo-sm{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:1.4rem; }
  .auth-logo-sm img{ width:42px; height:42px; }
  .auth-logo-sm .wm{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; }
  .auth-logo-sm .wm b{ color:var(--gold); }
  .shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; z-index:50; height:100vh; width:264px; transform:translateX(100%); transition:transform .3s var(--ease); }
  .sidebar.open{ transform:none; box-shadow:var(--shadow-lg); }
  .content{ padding:1.2rem; }
  .page-head{ flex-direction:column; align-items:flex-start; }
  .form-card{ padding:1.3rem; }
  .data-table th:nth-child(2), .data-table td:nth-child(2){ display:none; } /* hide email col on mobile */
}

/* ============================================================
   PHASE 1 — page head, flash, tables, forms, badges
   ============================================================ */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; animation:rise .6s var(--ease) both; }
.page-head .ph-title h2{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; }
.page-head .ph-title p{ color:var(--muted); font-size:.92rem; margin-top:.2rem; }

.flash{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border-radius:12px; margin-bottom:1.4rem; font-size:.93rem; animation:rise .5s var(--ease) both; }
.flash svg{ width:18px; height:18px; flex:none; }
.flash.ok{ background:rgba(31,184,166,.12); border:1px solid rgba(31,184,166,.35); color:#0F8778; }
html[data-theme="dark"] .flash.ok{ color:#5FD6C4; }

.errors{ background:rgba(213,81,77,.09); border:1px solid rgba(213,81,77,.32); color:#B23A37; border-radius:12px; padding:.85rem 1.1rem; margin-bottom:1.3rem; font-size:.9rem; }
html[data-theme="dark"] .errors{ color:#F1B4B2; }
.errors ul{ margin:.2rem 1.2rem 0; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.62rem 1.15rem; border-radius:10px; font-weight:600; font-size:.92rem; color:#fff; background:linear-gradient(100deg,var(--indigo),var(--teal)); box-shadow:0 12px 26px -14px rgba(76,79,214,.6); transition:transform .2s var(--ease), box-shadow .3s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn svg{ width:17px; height:17px; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(31,184,166,.6); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn.outline{ background:none; color:var(--text); border:1px solid var(--border); box-shadow:none; }
.btn.outline:hover{ border-color:var(--indigo); color:var(--indigo); box-shadow:none; }
.btn.danger{ background:none; color:var(--danger); border:1px solid rgba(213,81,77,.3); box-shadow:none; }
.btn.danger:hover{ background:rgba(213,81,77,.08); border-color:var(--danger); box-shadow:none; }
.btn.sm{ padding:.42rem .7rem; font-size:.83rem; border-radius:9px; }

/* table */
.table-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; animation:rise .6s var(--ease) .06s both; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:start; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; padding:.9rem 1.2rem; border-bottom:1px solid var(--border); background:var(--surface-2); }
.data-table td{ padding:.85rem 1.2rem; border-bottom:1px solid var(--border); font-size:.93rem; vertical-align:middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr{ transition:background .15s var(--ease); }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table .u-name{ font-weight:600; display:flex; align-items:center; gap:.6rem; }
.data-table .u-ava{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.8rem; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--indigo),var(--teal)); }
.data-table .row-actions{ display:flex; gap:.5rem; justify-content:flex-end; }
.data-table .muted{ color:var(--muted); }

/* role badge */
.role-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.24rem .62rem; border-radius:99px; font-size:.77rem; font-weight:600; }
.role-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.role-admin{ background:rgba(76,79,214,.13); color:#3F43C4; }
.role-manager{ background:rgba(31,184,166,.15); color:#0F8778; }
.role-instructor{ background:rgba(224,163,46,.17); color:#A9781A; }
.role-viewer{ background:rgba(107,114,128,.15); color:#556; }
html[data-theme="dark"] .role-admin{ color:#9EA0F5; }
html[data-theme="dark"] .role-manager{ color:#5FD6C4; }
html[data-theme="dark"] .role-instructor{ color:#EEBB4A; }
html[data-theme="dark"] .role-viewer{ color:#AEB5D6; }

/* forms */
.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.9rem; max-width:640px; animation:rise .6s var(--ease) .06s both; }
.form-grid{ display:grid; gap:1.15rem; }
.form-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.form-field input,
.form-field select{ width:100%; padding:.72rem .9rem; border:1px solid var(--field-border); border-radius:10px; background:var(--surface); color:var(--text); font-family:inherit; font-size:.95rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select{ background:var(--surface-2); }
.form-field input:focus,
.form-field select:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(76,79,214,.13); }
.field-hint{ font-size:.8rem; color:var(--muted); margin-top:.35rem; }
.form-actions{ display:flex; gap:.8rem; margin-top:1.7rem; flex-wrap:wrap; }

.empty{ padding:3.2rem 1rem; text-align:center; color:var(--muted); }
.empty svg{ width:40px; height:40px; opacity:.4; margin-bottom:.8rem; }

/* ============================================================
   PHASE 2 — courses & participants
   ============================================================ */
.course-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.2rem; }
.course-card{
  display:flex; flex-direction:column; gap:.7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .3s var(--ease), border-color .2s var(--ease);
  animation:rise .55s var(--ease) both;
}
.course-card::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:linear-gradient(90deg,var(--indigo),var(--teal)); opacity:0; transition:opacity .25s var(--ease); }
.course-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.course-card:hover::before{ opacity:1; }
.cc-top{ display:flex; align-items:center; justify-content:space-between; }
.cc-count{ display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.86rem; font-weight:600; }
.cc-count svg{ width:16px; height:16px; }
.cc-name{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.25; }
.cc-meta{ display:flex; flex-direction:column; gap:.4rem; margin-top:auto; padding-top:.4rem; }
.cc-meta span{ display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.88rem; }
.cc-meta svg{ width:16px; height:16px; flex:none; opacity:.8; }

/* status badges */
.status-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.24rem .62rem; border-radius:99px; font-size:.77rem; font-weight:600; }
.status-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.st-planned{ background:rgba(107,114,128,.15); color:#586; }
.st-active{ background:rgba(31,184,166,.16); color:#0F8778; }
.st-completed{ background:rgba(76,79,214,.14); color:#3F43C4; }
.st-archived{ background:rgba(107,114,128,.13); color:#8A93A5; }
html[data-theme="dark"] .st-active{ color:#5FD6C4; }
html[data-theme="dark"] .st-completed{ color:#9EA0F5; }
html[data-theme="dark"] .st-planned, html[data-theme="dark"] .st-archived{ color:#AEB5D6; }

/* course detail */
.detail-meta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.6rem; }
.detail-meta .dm{ color:var(--muted); font-size:.9rem; }
.head-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.section-title{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; }

.tool-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:.4rem; }
.tool-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.5rem; animation:rise .55s var(--ease) both; }
.tool-card .section-title{ margin-bottom:1rem; }
.add-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.add-grid input{ width:100%; padding:.68rem .85rem; border:1px solid var(--field-border); border-radius:10px; background:var(--surface); color:var(--text); font-family:inherit; font-size:.92rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
html[data-theme="dark"] .add-grid input{ background:var(--surface-2); }
.add-grid input:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(76,79,214,.13); }

.import-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1.5rem 1rem; border:2px dashed var(--field-border); border-radius:14px; color:var(--muted); cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease); }
.import-box:hover{ border-color:var(--indigo); background:rgba(76,79,214,.04); }
.import-box input[type="file"]{ display:none; }
.import-box svg{ width:30px; height:30px; opacity:.7; }
.import-box .file-name{ font-size:.85rem; font-weight:600; color:var(--teal); }
.import-hint{ font-size:.8rem; color:var(--muted); margin-top:.7rem; }

@media (max-width:760px){
  .tool-row{ grid-template-columns:1fr; }
  .add-grid{ grid-template-columns:1fr; }
}

/* ---- units / content ---- */
.unit-add{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.unit-add input[name="title"]{ flex:1 1 220px; padding:.72rem .9rem; border:1px solid var(--field-border); border-radius:10px; background:var(--surface); color:var(--text); font-family:inherit; font-size:.92rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
html[data-theme="dark"] .unit-add input[name="title"]{ background:var(--surface-2); }
.unit-add input[name="title"]:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(76,79,214,.13); }
.file-pick{ display:inline-flex; align-items:center; gap:.5rem; padding:.72rem .95rem; border:1px dashed var(--field-border); border-radius:10px; color:var(--muted); cursor:pointer; font-size:.88rem; max-width:300px; transition:border-color .2s var(--ease), color .2s var(--ease); }
.file-pick:hover{ border-color:var(--indigo); color:var(--indigo); }
.file-pick svg{ width:18px; height:18px; flex:none; }
.file-pick input[type="file"]{ display:none; }
.file-pick span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.unit-list{ display:grid; gap:.7rem; }
.unit-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.9rem 1.1rem;
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), border-color .2s var(--ease); animation:rise .5s var(--ease) both; }
.unit-row:hover{ transform:translateX(-3px); border-color:rgba(76,79,214,.3); }
.unit-row.is-done{ opacity:.7; }
.unit-main{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.unit-idx{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; font-weight:600; font-size:.85rem; color:#fff; background:linear-gradient(135deg,var(--indigo),var(--teal)); }
.unit-row.is-done .unit-idx{ background:var(--muted); }
.unit-info{ min-width:0; }
.unit-title{ font-weight:600; font-size:1rem; }
.unit-row.is-done .unit-title{ text-decoration:line-through; }
.unit-sub{ display:flex; align-items:center; gap:.5rem; margin-top:.25rem; flex-wrap:wrap; }
.unit-file{ font-size:.8rem; color:var(--muted); }
.unit-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.chip{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:99px; background:var(--surface-2); color:var(--muted); }
.chip-ok{ background:rgba(31,184,166,.15); color:#0F8778; }
.chip-warn{ background:rgba(224,163,46,.17); color:#A9781A; }
.chip-done{ background:rgba(76,79,214,.13); color:#3F43C4; }
html[data-theme="dark"] .chip-ok{ color:#5FD6C4; }
html[data-theme="dark"] .chip-warn{ color:#EEBB4A; }
html[data-theme="dark"] .chip-done{ color:#9EA0F5; }

.btn.present{ background:linear-gradient(100deg,#3F43C4,#1FB8A6); box-shadow:0 12px 26px -14px rgba(63,67,196,.6); }
.btn.present svg{ width:17px; height:17px; }

/* ---- screen picker modal ---- */
.sc-modal-overlay{ position:fixed; inset:0; background:rgba(10,14,26,.5); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.sc-modal-overlay.open{ display:flex; animation:rise .25s var(--ease); }
.sc-modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:min(560px,94vw); max-height:88vh; overflow:auto; padding:1.8rem; }
.sc-modal h3{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin-bottom:.3rem; }
.sc-modal .sub{ color:var(--muted); font-size:.9rem; margin-bottom:1.2rem; }
.sc-modal .hintbox{ font-size:.84rem; color:var(--muted); background:var(--surface-2); padding:.75rem .95rem; border-radius:10px; margin-bottom:1.1rem; line-height:1.6; }
.screen-opt{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:12px; cursor:pointer; margin-bottom:.7rem; transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); }
.screen-opt:hover{ border-color:var(--indigo); background:rgba(76,79,214,.04); transform:translateX(-2px); }
.screen-opt.chosen{ border-color:var(--teal); background:rgba(31,184,166,.07); }
.screen-opt .mon{ width:46px; height:46px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,var(--indigo),var(--teal)); color:#fff; flex:none; }
.screen-opt .mon svg{ width:24px; height:24px; }
.screen-opt .info{ flex:1; min-width:0; }
.screen-opt .info .nm{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.screen-opt .info .dim{ font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.scr-tag{ font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:99px; flex:none; }
.scr-tag.pri{ background:rgba(224,163,46,.16); color:var(--gold); }
.scr-tag.sel{ background:rgba(31,184,166,.16); color:#0F8778; }
html[data-theme="dark"] .scr-tag.sel{ color:#5FD6C4; }
.sc-modal .modal-actions{ display:flex; gap:.6rem; justify-content:space-between; margin-top:1.2rem; flex-wrap:wrap; }

/* ---- evaluations / participant file ---- */
.eval-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
@media (max-width:760px){ .eval-grid{ grid-template-columns:1fr 1fr; } }
.chip-danger{ background:rgba(213,81,77,.14); color:#B23A37; }
html[data-theme="dark"] .chip-danger{ color:#F1B4B2; }
a.u-name{ text-decoration:none; transition:color .15s var(--ease); }
a.u-name:hover{ color:var(--indigo) !important; }
a.u-name:hover .u-ava{ transform:scale(1.06); }
.u-ava{ transition:transform .15s var(--ease); }

/* ============================================================
   COMMAND (Design A) — token remap + icon-rail + command bar.
   Recolors the whole app to emerald + Assistant/Plex Mono,
   turns the sidebar into an icon rail and the topbar into a
   command bar. Appended last so it wins.
   ============================================================ */
:root{
  --indigo:#10b981; --indigo-lt:#34d399; --teal:#059669; --gold:#10b981; --gold-lt:#34d399;
  --bg:#fbfbfd; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f7f7fa;
  --text:#0e0f13; --muted:#8b909c; --border:rgba(16,17,20,.085);
  --sidebar-bg:#ffffff; --sidebar-strong:#0e0f13; --sidebar-text:#8b909c;
  --sidebar-active:rgba(16,185,129,.12); --sidebar-hover:rgba(16,17,20,.05); --sidebar-border:rgba(16,17,20,.08);
  --topbar-bg:rgba(251,251,253,.82); --field-border:#e3e3e9; --field-bg:#ffffff;
  --radius-sm:10px; --radius:14px; --radius-lg:20px;
  --font-display:'Assistant',system-ui,sans-serif;
  --font-ui:'Assistant',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow-sm:0 1px 2px rgba(16,17,20,.04),0 8px 24px -16px rgba(16,17,20,.16);
  --shadow:0 4px 10px -6px rgba(16,17,20,.10),0 24px 60px -34px rgba(16,17,20,.26);
  --acc:#10b981; --acc-d:#059669; --acc-wash:#e7f8f1;
}
html[data-theme="dark"]{
  --indigo:#34d399; --indigo-lt:#6ee7b7; --teal:#10b981; --gold:#34d399; --gold-lt:#6ee7b7;
  --bg:#0b0d12; --bg-2:#0f1218; --surface:#12151d; --surface-2:#171b25;
  --text:#e9ecf3; --muted:#7b8291; --border:rgba(255,255,255,.09);
  --sidebar-bg:#0f1218; --sidebar-strong:#fff; --sidebar-text:#8b90a0;
  --sidebar-active:rgba(52,211,153,.16); --sidebar-hover:rgba(255,255,255,.05); --sidebar-border:rgba(255,255,255,.07);
  --topbar-bg:rgba(11,13,18,.8); --field-border:#2a3040; --field-bg:#12151d;
  --acc:#34d399; --acc-d:#10b981; --acc-wash:rgba(52,211,153,.14);
}
/* transparent selection accent */
::selection{background:var(--acc);color:#fff}

/* ---- shell: labeled sidebar (icon + text, bold centred section titles) ---- */
.shell{grid-template-columns:238px 1fr}
.sidebar{padding:18px 14px;align-items:stretch;gap:2px}
.sidebar .s-logo{display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:2px 6px 16px;margin:0 0 4px;
  border:none;border-bottom:1px solid var(--sidebar-border);background:none;box-shadow:none;border-radius:0}
.sidebar .s-logo img{height:40px;width:auto;max-width:196px;border-radius:10px;padding:7px 13px;flex:none;box-sizing:content-box;
  background:#fff;filter:none;box-shadow:0 2px 10px -3px rgba(0,0,0,.25)}
.sidebar .s-logo .wm{display:inline;font-family:var(--font-ui);font-weight:800;font-size:1.1rem;color:var(--sidebar-strong)}
.sidebar .s-logo .wm b{color:var(--acc-d);font-weight:800}
.sidebar nav{width:100%}
.sidebar .sec{display:block;text-align:center;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 7px;padding:0}
.nav{justify-items:stretch;gap:3px;width:100%}
.nav a{display:flex;align-items:center;gap:11px;width:100%;height:auto;padding:10px 13px;justify-content:flex-start;
  border-radius:11px;font-size:.94rem;font-weight:600;color:var(--sidebar-text);margin:0;position:relative}
.nav a svg{width:20px;height:20px;flex:none;opacity:.9}
.nav a .lbl{position:static;opacity:1;transform:none;background:none;color:inherit;padding:0;box-shadow:none;
  white-space:nowrap;pointer-events:auto;font-weight:inherit;line-height:1.2;z-index:auto}
.nav a:hover{transform:none;background:var(--sidebar-hover);color:var(--sidebar-strong)}
.nav a:hover .lbl{opacity:1;transform:none}
.nav a.active{background:var(--sidebar-active);color:var(--acc-d);font-weight:700}
.nav a.active::before{display:none}

/* ---- command bar ---- */
.topbar{gap:16px;padding:11px 24px;min-height:62px}
.topbar h1{font-family:var(--font-ui);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.topbar .crumb{font-size:.78rem;margin-top:1px}
.cmd-search{flex:0 1 420px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:9px 13px;color:var(--muted);font-size:.9rem;cursor:text;transition:.2s;min-width:0}
.cmd-search:hover{border-color:var(--field-border);box-shadow:var(--shadow-sm)}
.cmd-search svg{width:17px;height:17px;flex:none}
.cmd-search .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-search{position:relative}
.cmd-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--font-ui);
  font-size:.9rem;color:var(--text)}
.cmd-search input::placeholder{color:var(--muted)}
.cmd-search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.cmd-search .kbd{margin-inline-start:auto;font-family:var(--font-mono);font-size:.72rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;padding:1px 7px;color:var(--muted);flex:none}
.cmd-results{position:absolute;top:calc(100% + 8px);inset-inline:0;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60;max-height:60vh;overflow:auto}
.cmd-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;text-decoration:none;color:var(--text);transition:background .12s}
.cmd-item:hover,.cmd-item.on{background:var(--surface-2)}
.cmd-tag{font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:20px;flex:none}
.cmd-tag.t-course{background:var(--acc-wash);color:var(--acc-d)}
.cmd-tag.t-part{background:#e2f0ff;color:#1f6fb8}
.cmd-tag.t-unit{background:#fdf3e0;color:#b47612}
html[data-theme="dark"] .cmd-tag.t-part{background:rgba(56,189,248,.16);color:#7cc7f5}
html[data-theme="dark"] .cmd-tag.t-unit{background:rgba(245,158,11,.16);color:#f6c56a}
.cmd-lbl{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-sub{margin-inline-start:auto;font-size:.8rem;color:var(--muted);white-space:nowrap;flex:none}
.cmd-empty{padding:14px;text-align:center;color:var(--muted);font-size:.88rem}
.theme-toggle:hover{color:var(--acc-d);border-color:var(--acc);transform:none}
.avatar{border-radius:50%;background:linear-gradient(135deg,#1f2430,#0e0f13)}

/* ---- headings → sans, numbers → mono ---- */
.topbar h1,.panel h3,.sc-modal h3,.section-title,.greeting h2,.page-head .ph-title h2,.cc-name,.auth-card h2,.brand-title{font-family:var(--font-ui)}
.stat .num{font-family:var(--font-mono);font-weight:600;font-size:1.8rem;letter-spacing:-.02em}
.stat .ic{background:var(--acc-wash)} .stat .ic svg{stroke:var(--acc-d)}
.stat::after{background:linear-gradient(var(--acc-d),var(--acc))}

/* ---- KPI strip variant (dashboard) ---- */
.kpi-strip{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:22px;flex-wrap:wrap}
.kpi-strip .k{flex:1;min-width:150px;padding:18px 22px;border-inline-start:1px solid var(--border)}
.kpi-strip .k:first-child{border-inline-start:none}
.kpi-strip .k .lbl{font-size:.82rem;color:var(--muted);font-weight:600}
.kpi-strip .k .v{font-family:var(--font-mono);font-size:1.75rem;font-weight:600;margin-top:4px;letter-spacing:-.02em;line-height:1.1}
.kpi-strip .k .d{font-size:.75rem;font-weight:700;color:var(--acc-d)}

/* ---- dashboard two-column ---- */
.dash-grid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.qacts{display:flex;flex-direction:column;gap:8px}
.qact{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--border);border-radius:12px;
  text-decoration:none;color:inherit;font-weight:600;font-size:.92rem;transition:.2s;background:var(--surface)}
.qact:hover{border-color:var(--acc);background:var(--acc-wash);transform:translateX(-3px)}
.qact .qi{width:34px;height:34px;border-radius:9px;background:var(--acc-wash);color:var(--acc-d);display:grid;place-items:center;flex:none}
.qact .qi svg{width:18px;height:18px}
.qact .qa{margin-inline-start:auto;color:var(--muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);position:relative;display:inline-block}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--acc);opacity:.6;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@media(max-width:960px){.dash-grid{grid-template-columns:1fr}}

/* ---- centered app shell (no dead space on the left) ---- */
.shell{max-width:1440px;margin:0 auto;border-inline:1px solid var(--border);background:var(--bg)}
.content{max-width:none}

/* ---- collapsible one-time tools (add unit / add participants) ---- */
.slide-form{display:none;background:var(--surface);border:1px dashed var(--field-border);border-radius:var(--radius);padding:14px 16px;margin:0 0 14px}
.slide-form.open{display:block;animation:rise .3s var(--ease)}
.slide-form .tool-row{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}

/* ---- schedule control rows ---- */
.unit-row.compact{padding:.55rem .8rem;gap:.8rem}
.unit-row.compact .unit-title{font-size:.95rem}
.unit-time{flex:none;width:92px}
.unit-time input[type=time]{width:88px;font-family:var(--font-mono);font-weight:600;font-size:.88rem;
  padding:.45rem .5rem;border:1px solid transparent;border-radius:9px;background:var(--acc-wash);color:var(--acc-d);text-align:center;cursor:pointer}
.unit-time input[type=time]:hover{border-color:var(--acc)}
.unit-time input[type=time]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.unit-time .t-ro{font-family:var(--font-mono);font-weight:600;color:var(--acc-d)}

/* ---- score chips (pass grade from settings) ---- */
.score-chip{display:inline-block;min-width:44px;text-align:center;font-family:var(--font-mono);font-weight:700;font-size:.9rem;
  padding:4px 10px;border-radius:9px}
.score-chip.pass{background:var(--acc-wash);color:var(--acc-d)}
.score-chip.fail{background:#fde5e9;color:#c62348}
html[data-theme="dark"] .score-chip.fail{background:rgba(244,63,94,.16);color:#fb7c95}

/* ---- inline evaluation row ---- */
.eval-row td{background:var(--surface-2);border-top:none!important;padding:.7rem 1rem!important}
.eval-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.eval-inline label{display:flex;flex-direction:column;gap:4px;font-size:.75rem;font-weight:600;color:var(--muted)}
.eval-inline input,.eval-inline select{padding:.5rem .6rem;border:1px solid var(--field-border);border-radius:9px;
  background:var(--field-bg);color:var(--text);font-family:var(--font-ui);font-size:.88rem}
.eval-inline input:focus,.eval-inline select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.eval-inline input[type=date]{font-family:var(--font-mono)}

/* ============================================================
   Schedule grid (לו"ז) — days × time-slots timetable
   ============================================================ */
.sched-tools{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.sched-hint{font-size:.82rem;color:var(--muted)}
.slots-editor{background:var(--surface);border:1px dashed var(--field-border);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
.se-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.se-days{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem}
.se-days input{width:70px;text-align:center;font-family:var(--font-mono);padding:.5rem;border:1px solid var(--field-border);border-radius:9px;background:var(--field-bg);color:var(--text)}
.slot-rows{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.slot-edit-row{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:5px 8px}
.slot-edit-row.is-brk{background:#fdf3e0;border-color:transparent}
.slot-edit-row input[type=time]{font-family:var(--font-mono);border:1px solid var(--field-border);border-radius:7px;padding:.35rem .45rem;background:var(--field-bg);color:var(--text)}
.slot-edit-row .brk-tag{font-size:.78rem;font-weight:700;color:#b47612;padding:2px 8px}
.mini-x{width:22px;height:22px;border-radius:6px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem}
.mini-x:hover{background:var(--border);color:var(--rose)}
.slot-add-btns{display:flex;gap:8px;flex-wrap:wrap}

.grid-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
.sched-grid{border-collapse:collapse;width:100%;min-width:640px}
.sched-grid th{background:var(--surface-2);font-size:.82rem;font-weight:700;padding:11px 10px;text-align:center;
  border-inline-start:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--ink);white-space:nowrap}
.sched-grid th.tcol,.sched-grid td.tcol{width:74px;min-width:74px;background:var(--surface-2);font-family:var(--font-mono);
  font-weight:600;font-size:.85rem;color:var(--acc-d);text-align:center;border-inline-start:none}
.sched-grid td{border-inline-start:1px solid var(--border);border-top:1px solid var(--border);vertical-align:top;padding:6px}
.sched-grid td.cell{min-width:150px;position:relative;transition:background .15s}
.sched-grid td.cell:hover{background:var(--surface-2)}
.sched-grid td.cell.drop-on{background:var(--acc-wash);box-shadow:inset 0 0 0 2px var(--acc)}
.brk-row td{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 8px,transparent 8px,transparent 16px);
  text-align:center;padding:6px;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em}
.brk-row td span{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:3px 14px}

.ucard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:6px;
  box-shadow:var(--shadow-sm);cursor:grab;transition:transform .15s,box-shadow .15s,border-color .15s}
.ucard:hover{border-color:var(--acc);box-shadow:var(--shadow)}
.ucard.dragging{opacity:.4}
.ucard.is-done{opacity:.62}
.ucard.is-done .uc-title{text-decoration:line-through}
.uc-title{font-weight:700;font-size:.86rem;line-height:1.35;margin-bottom:6px;text-align:center;
  padding:5px 8px;border-radius:8px;background:var(--surface-2);color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uc-actions{display:flex;align-items:center;gap:4px}
.uc-actions form{display:inline}
.uc-btn{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--soft);
  display:grid;place-items:center;cursor:pointer;font-size:.8rem;transition:.15s;padding:0}
.uc-btn svg{width:13px;height:13px}
.uc-btn:hover{background:var(--surface-2);color:var(--text)}
.uc-btn.present{background:linear-gradient(120deg,var(--acc-d),var(--acc));color:#fff;border-color:transparent}
.uc-btn.present:hover{transform:translateY(-1px)}
.uc-btn.del:hover{color:var(--rose);border-color:var(--rose)}
.uc-nofile{color:var(--muted);font-size:1rem;padding:0 4px}
.cell-add{width:100%;border:1px dashed var(--border);background:transparent;color:var(--muted);border-radius:8px;
  padding:4px;cursor:pointer;font-size:.9rem;opacity:0;transition:.15s}
.sched-grid td.cell:hover .cell-add{opacity:1}
.cell-add:hover{border-color:var(--acc);color:var(--acc-d);background:var(--acc-wash)}

.or-sep{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);font-size:.82rem}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---- sub nav item (indented) ---- */
.nav a.sub{padding-inline-start:26px;font-size:.9rem;font-weight:500}
.nav a.sub svg{width:17px;height:17px;opacity:.75}
.nav a.sub::after{content:"";position:absolute;inset-inline-start:14px;top:0;bottom:0;width:1px;background:var(--border)}

/* ---- view tabs (לוח זמנים כללי / לפי ימים) ---- */
.view-tabs{display:inline-flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:16px}
.view-tab{padding:8px 18px;border-radius:9px;font-weight:600;font-size:.9rem;color:var(--soft);text-decoration:none;transition:.18s}
.view-tab:hover{color:var(--text)}
.view-tab.on{background:var(--surface);color:var(--acc-d);box-shadow:var(--shadow-sm)}

/* ---- board (day columns) ---- */
.board-tools{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.board-cols{display:flex;flex-wrap:wrap;gap:14px;padding-bottom:10px;align-items:flex-start}
.board-col{flex:1 1 185px;max-width:260px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:background .15s,box-shadow .15s}
.board-col.add-day{flex:0 1 170px}
.board-col.drop-on{background:var(--acc-wash);box-shadow:inset 0 0 0 2px var(--acc)}
.board-col.add-day{background:transparent;border-style:dashed}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:700;font-size:.92rem;border-bottom:1px solid var(--border)}
.col-head.muted{color:var(--muted)}
.col-head .col-n{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);background:var(--surface-2);border-radius:20px;padding:1px 9px}
.col-body{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.uc-time{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--acc-d);background:var(--acc-wash);border-radius:6px;padding:1px 6px;margin-inline-end:auto}

/* ---- לפי ימים (per-day time editor) ---- */
.day-tabs{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.day-tabs-scroll{display:flex;gap:6px;overflow-x:auto;flex:1;padding:2px}
.day-tab{flex:none;padding:6px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  font-weight:600;font-size:.88rem;color:var(--soft);text-decoration:none;transition:.15s;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
.day-tab:hover{border-color:var(--acc);color:var(--text)}
.day-tab.on{background:linear-gradient(120deg,var(--acc-d),var(--acc));color:#fff;border-color:transparent}
.day-tab .dt-date{font-size:.66rem;font-weight:500;opacity:.65;letter-spacing:.02em}
.day-tab.on .dt-date{opacity:.92;color:#fff}
.day-arrow{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;font-size:1.2rem;color:var(--soft);text-decoration:none;transition:.15s}
.day-arrow:hover{border-color:var(--acc);color:var(--acc-d)}
.day-arrow.off{opacity:.35;pointer-events:none}
/* "לפי ימים" = a vertical TIMELINE: continuous rail + a colored node per unit */
.day-list{position:relative;display:flex;flex-direction:column;gap:0;padding:6px 0}
.day-list::before{content:"";position:absolute;top:24px;bottom:24px;right:96px;width:2px;background:var(--border);border-radius:2px}
.tunit{display:flex;align-items:center;gap:12px;position:relative;padding:8px 2px;background:transparent}
.tunit.is-done{opacity:.5}
.tunit.is-done .tu-title{text-decoration:line-through}

/* time column — computed start (read-only) + editable duration */
.tu-when{flex:none;width:72px;display:flex;flex-direction:column;align-items:stretch;gap:4px}
.t-start{font-family:var(--font-mono);font-weight:800;font-size:1rem;color:var(--acc-d);text-align:center;letter-spacing:.02em}
.dur-form{display:flex;align-items:center;justify-content:center;gap:3px}
.t-dur{width:46px;box-sizing:border-box;font-family:var(--font-mono);font-weight:700;font-size:.78rem;text-align:center;
  padding:.28rem .2rem;border:1px solid var(--field-border);border-radius:7px;background:var(--field-bg);color:var(--text);transition:.15s}
.t-dur:hover{border-color:var(--acc)}
.t-dur:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.t-dur-u{font-size:.66rem;color:var(--muted)}
.t-dur-ro{font-size:.72rem;color:var(--muted);text-align:center}

/* time input (day-clock start/end, typed manually) */
.t-in{box-sizing:border-box;font-family:var(--font-mono);font-weight:700;font-size:.85rem;text-align:center;letter-spacing:.02em;
  padding:.4rem .5rem;border:1px solid var(--field-border);border-radius:8px;background:var(--field-bg);color:var(--acc-d);transition:.15s}
.t-in::placeholder{color:currentColor;opacity:.4}
.t-in:hover{border-color:var(--acc)}
.t-in:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus);background:var(--surface);color:var(--acc-d)}
.t-ro{font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--acc-d);text-align:center;white-space:nowrap}

/* day-clock bar (start/end of the day + fill indicator) */
.day-clock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.day-clock .dc-label{font-weight:700;font-size:.9rem;color:var(--text)}
.dc-form{display:flex;align-items:center;gap:6px}
.dc-form .t-in{width:60px}
.dc-form .t-dash{color:var(--muted);font-size:.82rem;font-weight:600}
.dc-fill{margin-inline-start:auto;font-size:.82rem;font-weight:700;border-radius:20px;padding:3px 12px}
.dc-fill.ok{color:#0e9f6e;background:rgba(16,185,129,.14)}
.dc-fill.under{color:var(--muted);background:var(--surface)}
.dc-fill.over{color:#dc2626;background:rgba(220,38,38,.12)}

/* rail node (colored per kind) */
.tu-rail{flex:none;width:22px;align-self:stretch;position:relative}
.tu-rail::after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--acc);border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--acc);z-index:1}
.tunit.k-unit  .tu-rail::after{background:#10b981;box-shadow:0 0 0 1.5px #10b981}
.tunit.k-note  .tu-rail::after{background:#3b82f6;box-shadow:0 0 0 1.5px #3b82f6}
.tunit.k-break .tu-rail::after{background:#f59e0b;box-shadow:0 0 0 1.5px #f59e0b}
.tunit.k-test  .tu-rail::after{background:#8b5cf6;box-shadow:0 0 0 1.5px #8b5cf6}

/* content (transparent — the colored title band is the event marker) */
.tu-body{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.tu-title{flex:1;font-weight:700;font-size:.95rem;min-width:0;text-align:center;
  padding:8px 14px;border-radius:10px;background:var(--surface-2)}
.tu-actions{display:flex;gap:8px;align-items:center}

/* ---- course units grouped by day ---- */
.day-group{margin-bottom:22px}
.day-head{display:flex;align-items:center;gap:12px;margin:0 2px 12px}
.day-head .day-badge{font-weight:800;font-size:.95rem;color:var(--acc-d);background:var(--acc-wash);
  border-radius:20px;padding:6px 16px;letter-spacing:.01em}
.day-head .day-count{font-size:.8rem;color:var(--muted);font-family:var(--font-mono)}
.day-head::after{content:"";flex:1;height:1px;background:var(--border)}
.unit-day{display:flex;align-items:center;gap:8px;flex:none}
.unit-day span{font-size:.85rem;font-weight:600;color:var(--muted)}
.unit-day input{width:66px;text-align:center;font-family:var(--font-mono);font-weight:600;
  padding:.72rem .4rem;border:1px solid var(--field-border);border-radius:10px;background:var(--field-bg);color:var(--text)}
.unit-day input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}

/* modal validation alert */
.form-alert{background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.35);
  color:#dc2626;border-radius:10px;padding:.7rem .85rem;margin-bottom:.9rem;
  font-size:.86rem;line-height:1.4;font-weight:600}

/* ---- fullscreen schedule editor (overlay on same page) ---- */
.fs-bar{display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
  position:sticky;top:0;background:var(--bg);padding:2px 0 12px;z-index:2;border-bottom:1px solid var(--border)}
.fs-bar h3{font-family:var(--font-ui);font-weight:800;font-size:1.25rem}
.board.sc-fs{position:fixed;inset:0;z-index:300;background:var(--bg);margin:0;padding:20px 26px 30px;overflow:auto}
.board.sc-fs .fs-bar{display:flex}
.board.sc-fs .btn-fs{display:none}
.board.sc-fs .board-col{flex:1 1 200px;max-width:300px}

/* ---- multi-row upload modal ---- */
.sc-modal.wide{width:min(760px,95vw)}
.up-rows{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.6rem}
.up-row{display:grid;grid-template-columns:146px 1fr 92px 76px 34px;gap:.5rem;align-items:center}
.up-row.lib{grid-template-columns:146px 1fr 92px 76px 34px}
.up-row.blk{grid-template-columns:116px 1fr 92px 76px 34px}
.up-row select,.up-row input[type=text]{padding:.62rem .55rem;border:1px solid var(--field-border);border-radius:10px;
  background:var(--field-bg);color:var(--text);font-size:.9rem;font-family:inherit;width:100%}
.dur-cell{display:flex;align-items:center;gap:4px}
.dur-cell input{width:100%;box-sizing:border-box;padding:.6rem .25rem;border:1px solid var(--field-border);border-radius:10px;
  background:var(--field-bg);color:var(--text);font-family:var(--font-mono);font-weight:700;text-align:center;font-size:.85rem}
.dur-cell input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.dur-cell i{font-size:.66rem;color:var(--muted);font-style:normal}
.up-row select:focus,.up-row input[type=text]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.up-file{display:flex;align-items:center;gap:.45rem;padding:.62rem .7rem;border:1px dashed var(--field-border);
  border-radius:10px;background:var(--field-bg);color:var(--muted);cursor:pointer;font-size:.82rem;overflow:hidden;white-space:nowrap}
.up-file svg{width:16px;height:16px;flex:0 0 auto}
.up-file span{overflow:hidden;text-overflow:ellipsis}
.up-file input[type=file]{display:none}
.up-file:hover{border-color:var(--acc);color:var(--acc-d)}
.up-row.has-file .up-file{border-style:solid;border-color:var(--acc);color:var(--acc-d);background:var(--acc-wash)}
.up-file-lbl{display:flex;align-items:center;justify-content:center;padding:.62rem .7rem;font-size:.82rem;
  color:var(--muted);background:var(--surface-2);border-radius:10px}
.up-del{width:34px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  color:var(--soft);cursor:pointer;font-size:.85rem;transition:.15s}
.up-del:hover{color:var(--rose);border-color:var(--rose)}
.add-row-btn{margin-bottom:.4rem}
@media (max-width:560px){ .up-row,.up-row.lib,.up-row.blk{grid-template-columns:1fr 1fr;grid-auto-rows:auto} .up-file{grid-column:1/-1} }

/* modal must sit above the fullscreen board */
.sc-modal-overlay{z-index:600}

/* ---- schedule blocks: color-coded TITLE BANDS (unit=green, activity=blue, break=amber, test=violet) ---- */
.ucard.k-unit  .uc-title{background:rgba(16,185,129,.14);color:#0e9f6e}
.ucard.k-note  .uc-title{background:rgba(59,130,246,.14);color:#2563eb}
.ucard.k-break .uc-title{background:rgba(245,158,11,.18);color:#b45309}
.ucard.k-test  .uc-title{background:rgba(139,92,246,.16);color:#7c3aed}
.uc-min{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:#b45309;
  background:rgba(245,158,11,.16);border-radius:6px;padding:1px 6px;margin-inline-end:auto}
.tunit.k-unit  .tu-title{background:rgba(16,185,129,.14);color:#0e9f6e}
.tunit.k-note  .tu-title{background:rgba(59,130,246,.14);color:#2563eb}
.tunit.k-break .tu-title{background:rgba(245,158,11,.18);color:#b45309}
.tunit.k-test  .tu-title{background:rgba(139,92,246,.16);color:#7c3aed}
.tunit .uc-min{margin-inline-start:8px;margin-inline-end:0}

/* segmented control (block type picker) */
.seg{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:12px}
.seg button{flex:1;padding:.55rem .4rem;border:1px solid transparent;border-radius:9px;background:transparent;
  color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--acc-d);border-color:var(--acc);box-shadow:var(--shadow-sm)}

/* drag-reorder "make room" placeholder */
.drop-gap{height:42px;margin-bottom:6px;border-radius:10px;border:2px dashed var(--acc);
  background:var(--acc-wash);box-sizing:border-box;pointer-events:none}
.ucard.dragging{display:none}

/* day-count control (board toolbar) */
.daycount{display:flex;align-items:center;gap:8px;margin:0}
.daycount label{font-size:.85rem;font-weight:600;color:var(--muted)}
.daycount input{width:62px;text-align:center;font-family:var(--font-mono);font-weight:700;
  padding:.45rem .3rem;border:1px solid var(--field-border);border-radius:9px;background:var(--field-bg);color:var(--text)}
.daycount input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}

/* active timer button (toggled to "סגור טיימר") */
.btn.present.timer-on,.uc-btn.present.timer-on{background:linear-gradient(120deg,#dc2626,#f87171);border-color:transparent}

/* unified add-row (type + optional file + name + day + duration) */
.up-row2{display:flex;gap:.5rem;align-items:center}
.up-row2 .row-type{flex:0 0 96px}
.up-row2 .up-file{flex:0 0 138px}
.up-row2 .r-name{flex:1;min-width:70px}
.up-row2 .r-day{flex:0 0 86px}
.up-row2 .dur-cell{flex:0 0 74px}
.up-row2 .up-del{flex:0 0 34px}
.up-row2:not([data-type="unit"]) .up-file{display:none}
.up-row2 select,.up-row2 input[type=text]{padding:.62rem .5rem;border:1px solid var(--field-border);border-radius:10px;
  background:var(--field-bg);color:var(--text);font-size:.9rem;font-family:inherit;width:100%;box-sizing:border-box}
.up-row2 select:focus,.up-row2 input[type=text]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}
.up-row2.has-file .up-file{border-style:solid;border-color:var(--acc);color:var(--acc-d);background:var(--acc-wash)}
@media (max-width:600px){ .up-row2{flex-wrap:wrap} .up-row2 .r-name{flex:1 1 100%} }

/* ---- dashboard live status ("מה קורה עכשיו") ---- */
.live-board{margin:20px 0}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.live-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);transition:.15s;border-inline-start:3px solid var(--border)}
.live-card:hover{border-color:var(--acc);box-shadow:var(--shadow)}
.live-card.lc-unit{border-inline-start-color:#10b981}
.live-card.lc-break{border-inline-start-color:#f59e0b}
.live-card.lc-none{opacity:.9}
.lc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.lc-name{font-weight:700;font-size:.98rem}
.lc-inst{font-size:.78rem;color:var(--muted)}
.lc-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-kind{font-size:.8rem;font-weight:700}
.lc-status.unit .lc-kind{color:#0e9f6e}
.lc-status.break .lc-kind{color:#b45309}
.lc-status.none .lc-kind{color:var(--muted);font-weight:600}
.lc-label{font-size:.85rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.lc-time{margin-inline-start:auto;font-family:var(--font-mono);font-weight:800;font-size:1.05rem;border-radius:8px;padding:2px 10px}
.lc-status.unit .lc-time{color:#0e9f6e;background:rgba(16,185,129,.14)}
.lc-status.break .lc-time{color:#b45309;background:rgba(245,158,11,.16)}
.lc-status.break.done .lc-time{color:#dc2626;background:rgba(220,38,38,.14)}

/* ---- read-only (completed course) banner ---- */
.ro-banner{display:flex;align-items:center;gap:10px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);
  color:#b45309;border-radius:12px;padding:10px 16px;margin-bottom:16px;font-size:.9rem}
.ro-banner svg{width:18px;height:18px;flex:none}

/* ---- system log ---- */
.log-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.log-filters input,.log-filters select{padding:.5rem .7rem;border:1px solid var(--field-border);border-radius:10px;
  background:var(--field-bg);color:var(--text);font-family:inherit;font-size:.88rem}
.log-action{display:inline-block;font-size:.82rem;font-weight:600;border-radius:20px;padding:2px 10px;background:var(--surface-2);color:var(--text);white-space:nowrap}
.role-chip{font-size:.68rem;color:var(--muted);background:var(--surface-2);border-radius:12px;padding:1px 8px;margin-inline-start:6px}
.pager{margin-top:14px}

/* ---- instructor analytics bars ---- */
.an-bar{position:relative;height:22px;border-radius:6px;background:var(--surface-2);overflow:hidden;min-width:90px}
.an-bar-fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:6px;transition:width .3s}
.an-bar-fill.hi{background:linear-gradient(90deg,#10b981,#34d399)}
.an-bar-fill.mid{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.an-bar-fill.lo{background:linear-gradient(90deg,#f87171,#fca5a5)}
.an-bar-v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;color:var(--text);font-family:var(--font-mono)}
.an-table td{vertical-align:middle}

/* live-question option inputs */
.poll-opts{display:flex;flex-direction:column;gap:.5rem}
.poll-opts input{padding:.7rem .8rem;border:1px solid var(--field-border);border-radius:10px;background:var(--field-bg);color:var(--text);font-family:inherit;font-size:.92rem}
.poll-opts input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--field-focus)}

/* ---- in-page presenter control panel (BIG — readable from a podium) ---- */
.present-panel{position:fixed;inset-block-end:18px;inset-inline-end:18px;width:min(720px,calc(100vw - 36px));
  background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);z-index:500;
  display:flex;flex-direction:column;overflow:hidden}
.present-panel[hidden]{display:none}
.pp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;
  background:linear-gradient(120deg,var(--acc-d),var(--acc));color:#fff}
.pp-title{font-weight:800;font-size:1.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-count{font-family:var(--font-mono);font-weight:800;font-size:1.05rem;background:rgba(255,255,255,.22);border-radius:20px;padding:3px 14px;white-space:nowrap}
.pp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border)}
.pp-timer{font-family:var(--font-mono);font-weight:800;font-size:1.45rem;color:var(--acc-d)}
.pp-timer .pp-plan{color:var(--muted);font-size:1rem;font-weight:600}
.pp-timer.over{color:var(--rose)}
.pp-next{font-size:1rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.pp-notes{padding:18px 22px;font-size:1.25rem;line-height:1.75;min-height:145px;max-height:51vh;overflow:auto;white-space:pre-wrap;color:var(--text)}
.pp-notes.empty{color:var(--muted);font-style:italic}
.pp-pad{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
.pp-btn{border:none;border-radius:12px;padding:20px 8px;font-size:1.15rem;font-weight:800;cursor:pointer;color:#fff;font-family:inherit;transition:.12s}
.pp-btn:active{transform:scale(.97)}
.pp-btn.prev{background:var(--surface-2);color:var(--text)}
.pp-btn.close{background:linear-gradient(120deg,#dc2626,#f87171)}
.pp-btn.next{background:linear-gradient(120deg,var(--acc-d),var(--acc))}

/* ---- screen picker: visual monitor map ---- */
.sc-modal.scr-modal{width:min(560px,95vw)}
.scr-map{position:relative;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;margin:4px 0 14px;overflow:hidden}
.scr-box{position:absolute;box-sizing:border-box;border:2px solid var(--border);border-radius:8px;background:var(--surface);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:.15s;overflow:hidden;min-width:70px;min-height:48px}
.scr-box:hover{border-color:var(--acc);box-shadow:var(--shadow)}
.scr-box.chosen{border-color:var(--acc);background:var(--acc-wash);box-shadow:inset 0 0 0 2px var(--acc)}
.scr-num{font-family:var(--font-mono);font-weight:800;font-size:1.6rem;color:var(--acc-d);line-height:1.1}
.scr-lbl{font-size:.72rem;font-weight:700;color:var(--text);max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-dim{font-family:var(--font-mono);font-size:.66rem;color:var(--muted)}
.scr-box .scr-tag{position:absolute;top:5px;inset-inline-start:6px;font-size:.62rem;font-weight:800;border-radius:10px;padding:1px 8px}
.scr-box .scr-tag.pri{background:var(--surface-2);color:var(--muted)}
.scr-box .scr-tag.sel{background:var(--acc);color:#fff;top:auto;bottom:5px}

/* presenter panel: minimize button + reopen chip */
.pp-min{width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.22);color:#fff;
  font-weight:800;font-size:1.15rem;line-height:1;cursor:pointer;font-family:inherit}
.pp-min:hover{background:rgba(255,255,255,.35)}
.pp-chip{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:499;display:inline-flex;align-items:center;gap:8px;
  border:none;border-radius:99px;padding:.75rem 1.3rem;font-weight:700;font-size:.92rem;font-family:inherit;color:#fff;cursor:pointer;
  background:linear-gradient(120deg,var(--acc-d),var(--acc));box-shadow:var(--shadow-lg);transition:.15s}
.pp-chip:hover{transform:translateY(-2px)}
.pp-chip[hidden]{display:none}

/* presenter remote: video controls */
.pp-video{display:flex;align-items:center;gap:12px;padding:12px 22px;border-top:1px solid var(--border)}
.pp-video[hidden]{display:none}
.pp-vlabel{font-size:.9rem;color:var(--muted);font-weight:700}
.pp-vbtn{width:46px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:1.05rem;cursor:pointer}
.pp-vbtn:hover{border-color:var(--acc)}
.pp-vvol{display:flex;align-items:center;gap:8px;flex:1}
.pp-vvol input[type=range]{flex:1;accent-color:var(--acc);cursor:pointer}

.pp-min:disabled{opacity:.32;cursor:default;pointer-events:none}

/* presenter remote: formatted notes */
.pp-notes ol,.pp-notes ul{margin:.2em 1.4em .2em 0;padding-inline-start:1.2em}
.pp-notes li{margin:.15em 0}
.pp-notes b{font-weight:800}
.pp-notes .scn-blank{height:.6em}
.pp-notes div{margin:.12em 0}