/* ============================================================================
   dashboard.css — Student Portal (login.html) SURFACE stylesheet.
   Consumes ik-tokens.css (tokens) + ik-components.css (shared primitives),
   both loaded BEFORE this file. Layout + page-specific feature rules only.
   2026-07-13 architecture cleanup: former login-dashboard.css +
   login-overview-premium.css + login-redesign.css feature rules were folded
   in here IN ORIGINAL CASCADE ORDER; their token blocks moved to ik-tokens.css.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;}
/* form controls inherit the body font (Lato) instead of the browser default */
button,input,select,textarea{font-family:inherit;}

/* ── LOADING ── */
#loading-screen{position:fixed;inset:0;background:var(--sidebar-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;}
.loader-emblem{width:60px;height:60px;border-radius:14px;background:var(--maroon);display:flex;align-items:center;justify-content:center;font-family:var(--font-logo);font-size:24px;font-weight:900;color:#fff;margin-bottom:20px;animation:pulse 1.5s infinite;}
.loader-text{color:rgba(255,255,255,0.5);font-size:13px;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}


/* ── LOGIN (premium split-card gate) ── */
#login-screen{
  display:none;min-height:100vh;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(75% 55% at 12% -5%, rgba(139,26,26,0.16), transparent 60%),
    radial-gradient(65% 50% at 105% 105%, rgba(180,83,9,0.12), transparent 55%),
    var(--bg);
}
.login-card{
  width:100%;max-width:880px;display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;
  box-shadow:0 1px 2px rgba(40,16,16,.06),0 30px 60px -22px rgba(40,16,16,.30);
  animation:loginRise .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes loginRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.login-card{animation:none}}

/* left brand panel */
.login-brandside{position:relative;overflow:hidden;padding:42px 36px;color:#fff;
  background:linear-gradient(160deg,#8b1a1a 0%,#6d1414 55%,#490d0d 100%);}
.login-brandside::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 42% at 100% 0%, rgba(255,255,255,.10), transparent 62%);}
.login-brandtop{display:flex;align-items:center;gap:12px;margin-bottom:28px;position:relative;z-index:1;}
.login-emblem{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,0.10);
  border:1.5px solid rgba(180,83,9,0.85);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(180,83,9,0.28),0 6px 18px rgba(0,0,0,0.25);flex-shrink:0;}
.login-badge{font-size:12px;line-height:1.5;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f0d9a8;
  background:rgba(180,83,9,0.22);border:1px solid rgba(180,83,9,0.5);padding:5px 11px;border-radius:999px;}
.login-hero{font-family:var(--font-heading);font-size:1.75rem;line-height:1.16;font-weight:900;
  margin-bottom:12px;position:relative;z-index:1;}
.login-hero span{color:#f0d9a8;}
.login-hero-sub{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,0.80);margin-bottom:6px;max-width:34ch;position:relative;z-index:1;}
.login-hero-bn{font-size:.86rem;color:rgba(255,255,255,0.60);margin-bottom:26px;position:relative;z-index:1;}
.login-feats{list-style:none;display:grid;gap:14px;position:relative;z-index:1;}
.login-feats li{display:flex;gap:11px;align-items:flex-start;}
.login-feats li>span{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(180,83,9,0.92);
  color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.login-feats strong{display:block;font-size:.9rem;font-weight:700;}
.login-feats small{display:block;font-size:.78rem;color:rgba(255,255,255,0.60);margin-top:1px;}

/* right form panel */
.login-formside{padding:42px 38px;display:flex;flex-direction:column;justify-content:center;}
.login-welcome{margin-bottom:22px;}
.login-welcome h2{font-family:var(--font-heading);font-size:1.4rem;font-weight:900;color:var(--text);}
.login-welcome p{font-size:13px;color:var(--muted);margin-top:3px;}
.login-tabs{display:flex;background:var(--bg);border-radius:11px;padding:4px;margin-bottom:20px;}
.ltab{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:700;color:var(--muted);border-radius:8px;cursor:pointer;transition:all 0.2s;}
.ltab.active{background:var(--card);color:var(--maroon);box-shadow:0 1px 3px rgba(0,0,0,0.08),0 2px 8px rgba(139,26,26,0.10);}
.field{margin-bottom:15px;}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:7px;}
.field input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:14px;outline:none;transition:border-color 0.18s,box-shadow 0.18s;}
.field input:focus{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(139,26,26,0.14);}
.field input::placeholder{color:#9ca3af;}
.login-btn{width:100%;background:linear-gradient(180deg,var(--maroon),#7a1616);color:#fff;border:none;border-radius:11px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;transition:transform 0.12s,box-shadow 0.2s,background 0.2s;box-shadow:0 8px 20px -6px rgba(139,26,26,0.5);margin-top:4px;}
.login-btn:hover{background:linear-gradient(180deg,var(--maroon2),#8b1a1a);box-shadow:0 12px 26px -6px rgba(139,26,26,0.55);}
.login-btn:active{transform:translateY(1px);}
.login-btn:disabled{opacity:0.55;cursor:not-allowed;box-shadow:none;}
/* Unscripta host (brand.js sets <html data-brand="unscripta">): the login card's hardcoded IK
   maroon → Unscripta indigo. Pure override; IK (no attribute) is untouched. Colours from the
   [data-brand="unscripta"] tokens in ik-tokens.css. */
[data-brand="unscripta"] .login-brandside{background:linear-gradient(160deg,#4B3FD6 0%,#3A2FB0 55%,#221A73 100%);}
[data-brand="unscripta"] .login-emblem{border-color:rgba(255,255,255,0.45);box-shadow:0 6px 18px rgba(0,0,0,0.25);}
[data-brand="unscripta"] .login-badge{color:#E4E0FF;background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.35);}
[data-brand="unscripta"] .login-hero span{color:#C9C2FF;}
[data-brand="unscripta"] .login-feats li>span{background:rgba(255,255,255,0.22);}
[data-brand="unscripta"] .login-btn{background:linear-gradient(180deg,#5B4BFF,#3F35C9);}
[data-brand="unscripta"] .login-btn:hover{background:linear-gradient(180deg,#7264FF,#4B3FD6);box-shadow:0 12px 26px -6px rgba(75,63,214,0.5);}
/* Unscripta LMS mark (login-shell.js brandUnscripta swaps the IK logo images for this). */
.us-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#7B6CFF,#4B3FD6);color:#fff;font-weight:900;font-size:16px;line-height:1;letter-spacing:0;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25);}
.us-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;}
.us-logo .us-wm{display:flex;flex-direction:column;line-height:1.1;}
.us-logo .us-wm b{font-size:16px;font-weight:900;letter-spacing:.2px;}
.us-logo .us-wm small{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,0.7);}
.login-error{display:none;background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.28);border-radius:9px;padding:10px 14px;font-size:13px;color:#b91c1c;margin-top:12px;text-align:center;}
.login-error.show{display:block;}
.forgot-link{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px;cursor:pointer;transition:color 0.2s;}
.forgot-link:hover{color:var(--maroon);}
.staff-login-link{text-align:center;font-size:11.5px;color:#9ca3af;margin-top:18px;cursor:pointer;transition:color 0.2s;}
.staff-login-link:hover{color:var(--maroon);}
.reset-panel{display:none;margin-top:16px;border-top:1px solid var(--border);padding-top:16px;}
.reset-panel.show{display:block;}
.reset-success{display:none;background:rgba(21,128,61,0.10);border:1px solid rgba(21,128,61,0.30);border-radius:9px;padding:10px 14px;font-size:13px;color:#15803d;margin-top:10px;text-align:center;}
.reset-success.show{display:block;}
.reset-back{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px;cursor:pointer;transition:color 0.2s;}
.reset-back:hover{color:var(--maroon);}
@media (max-width:760px){
  .login-card{grid-template-columns:1fr;max-width:440px;}
  .login-brandside{padding:32px 30px 28px;}
  .login-hero{font-size:1.5rem;}
  .login-hero-sub{margin-bottom:4px;}
  .login-hero-bn{margin-bottom:0;}
  .login-feats{display:none;}
  .login-formside{padding:30px 28px 34px;}
}

/* ── DASHBOARD ── */
#dashboard-screen{display:none;min-height:100vh;}
.dashboard-layout{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{width:248px;background:linear-gradient(180deg,#3a0d0d 0%,#230707 55%,#160404 100%);border-right:1px solid rgba(180,83,9,0.16);height:100vh;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:10;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sidebar::-webkit-scrollbar{width:0;height:0;}
.sb-brand{padding:14px 18px 10px;border-bottom:1px solid rgba(180,83,9,0.14);}
.sb-emblem{width:32px;height:32px;border-radius:10px;background:linear-gradient(180deg,#9f1d1d,#681010);border:1px solid rgba(180,83,9,0.7);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-logo);font-size:13px;font-weight:900;color:#fff;margin-right:9px;vertical-align:middle;box-shadow:0 0 0 1px rgba(180,83,9,0.22),0 8px 20px rgba(0,0,0,0.22);}
.sb-name{font-size:13px;font-weight:700;color:#fff;vertical-align:middle;}
.sb-sub{font-size:12px;line-height:1.5;color:rgba(240,217,168,0.55);margin-top:2px;padding-left:41px;letter-spacing:0.04em;}
.sb-user{padding:9px 18px;border-bottom:1px solid rgba(180,83,9,0.12);display:flex;align-items:center;gap:10px;}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--maroon);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;box-shadow:0 0 0 1.5px rgba(180,83,9,0.55),0 8px 22px rgba(0,0,0,0.22);}
.sb-user-info .sb-uname{font-size:13px;font-weight:600;color:#fff;}
.sb-user-info .sb-role{font-size:12px;line-height:1.5;color:rgba(255,255,255,0.52);text-transform:uppercase;letter-spacing:0.08em;}
.sb-user-info .sb-student-id{font-family:var(--font-mono);font-size:12px;line-height:1.5;color:rgba(255,255,255,0.72);letter-spacing:0.06em;margin-top:2px;}
.acct-identity-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start;margin-bottom:16px;}
@media(max-width:768px){.acct-identity-grid{grid-template-columns:1fr;}}
.acct-profile-grid{display:grid;gap:10px;}
.acct-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border,#ece8e0);font-size:13px;}
.acct-row:last-child{border-bottom:none;}
.acct-lbl{color:var(--muted);font-weight:600;}
.acct-val{color:var(--text);text-align:right;word-break:break-word;}
.acct-fee-sub{font-size:12px;margin-top:4px;}
.acct-actions{margin-top:16px;}
.acct-reset-msg{margin-top:10px;font-size:12px;color:var(--green);line-height:1.5;}
.acct-idcard-lead{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5;}
.acct-idcard-photo{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.acct-idcard-thumb{width:72px;height:72px;border-radius:10px;background:var(--divider,#f3f1ec) center/cover no-repeat;border:1px solid var(--border,#e6e3dc);flex-shrink:0;}
.acct-idcard-thumb.is-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;font-weight:700;text-align:center;padding:8px;background-image:none;}
.acct-idcard-photo-meta{display:flex;flex-direction:column;gap:6px;min-width:0;}
.acct-idcard-hint{font-size:12px;color:var(--muted);line-height:1.4;}
.acct-idcard-fields{display:grid;gap:12px;margin-bottom:14px;}
.acct-idcard-field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:0.04em;text-transform:uppercase;}
.acct-idcard-field input,.acct-idcard-field select{width:100%;max-width:320px;padding:9px 12px;font-size:14px;}
.acct-idcard-locked{font-size:13px;color:var(--text);padding:9px 0;}
.acct-idcard-checks{display:grid;gap:10px;margin:4px 0 14px;}
.acct-idcard-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;color:var(--text);}
.acct-idcard-check input{margin-top:2px;flex-shrink:0;}
.acct-idcard-msg{margin-top:10px;font-size:12px;line-height:1.5;display:none;}
.acct-idcard-msg.is-ok{color:var(--green);display:block;}
.acct-idcard-msg.is-err{color:var(--red);display:block;}

/* Reading Zone */
.rz-cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.rz-cat-btn{border:1px solid var(--border,#e6e3dc);background:var(--card-bg,#fff);color:var(--text);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.rz-cat-btn:hover{border-color:var(--maroon);color:var(--maroon);}
.rz-cat-btn.active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.rz-cat-count{opacity:.75;font-weight:600;}
.rz-panels .rz-panel{display:none;}
.rz-panels .rz-panel.active{display:block;}
.rz-search-row{margin-bottom:14px;}
.rz-search{width:100%;max-width:360px;padding:9px 12px;font-size:13px;}
.rz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.rz-card{border:1px solid var(--border,#e6e3dc);border-radius:10px;overflow:hidden;background:var(--card-bg,#fff);display:flex;flex-direction:column;}
.rz-cover{aspect-ratio:2/3;background:#f3f1ec;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.rz-cover-img{width:100%;height:100%;object-fit:cover;display:block;}
.rz-cover-fallback{font-size:2.4rem;opacity:.45;}
.rz-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1;}
.rz-title{font-size:13px;font-weight:700;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.rz-meta{font-size:11px;color:var(--muted);}
.rz-actions{display:flex;gap:6px;margin-top:auto;}
.rz-btn{flex:1;padding:7px 8px!important;font-size:11px!important;text-align:center;text-decoration:none;}
.rz-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.rz-admin-card{display:flex;gap:12px;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--card-bg,#fff);}
.rz-admin-thumb{width:56px;height:84px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#f3f1ec;}
.rz-admin-thumb-fallback{display:flex;align-items:center;justify-content:center;font-size:1.6rem;}
.rz-admin-card-body{flex:1;min-width:0;}
.rz-admin-title{font-weight:700;font-size:13px;margin-bottom:4px;}
.rz-admin-meta{font-size:11px;color:var(--muted);margin-bottom:8px;}
.rz-admin-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* Video Zone */
.vz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.vz-card{border:1px solid var(--border,#e6e3dc);border-radius:10px;overflow:hidden;background:var(--card-bg,#fff);display:flex;flex-direction:column;}
.vz-thumb-link{display:block;text-decoration:none;color:inherit;}
.vz-thumb{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;}
.vz-thumb-img{width:100%;height:100%;object-fit:cover;display:block;}
.vz-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:rgba(255,255,255,0.5);}
.vz-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;background:rgba(0,0,0,0.28);opacity:0;transition:opacity .15s;}
.vz-thumb-link:hover .vz-play{opacity:1;}
.vz-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.vz-title{font-size:13px;font-weight:700;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vz-channel{font-size:11px;color:var(--muted);}
.vz-meta{font-size:11px;color:var(--muted);}
.vz-btn{margin-top:auto;padding:7px 8px!important;font-size:11px!important;text-align:center;text-decoration:none;}
.vz-admin-thumb-wide{width:96px;height:54px;object-fit:cover;}
.sb-nav{flex:1;padding:6px 12px 6px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sb-nav::-webkit-scrollbar{width:0;height:0;}
.nav-section-label{font-size:11px;line-height:1.45;font-weight:800;text-transform:uppercase;letter-spacing:0.16em;color:rgba(240,217,168,0.42);padding:6px 12px 3px;margin-top:1px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:650;color:rgba(255,255,255,0.60);cursor:pointer;transition:background 0.15s,color 0.15s,transform 0.15s;margin-bottom:1px;}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;transform:translateX(2px);}
.nav-item.active{background:#fff;color:#7f1717;font-weight:900;box-shadow:0 0 0 1px rgba(180,83,9,0.28),0 8px 20px rgba(0,0,0,0.22);}
.nav-icon{font-size:15px;width:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sb-bottom{padding:8px 12px;border-top:1px solid rgba(180,83,9,0.12);}
.logout-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;font-size:13px;color:rgba(255,255,255,0.62);cursor:pointer;transition:all 0.15s;}
.logout-item:hover{background:rgba(220,38,38,0.1);color:#fca5a5;}

/* Main */
/* min-width:0 is load-bearing: .main-content is a flex item inside .dashboard-layout,
   and a flex item's default min-width:auto refuses to shrink below its content's
   min-content width. Any nowrap child (long title, wide table, long batch name) then
   pushed the whole page wider than the viewport — the source of the horizontal
   scroll on phones. */
.main-content{margin-left:248px;flex:1;min-width:0;padding:26px 34px 34px;min-height:100vh;}
/* The header title block must GROW, or .page-header's space-between has nothing to
   distribute and the CTA strands itself mid-page (was: 488px copy in a 1109px header). */
.page-header{margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.page-header-copy{min-width:0;flex:1 1 auto;}
.page-header h1{font-family:var(--font-heading);font-size:1.7rem;line-height:1.25;font-weight:900;color:var(--text);margin-bottom:4px;}
.page-header p{font-size:13px;line-height:1.5;color:var(--muted);}
/* Header CTA (Practice Now / Open Exam Hall / …) — pinned to the header's right edge. */
.page-header-cta{flex:0 0 auto;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
/* Room for the app-bar actions that overlay this row (width measured at runtime by
   login-shell.js, which sets --appbar-actions-w; the fallback matches the 4-icon set). */
#dashboard-screen .page-header{padding-right:var(--appbar-actions-w,212px);}
.pre-header-actions{align-items:center;gap:10px;flex-shrink:0;}
.pre-header-bell{width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid rgba(17,24,39,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(15,23,42,0.05);transition:all .15s;color:#374151;}
.pre-header-bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pre-header-bell:hover{border-color:var(--maroon-border);color:var(--maroon);transform:translateY(-1px);}
.pre-header-avatar{width:42px;height:42px;border-radius:999px;background:linear-gradient(180deg,var(--maroon),#6f1212);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;box-shadow:0 0 0 1.5px rgba(180,83,9,0.4),0 10px 24px rgba(139,26,26,0.18);
  /* now a <button> routing to My Account */
  border:none;padding:0;font-family:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.pre-header-avatar:hover{transform:translateY(-1px);box-shadow:0 0 0 1.5px rgba(180,83,9,0.6),0 12px 28px rgba(139,26,26,0.26);}
.pre-header-bell:focus-visible,.pre-header-avatar:focus-visible{outline:2px solid var(--maroon,#8b1a1a);outline-offset:2px;}
/* Persistent app bar — global actions, visible on every tab.
   It shares the title's line instead of owning a row of its own: the bar is pulled
   flat onto the .page-header row by a negative bottom margin (it used to burn 64px of
   vertical space with 908 of its 1109px empty). Sticky, so notices and the profile
   stay one tap away no matter how far the student scrolls. */
.sd-topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;
  height:var(--appbar-h,64px);
  margin:-26px -34px calc(-1 * var(--appbar-h,64px));
  padding:0 34px;
  pointer-events:none; /* let the title underneath stay selectable while transparent */
  transition:background .18s ease, box-shadow .18s ease;
}
.sd-topbar.is-stuck{
  pointer-events:auto;
  background:var(--bg);
  box-shadow:0 1px 0 var(--border), 0 6px 18px rgba(15,23,42,0.06);
}
/* Compact title, revealed only once the big .page-header h1 has scrolled away. */
.sd-topbar-title{
  min-width:0;flex:1 1 auto;
  font-family:var(--font-heading);font-size:15px;line-height:1.3;font-weight:800;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(3px);
  transition:opacity .18s ease, transform .18s ease;
}
.sd-topbar.is-stuck .sd-topbar-title{opacity:1;transform:none;}
.sd-topbar-actions{display:flex;align-items:center;gap:10px;pointer-events:auto;flex:0 0 auto;margin-left:auto;}
/* Keeps .page-header text from sliding under the overlaid actions. */
#dashboard-screen .page-header{min-height:var(--appbar-h,64px);}

/* Notice bell unread badge — count of unread announcements + pending homework. */
.pre-header-bell{position:relative;}
.sd-bell-badge{
  position:absolute;top:-3px;right:-3px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--danger,#c8102e);color:#fff;
  font-size:11px;line-height:18px;font-weight:800;text-align:center;
  border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.sd-bell-badge[hidden]{display:none;}
.pre-header-fine-ping{
  height:28px;padding:0 10px;margin-left:6px;border-radius:999px;
  border:1px solid rgba(200,16,46,0.35);background:rgba(200,16,46,0.1);
  color:#C8102E;font-size:12px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
}
.pre-header-fine-ping[hidden]{display:none;}
.pre-header-fine-ping:hover{background:rgba(200,16,46,0.16);}
.ov-open-fine-banner{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  margin:0 0 16px;padding:12px 14px;border-radius:10px;cursor:pointer;
  border:1.5px solid rgba(200,16,46,0.35);background:rgba(200,16,46,0.07);
  color:inherit;font:inherit;
}
.ov-open-fine-banner[hidden]{display:none;}
.ov-open-fine-banner:hover{background:rgba(200,16,46,0.11);}
.ov-open-fine-ico{
  width:34px;height:34px;border-radius:999px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#C8102E;color:#fff;font-weight:800;font-size:14px;
}
.ov-open-fine-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ov-open-fine-copy strong{font-size:13px;color:#C8102E;}
.ov-open-fine-copy span{font-size:12px;color:var(--muted,#6b7280);}
.ov-open-fine-cta{font-size:12px;font-weight:700;color:#C8102E;white-space:nowrap;}

@media(max-width:768px){
  /* Phone: the bar becomes a real row again — there is no room to share a line with
     the hamburger AND the title, and stacking is the expected mobile pattern. */
  .sd-topbar{
    height:52px;
    /* No horizontal bleed here — .main-content is only 16px-padded on phones and a
       negative side margin pushes the page 32px wider than the viewport. */
    margin:-60px 0 8px;
    padding:0 0 0 42px; /* clears the fixed hamburger (left:14px, 38px wide) */
  }
  #dashboard-screen .page-header{min-height:0;padding-right:0;}
  .sd-topbar-title{opacity:1;transform:none;}
}

/* Tab panels */
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadeUp 0.3s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.stat-card.s1::before{background:var(--maroon);}
.stat-card.s2::before{background:var(--violet);}
.stat-card.s3::before{background:var(--success);}
.stat-card.s4::before{background:var(--warning);}
.sc-label{font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);margin-bottom:8px;}
.sc-val{font-family:var(--font-heading);font-size:1.9rem;font-weight:900;color:var(--text);line-height:1;}
.sc-sub{font-size:11px;color:var(--muted);margin-top:4px;}
/* ── Overview premium base — tenant-grade card depth for ALL student modes.
   Regular mode gets this via .ovx-regular; this extends the same look to pre/independent. ── */
#tab-overview .card,
#tab-overview .stat-card,
#tab-overview .ov-band-hero-card,
#tab-overview #ov-content-coverage-card,
#tab-overview .ov-op-card{
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,0.04),0 8px 24px rgba(16,24,40,0.06);
  transition:box-shadow 0.2s ease;
}
#tab-overview .stat-card::before{height:4px;}
.overview-operational-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 18px;align-items:stretch;}
.overview-operational-grid #ov-next-class-wrap{height:100%;margin-bottom:0!important;}
.overview-operational-grid #ov-next-class-wrap>.stat-card{min-height:118px;align-items:flex-start!important;padding:15px 16px!important;}
.overview-operational-grid .card,.overview-operational-grid .stat-card{height:100%;min-height:118px;margin-bottom:0;box-sizing:border-box;}
.overview-operational-grid .card,.overview-operational-grid .stat-card{padding:15px 16px;}
.overview-operational-grid .stat-card::before,.overview-operational-grid .card::before{height:0;}
.overview-operational-grid .notice-item{margin-top:10px;margin-bottom:0;padding:0;border:none;background:transparent;}
.overview-operational-grid .notice-title{font-size:13px;line-height:1.35;color:var(--text);}
.overview-operational-grid .notice-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.45;}
.overview-operational-grid .notice-tag{margin-bottom:6px;}
.overview-operational-grid .ov-notice-lines{margin:7px 0 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;}
.overview-operational-grid .ov-notice-lines li{position:relative;padding-left:11px;font-size:12px;line-height:1.35;color:var(--muted);}
.overview-operational-grid .ov-notice-lines li::before{content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--maroon);}
.overview-operational-grid .empty-state{padding:18px 4px 4px;text-align:left;font-size:12px;}
.overview-operational-grid .empty-icon{display:none;}
.ov-op-card{background:#fff;border:1px solid rgba(17,24,39,0.075);border-radius:14px;box-shadow:0 10px 24px rgba(15,23,42,0.045);position:relative;overflow:hidden;}
.ov-op-card::after{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--op-accent,var(--maroon));opacity:.62;}
.ov-pre-notice-card{--op-accent:var(--brand);}
.ov-pre-fee-card{--op-accent:var(--warning);}
.ov-pre-fee-card.ov-fee-state-paid{--op-accent:var(--success);}
.ov-pre-attendance-card{--op-accent:var(--navy);}
.overview-operational-grid .sc-val{font-size:1.18rem!important;font-weight:900;line-height:1.18;margin-top:13px;color:var(--text);}
.overview-operational-grid .sc-sub{font-size:12px;line-height:1.45;margin-top:6px;color:var(--muted);}
.overview-operational-grid .sc-val.is-copy{font-size:0.86rem!important;font-weight:700;line-height:1.4;color:var(--muted);}
.ov-op-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);line-height:1.2;}
.ov-op-icon{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;font-size:13px;background:var(--brand-soft);color:var(--maroon);letter-spacing:0;text-transform:none;}
.ov-op-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ov-regular-operational-grid .ov-op-icon svg,.ov-regular-stage-a-grid .ov-op-icon svg{width:16px;height:16px;}
.ov-op-icon-class{background:var(--navy-soft);color:var(--navy);}
.ov-op-icon-notice{background:var(--brand-soft);color:var(--maroon);}
.ov-op-icon-fee{background:var(--warning-soft);color:var(--warning);font-weight:900;}
.ov-fee-state-paid .ov-op-icon-fee{background:var(--success-soft);color:var(--success);}
.ov-op-icon-attendance{background:var(--navy-soft);color:var(--navy);font-weight:900;}
.ov-op-icon-score{background:var(--navy-soft);color:var(--navy);}
.ov-op-icon-weak{background:var(--danger-soft);color:var(--danger);}
.ov-op-icon-estimated{background:var(--violet-soft);color:var(--violet);font-weight:900;}
.ov-op-icon-activity{background:var(--success-soft);color:var(--success);font-weight:900;}
.ov-op-action{width:30px;height:30px;border-radius:999px;background:var(--control-bg);display:flex;align-items:center;justify-content:center;font-size:16px!important;transition:all .15s;}
.ov-next-class-card:hover .ov-op-action{background:var(--maroon-dim);color:var(--maroon)!important;transform:translateX(2px);}
.ov-op-empty{font-size:13px;color:var(--text);font-weight:800;margin-top:13px;}
.ov-op-link{margin-top:9px;background:transparent;border:none;color:var(--maroon);font-size:11px;font-weight:900;padding:0;cursor:pointer;}
.ov-op-link:hover{text-decoration:underline;}
.ov-regular-stage-a-grid,.ov-regular-operational-grid{gap:12px;margin:12px 0 14px;}
.ov-regular-stage-a-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;}
.ov-regular-operational-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;}
.ov-regular-stage-a-grid #ov-next-class-wrap>.stat-card,.ov-regular-operational-grid #ov-next-class-wrap>.stat-card{min-height:104px;padding:14px 16px!important;}
.ov-regular-stage-a-grid .card,.ov-regular-stage-a-grid .stat-card,.ov-regular-operational-grid .card,.ov-regular-operational-grid .stat-card{min-height:104px;}
.ov-regular-stage-a-grid .sc-val,.ov-regular-operational-grid .sc-val{font-size:1.1rem!important;margin-top:11px;}
.ov-regular-stage-a-grid #ov-next-class-wrap>.stat-card,.ov-regular-operational-grid #ov-next-class-wrap>.stat-card,.ov-regular-operational-grid .ov-op-card,.ov-regular-stage-a-grid .ov-regular-notice-card{border:1px solid rgba(17,24,39,0.07);border-radius:16px;box-shadow:0 14px 34px rgba(15,23,42,0.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative;overflow:hidden;}
.ov-regular-stage-a-grid #ov-next-class-wrap>.stat-card:hover,.ov-regular-operational-grid #ov-next-class-wrap>.stat-card:hover,.ov-regular-operational-grid .ov-op-card:hover,.ov-regular-stage-a-grid .ov-regular-notice-card:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(15,23,42,0.1);border-color:rgba(139,26,26,0.14);}
.ov-regular-operational-grid .ov-op-card::after,.ov-regular-stage-a-grid .ov-regular-notice-card::before,.ov-regular-stage-a-grid #ov-next-class-wrap>.stat-card::before,.ov-regular-operational-grid #ov-next-class-wrap>.stat-card::before{height:4px;background:linear-gradient(90deg,var(--op-accent,var(--maroon)),rgba(255,255,255,0));opacity:.9;}
.ov-regular-operational-grid .ov-regular-latest-card,.ov-regular-operational-grid .ov-regular-weak-card,.ov-regular-operational-grid .ov-regular-estimated-card,.ov-regular-operational-grid #ov-next-class-wrap>.stat-card,.ov-regular-stage-a-grid #ov-next-class-wrap>.stat-card,.ov-regular-stage-a-grid .ov-regular-notice-card{background:linear-gradient(180deg,rgba(139,26,26,0.05),rgba(255,255,255,0.98));}
.ov-regular-operational-grid .ov-op-icon,.ov-regular-stage-a-grid .ov-op-icon{width:32px;height:32px;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.55);}
.ov-regular-learning-card{background:var(--surface);border-color:var(--border);border-radius:16px;box-shadow:var(--shadow-card);margin-bottom:14px;padding:18px 20px 16px;position:relative;overflow:hidden;}
.ov-regular-learning-card::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--brand);opacity:1;}
.ov-regular-card-subtitle{font-size:12px;color:var(--muted);margin:-8px 0 10px 30px;}
.ov-regular-learning-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:0;}
.ov-regular-learning-row{--skill:#8b1a1a;display:grid;grid-template-columns:minmax(82px,.75fr) minmax(80px,1fr) auto;align-items:center;gap:10px;min-height:31px;padding:6px 0;border-bottom:1px solid rgba(17,24,39,0.06);}
.ov-regular-learning-row:nth-last-child(-n+2){border-bottom:none;}
.ov-regular-learning-label{font-size:12px;font-weight:900;color:var(--text);line-height:1.2;}
.ov-regular-learning-dots{height:5px;background:var(--divider);border-radius:999px;align-self:center;overflow:hidden;}
.ov-regular-learning-dots::after{content:'';display:block;width:var(--progress,0%);height:100%;background:linear-gradient(90deg,var(--skill),rgba(255,255,255,0.5));border-radius:inherit;min-width:8px;}
.ov-regular-learning-value{font-size:13px;font-weight:900;line-height:1;color:var(--skill);white-space:nowrap;background:color-mix(in srgb,var(--skill) 9%,white);border:1px solid color-mix(in srgb,var(--skill) 18%,white);border-radius:999px;padding:5px 9px;}
.ov-regular-learning-value span{font-size:11px;font-weight:700;color:var(--muted);}
.ov-regular-learning-item.ov-skill-reading{--skill:var(--navy);}
.ov-regular-learning-item.ov-skill-listening{--skill:var(--navy);}
.ov-regular-learning-item.ov-skill-grammar{--skill:var(--brand);}
.ov-regular-learning-item.ov-skill-vocab{--skill:var(--brand);}
.ov-regular-learning-item.ov-skill-words{--skill:var(--brand);}
.ov-regular-learning-item.ov-skill-writing{--skill:var(--violet);}
.ov-regular-learning-item.ov-skill-speaking{--skill:var(--violet);}
.ov-skill-reading .ov-regular-learning-icon{background:var(--navy-soft);}
.ov-skill-listening .ov-regular-learning-icon{background:var(--navy-soft);}
.ov-skill-grammar .ov-regular-learning-icon{background:var(--brand-soft);}
.ov-skill-vocab .ov-regular-learning-icon{background:var(--brand-soft);}
.ov-skill-words .ov-regular-learning-icon{background:var(--brand-soft);}
.ov-skill-writing .ov-regular-learning-icon{background:var(--violet-soft);}
.ov-skill-speaking .ov-regular-learning-icon{background:var(--violet-soft);}
.ov-regular-learning-row.ov-skill-reading{--skill:var(--navy);}
.ov-regular-learning-row.ov-skill-listening{--skill:var(--navy);}
.ov-regular-learning-row.ov-skill-grammar{--skill:var(--brand);}
.ov-regular-learning-row.ov-skill-vocab{--skill:var(--brand);}
.ov-regular-learning-row.ov-skill-writing{--skill:var(--violet);}
.ov-regular-learning-row.ov-skill-speaking{--skill:var(--violet);}
.ov-pre-activity-card{border-color:rgba(17,24,39,0.075);border-radius:14px;box-shadow:0 10px 28px rgba(15,23,42,0.045);margin-bottom:18px;}

/* Scoped Pre/Foundation overview alignment */
body #ik-b1-progress-card{margin:0 0 16px;}
body #ik-b1-progress-card .ik-b1-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px 20px;
  
  box-shadow:0 16px 38px rgba(15,23,42,0.06);
  position:relative;
  overflow:hidden;
}
body #ik-b1-progress-card .ik-b1-wrap::before{display:none;}
body #ik-b1-progress-card .ik-b1-hd{margin-bottom:18px;gap:14px;align-items:flex-start;display:flex;justify-content:space-between;}
body #ik-b1-progress-card .ik-b1-hd::before{content:'🎯';width:36px;height:36px;border-radius:11px;background:var(--maroon-dim);border:1px solid var(--maroon-border);color:var(--maroon);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;flex:0 0 36px;}
body #ik-b1-progress-card .ik-b1-title-wrap{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
body #ik-b1-progress-card .ik-b1-title{
  font-size:1.28rem;
  font-weight:900;
  line-height:1.15;
  letter-spacing:0;
  color:var(--text);
  font-family:var(--font-heading);
}
body #ik-b1-progress-card .ik-b1-subtitle{
  
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  color:var(--muted);
}
body #ik-b1-progress-card .ik-b1-overall{font-size:11px;font-weight:900;color:var(--maroon)!important;letter-spacing:.02em;background:var(--maroon-dim);border:1px solid var(--maroon-border);border-radius:999px;padding:7px 12px;white-space:nowrap;box-shadow:none;}
body #ik-b1-progress-card .ik-b1-hubs{display:flex;flex-direction:column;gap:2px;}
body #ik-b1-progress-card .ik-b1-hub-row{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(17,24,39,0.065);cursor:pointer;transition:background .15s ease;}
body #ik-b1-progress-card .ik-b1-hub-row:last-of-type{border-bottom:none;}
body #ik-b1-progress-card .ik-b1-hub-row:hover{background:var(--surface-subtle);}
body #ik-b1-progress-card .ik-b1-hub-icon{width:48px;height:48px;border-radius:16px;background:var(--navy-soft);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.ik-b1-skill-listening .ik-b1-hub-icon{background:var(--navy-soft)!important;}
.ik-b1-skill-vocab .ik-b1-hub-icon{background:var(--brand-soft)!important;}
.ik-b1-skill-grammar .ik-b1-hub-icon{background:var(--brand-soft)!important;}
.ik-b1-skill-speaking .ik-b1-hub-icon{background:var(--violet-soft)!important;}
body #ik-b1-progress-card .ik-b1-row-main{min-width:0;}
body #ik-b1-progress-card .ik-b1-hub-name{font-size:15px;font-weight:800;letter-spacing:0;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body #ik-b1-progress-card .ik-b1-bar-wrap{height:8px;background:var(--divider);border-radius:999px;max-width:340px;margin-top:9px;overflow:hidden;}
body #ik-b1-progress-card .ik-b1-bar-fill{background:var(--navy);border-radius:999px;height:100%;min-width:2px;transition:width .6s ease;}
.ik-b1-skill-listening .ik-b1-bar-fill{background:var(--navy)!important;}
.ik-b1-skill-vocab .ik-b1-bar-fill{background:var(--brand)!important;}
.ik-b1-skill-grammar .ik-b1-bar-fill{background:var(--brand)!important;}
.ik-b1-skill-speaking .ik-b1-bar-fill{background:var(--violet)!important;}
body #ik-b1-progress-card .ik-b1-course{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:6px;}
body #ik-b1-progress-card .ik-b1-row-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
body #ik-b1-progress-card .ik-b1-today{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;}
body #ik-b1-progress-card .ik-b1-today.is-done{color:var(--success);}
body #ik-b1-progress-card .ik-b1-chevron{color:var(--text-tertiary);font-size:22px;line-height:1;flex-shrink:0;transition:transform .15s ease,color .15s ease;}
body #ik-b1-progress-card .ik-b1-hub-row:hover .ik-b1-chevron{color:var(--maroon);transform:translateX(3px);}
body #ik-b1-progress-card .ik-b1-focus{border-top:1px solid rgba(17,24,39,0.08);margin-top:12px;padding-top:14px;}
body #ik-b1-progress-card .ik-b1-focus-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
body #ik-b1-progress-card .ik-b1-focus-btn{
  min-height:40px;
  border-radius:10px;
  
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  justify-content:center;
}
body #ik-b1-progress-card .ik-b1-focus-btn--primary{
  background:linear-gradient(180deg,var(--maroon),var(--brand-dark));
  border:1px solid var(--maroon);
  color:var(--text-on-brand);
  box-shadow:0 8px 20px var(--focus-ring);
}
body #ik-b1-progress-card .ik-b1-focus-btn--primary:hover{background:linear-gradient(180deg,var(--maroon2),var(--maroon));transform:translateY(-1px);}
body #ik-b1-progress-card .ik-b1-focus-btn--secondary{
  background:var(--surface);
  color:var(--maroon);
  border:1px solid var(--maroon-border);
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
}
body #ik-b1-progress-card .ik-b1-focus-btn--secondary:hover{background:var(--maroon-dim);}
body #ik-b1-progress-card .ik-b1-more-link{color:var(--muted);font-size:12px;font-weight:700;}
body #ik-b1-progress-card .ik-b1-more-link:hover{color:var(--text);}
body #ik-b1-progress-card .ik-b1-skel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);}
body #ik-b1-progress-card .ik-b1-skel-bar{background:var(--divider);}
.ov-pre-activity-list{display:flex;flex-direction:column;gap:10px;}
.ov-pre-activity-item{--skill:#8b1a1a;display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(17,24,39,0.06);}
.ov-pre-activity-item:last-child{border-bottom:none;}
.ov-pre-activity-icon{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--skill) 10%,var(--surface));color:var(--skill);display:flex;align-items:center;justify-content:center;flex:0 0 30px;}
.ov-pre-activity-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ov-pre-activity-title{font-size:13px;font-weight:900;color:var(--text);}
.ov-pre-activity-meta{font-size:12px;color:var(--muted);}
.ov-pre-activity-item.ov-skill-reading{--skill:var(--navy);}
.ov-pre-activity-item.ov-skill-listening{--skill:var(--navy);}
.ov-pre-activity-item.ov-skill-vocab{--skill:var(--brand);}
.ov-pre-activity-item.ov-skill-grammar{--skill:var(--brand);}
.ov-pre-activity-item.ov-skill-speaking{--skill:var(--violet);}
.ov-pre-activity-empty{font-size:13px;color:var(--muted);padding:8px 0 2px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.ov-pre-activity-cta{background:none;border:none;color:var(--maroon);font-size:13px;font-weight:800;cursor:pointer;padding:0;text-decoration:underline;}
.ov-pre-activity-cta:hover{color:var(--maroon2,#a50d25);}
/* ══ Overview restructure (2026-09-22) — merges related cards into fewer, consistent
   surfaces for Pre and Regular. Wrapper classes carry the border/shadow/padding; the
   cards nested inside keep their own ids/JS untouched, their own chrome is just
   switched off so they read as one panel. Independent/alumni layout is untouched. ══ */

/* ── Pre-IELTS "Today" hero: B1 target ramp + next-class/notice/fee/attendance ── */
.ov-pre-today-hero{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px 20px;
  box-shadow:0 16px 38px rgba(15,23,42,0.06);
  display:flex;
  gap:26px;
  align-items:flex-start;
  margin-bottom:16px;
}
.ov-pre-today-hero #ik-b1-progress-card{margin:0;flex:1.3;min-width:0;}
.ov-pre-today-hero #ik-b1-progress-card .ik-b1-wrap{border:none;border-radius:0;padding:0;box-shadow:none;background:transparent;}
.ov-pre-today-hero .overview-operational-grid{
  flex:1;
  min-width:0;
  margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-self:stretch;
}
@media(max-width:900px){
  .ov-pre-today-hero{flex-direction:column;padding:20px 20px 18px;}
}

/* ── Regular "Today & Goal" hero: Focus Today + Band Score + Exam Goal ── */
.ov-today-hero{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px 20px;
  box-shadow:0 16px 38px rgba(15,23,42,0.06);
  margin-bottom:16px;
}
.ov-today-hero #ov-hero-row{margin-bottom:0;}
.ov-today-hero .ik-reg-wrap{border:none;border-top:none;border-radius:0;padding:0;box-shadow:none;background:transparent;}
/* .ov-band-hero-card also matches the #tab-overview premium-base rule (higher
   specificity: one id + one class beats this rule's two classes), so this override
   has to be scoped under #tab-overview too to actually win the cascade. */
#tab-overview .ov-today-hero .ov-band-hero-card{border:none;border-top:none;border-radius:0;padding:0;box-shadow:none;background:transparent;}
.ov-today-hero .exam-goal-card{
  border:none;
  border-radius:0;
  padding:20px 0 0;
  margin:20px 0 0;
  box-shadow:none;
  background:transparent;
  border-top:1px solid var(--divider);
}

/* ── Engagement rail: streak + daily question + badges + challenge/duel in one row.
   Streak/presence stay full-width compact lines; the rest are card tiles that already
   inherit the site-wide card shadow/radius (#tab-overview .card, above) — auto-fit so
   the row still looks intentional with only 1–2 of these active for a given student. ── */
.ov-engagement-rail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:0 0 18px;
  align-items:stretch;
}
.ov-engagement-rail #ov-study-streak-bar,
.ov-engagement-rail #ov-presence-chip{grid-column:1 / -1;margin:0;}
.ov-engagement-rail .card{margin-bottom:0;height:100%;}

/* ── Progress: Band Trend + Hub Activity merged into one card, two columns with a
   divider — was 2 stacked full-width cards. Same #tab-overview specificity note as
   the band-hero override above applies to #ov-content-coverage-card. ── */
.ov-progress-row{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 1px 2px rgba(16,24,40,0.04),0 8px 24px rgba(16,24,40,0.06);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}
.ov-progress-row .card{margin-bottom:0;border:none;box-shadow:none;border-radius:0;background:transparent;padding:0;}
#tab-overview .ov-progress-row #ov-content-coverage-card{border:none;box-shadow:none;border-radius:0;background:transparent;padding:0;}
.ov-progress-row #ov-content-coverage-card{border-left:1px solid var(--divider);padding-left:24px;}
@media(max-width:900px){
  .ov-progress-row{grid-template-columns:1fr;padding:18px 20px;}
  .ov-progress-row #ov-content-coverage-card{border-left:none;padding-left:0;border-top:1px solid var(--divider);padding-top:18px;}
}

@media(max-width:1000px){.overview-operational-grid,.ov-regular-operational-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.overview-operational-grid,.ov-regular-operational-grid,.ov-regular-stage-a-grid,.ov-regular-learning-list,body #ik-b1-progress-card .ik-b1-focus-btns{grid-template-columns:1fr;}.ov-regular-learning-row:nth-last-child(-n+2){border-bottom:1px solid rgba(17,24,39,0.07);}.ov-regular-learning-row:last-child{border-bottom:none;}.overview-operational-grid .card,.overview-operational-grid .stat-card,.overview-operational-grid #ov-next-class-wrap>.stat-card{min-height:0;}body #ik-b1-progress-card .ik-b1-wrap{padding:18px 16px;}body #ik-b1-progress-card .ik-b1-overall{font-size:1rem;}}

/* ── PROGRESS HERO BLOCK ── */
.progress-hero{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:20px;position:relative;overflow:hidden;}
.progress-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);}
.ph-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ph-message{flex:1;min-width:0;}
.ph-headline{font-family:var(--font-heading);font-size:1.25rem;font-weight:900;color:var(--text);line-height:1.3;margin-bottom:4px;}
.ph-sub{font-size:13px;color:var(--muted);line-height:1.5;}
.ph-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;flex-shrink:0;}
.ph-badge{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:100px;font-size:12px;font-weight:700;white-space:nowrap;}
.ph-badge-green{background:rgba(21,128,61,0.08);color:var(--green);border:1px solid rgba(21,128,61,0.18);}
.ph-badge-purple{background:var(--violet-soft);color:var(--violet);border:1px solid var(--violet-soft);}
.ph-badge-gold{background:rgba(180,83,9,0.08);color:var(--gold);border:1px solid rgba(180,83,9,0.18);}
.ph-badge-maroon{background:var(--maroon-dim);color:var(--maroon);border:1px solid var(--maroon-border);}
.ph-stats{display:flex;gap:0;margin-top:18px;border-top:1px solid var(--border);padding-top:16px;flex-wrap:wrap;}
.ph-stat{flex:1;min-width:100px;padding:0 16px;border-right:1px solid var(--border);}
.ph-stat:first-child{padding-left:0;}
.ph-stat:last-child{border-right:none;}
.ph-stat-val{font-family:var(--font-heading);font-size:1.4rem;font-weight:900;color:var(--text);line-height:1;}
.ph-stat-lbl{font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-top:3px;}
.ph-pes-bar-wrap{margin-top:5px;}
.ph-pes-bar-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden;width:100%;}
.ph-pes-bar-fill{height:100%;border-radius:2px;transition:width 0.4s ease;}
.ph-pes-target{font-size:11px;line-height:1.45;color:var(--muted);margin-top:2px;font-weight:600;}
.ph-pes-tip{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4;font-weight:500;}
.ph-progress-bar{margin-top:14px;}
.ph-bar-track{height:5px;background:#f3f4f6;border-radius:100px;overflow:hidden;}
.ph-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--maroon),#b91c1c);transition:width 1s ease;}
.ph-bar-labels{display:flex;justify-content:space-between;font-size:12px;line-height:1.5;color:var(--muted);margin-top:4px;}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.progress-hero{animation:heroFadeIn 0.4s ease both;}
@media(max-width:768px){
  .ph-badges{width:100%;margin-top:10px;}
  .ph-stat{min-width:80px;padding:0 10px;}
}

/* Regular IELTS premium overview skin */
.progress-hero.ph-regular-stage-a,.progress-hero.ph-regular-stage-b,.progress-hero.ph-regular-stage-c{
  border:1px solid rgba(255,255,255,0.65);
  border-radius:20px;
  box-shadow:0 22px 52px rgba(15,23,42,0.11);
  padding:26px 28px;
}
.progress-hero.ph-regular-stage-a::before,.progress-hero.ph-regular-stage-b::before,.progress-hero.ph-regular-stage-c::before{display:none;}
.progress-hero.ph-regular-stage-a::after,.progress-hero.ph-regular-stage-b::after,.progress-hero.ph-regular-stage-c::after{content:'';position:absolute;pointer-events:none;}
.progress-hero.ph-regular-stage-a{
  background:
    radial-gradient(circle at 88% 18%, rgba(14,165,233,0.18) 0 12%, transparent 32%),
    radial-gradient(circle at 12% 92%, rgba(34,197,94,0.16) 0 11%, transparent 31%),
    linear-gradient(135deg,#ecfdf5 0%,#e0f2fe 54%,#f8fafc 100%);
}
.progress-hero.ph-regular-stage-a::after{
  right:28px;
  bottom:22px;
  width:132px;
  height:76px;
  background:
    linear-gradient(135deg,transparent 49%,rgba(22,163,74,0.22) 50% 64%,transparent 65%),
    linear-gradient(35deg,transparent 45%,rgba(37,99,235,0.18) 46% 62%,transparent 63%);
  border-bottom:3px solid rgba(15,118,110,0.22);
  opacity:.9;
}
.progress-hero.ph-regular-stage-a .ph-message::before{
  content:'\1F3D4';
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(15,118,110,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  margin-bottom:12px;
  box-shadow:0 10px 24px rgba(15,118,110,0.08);
}
.progress-hero.ph-regular-stage-a .ph-stats{border-top:0;padding-top:8px;margin-top:14px;}
.progress-hero.ph-regular-stage-a .ph-stat{flex:0 0 auto;min-width:132px;border-right:0;background:rgba(255,255,255,0.68);border:1px solid rgba(15,118,110,0.1);border-radius:14px;padding:12px 14px;}
.progress-hero.ph-regular-stage-b,.progress-hero.ph-regular-stage-c{
  background:
    radial-gradient(circle at 86% 14%, rgba(251,191,36,0.24) 0 9%, transparent 30%),
    radial-gradient(circle at 16% 92%, rgba(124,58,237,0.2) 0 12%, transparent 34%),
    linear-gradient(135deg,#220611 0%,#5b1231 48%,#312e81 100%);
  color:#fff;
}
.progress-hero.ph-regular-stage-b::after,.progress-hero.ph-regular-stage-c::after{right:26px;top:22px;width:128px;height:128px;border:2px dashed rgba(255,255,255,0.18);border-radius:50%;box-shadow:0 0 0 14px rgba(255,255,255,0.04);}
.progress-hero.ph-regular-stage-b .ph-headline,.progress-hero.ph-regular-stage-c .ph-headline,.progress-hero.ph-regular-stage-b .ph-stat-val,.progress-hero.ph-regular-stage-c .ph-stat-val{color:#fff;}
.progress-hero.ph-regular-stage-b .ph-sub,.progress-hero.ph-regular-stage-c .ph-sub,.progress-hero.ph-regular-stage-b .ph-stat-lbl,.progress-hero.ph-regular-stage-c .ph-stat-lbl{color:rgba(255,255,255,0.72);}
.progress-hero.ph-regular-stage-b .ph-stats,.progress-hero.ph-regular-stage-c .ph-stats{border-top:1px solid rgba(255,255,255,0.16);}
.progress-hero.ph-regular-stage-b .ph-stat,.progress-hero.ph-regular-stage-c .ph-stat{border-right:1px solid rgba(255,255,255,0.14);}
.progress-hero.ph-regular-stage-b .ph-stat:first-child,.progress-hero.ph-regular-stage-c .ph-stat:first-child{
  flex:0 0 118px;
  min-width:118px;
  height:118px;
  border:8px solid rgba(255,255,255,0.16);
  border-top-color:#fbbf24;
  border-radius:50%;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08),0 16px 34px rgba(0,0,0,0.16);
}
.progress-hero.ph-regular-stage-b .ph-stat:first-child .ph-stat-val,.progress-hero.ph-regular-stage-c .ph-stat:first-child .ph-stat-val{font-size:2rem;color:#fff;}
.ov-regular-notice-card{border-radius:16px;box-shadow:0 14px 34px rgba(15,23,42,0.06);overflow:hidden;}
.ov-regular-notice-card .card-title{margin-bottom:10px;}
.ov-regular-notice-card #overview-notice .empty-state{padding:8px 0 2px;text-align:left;font-size:13px;}
.ov-regular-notice-card #overview-notice .empty-icon{display:none;}
.ov-regular-notice-card .notice-item{border:0;background:transparent;padding:0;margin:0;}
.ov-regular-notice-card .notice-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
@media(max-width:640px){
  .progress-hero.ph-regular-stage-a,.progress-hero.ph-regular-stage-b,.progress-hero.ph-regular-stage-c{padding:22px 18px;border-radius:18px;}
  .progress-hero.ph-regular-stage-a::after,.progress-hero.ph-regular-stage-b::after,.progress-hero.ph-regular-stage-c::after{display:none;}
  .progress-hero.ph-regular-stage-b .ph-stat:first-child,.progress-hero.ph-regular-stage-c .ph-stat:first-child{flex:0 0 104px;min-width:104px;height:104px;}
  .progress-hero.ph-regular-stage-b .ph-stat,.progress-hero.ph-regular-stage-c .ph-stat{border-right:0;}
  .ov-regular-learning-card{padding:17px 16px 14px;}
  .ov-regular-learning-row{grid-template-columns:minmax(76px,.7fr) minmax(64px,1fr) auto;gap:8px;}
  .ov-regular-learning-value{padding:5px 8px;font-size:12px;}
}

/* ── EXAM GOAL CARD ── */
.exam-goal-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;position:relative;overflow:hidden;}
.exam-goal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);}

.eg-set-prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.eg-set-msg{font-size:13px;color:var(--muted);line-height:1.5;}
.eg-set-msg strong{color:var(--text);}
.eg-set-btn{background:var(--maroon-dim);border:1px solid var(--maroon-border);color:var(--maroon);border-radius:8px;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.eg-set-btn:hover{background:var(--maroon);color:#fff;}

.eg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);margin-top:16px;padding-top:16px;}
.eg-stat{padding:0 16px;border-right:1px solid var(--border);text-align:center;}
.eg-stat:first-child{padding-left:0;text-align:left;}
.eg-stat:last-child{border-right:none;}
.eg-stat-val{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;line-height:1;color:var(--text);}
.eg-stat-val.urgent{color:var(--red);}
.eg-stat-val.soon{color:var(--gold);}
.eg-stat-val.ok{color:var(--green);}
.eg-stat-val.gap-pos{color:var(--green);}
.eg-stat-val.gap-neg{color:var(--red);}
.eg-stat-lbl{font-size:11px;line-height:1.45;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);margin-top:3px;}
.eg-stat-sub{font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px;}

.eg-progress-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.eg-progress-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px;}
.eg-progress-labels span:last-child{font-weight:700;color:var(--text);}
.eg-bar-track{height:8px;background:#f3f4f6;border-radius:100px;overflow:hidden;}
.eg-bar-fill{height:100%;border-radius:100px;transition:width 0.8s ease;}

.eg-journey-stations{margin-top:10px;font-size:11px;color:var(--muted);font-weight:600;}

.eg-pace-verdict{margin-top:14px;padding:10px 14px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.5;}
.eg-pace-verdict.pace-green{background:rgba(34,197,94,0.1);color:var(--green);}
.eg-pace-verdict.pace-amber{background:rgba(234,179,8,0.12);color:var(--gold);}
.eg-pace-verdict.pace-red{background:rgba(239,68,68,0.1);color:var(--red);}
.eg-pace-verdict.pace-muted{background:#f3f4f6;color:var(--muted);font-weight:500;}

.eg-inline-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:none;}
.eg-inline-form.open{display:block;}
.eg-form-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;}
.eg-form-field label{display:block;font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:5px;}
.eg-save-btn{background:var(--maroon);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.eg-save-btn:hover{background:var(--maroon2);}
.eg-cancel-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-left:6px;}
.eg-cancel-btn:hover{border-color:var(--maroon);color:var(--maroon);}
.eg-edit-link{font-size:11px;color:var(--maroon);cursor:pointer;font-weight:700;margin-left:auto;display:none;text-align:right;margin-top:8px;}
.eg-edit-link:hover{text-decoration:underline;}

/* Admin exam modal */
.exam-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:998;align-items:center;justify-content:center;padding:20px;}
.exam-modal.show{display:flex;}
.exam-modal-box{background:var(--white);border-radius:16px;padding:28px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,0.15);}
.exam-modal-box h3{font-family:var(--font-heading);font-size:1.2rem;font-weight:900;margin-bottom:4px;}
.exam-modal-sub{font-size:12px;color:var(--muted);margin-bottom:20px;}

@media(max-width:600px){
  .eg-stats{grid-template-columns:1fr 1fr;gap:14px;border-top:none;}
  .eg-stat{border-right:none;padding:0;text-align:left;}
  .eg-form-row{grid-template-columns:1fr 1fr;} .eg-form-row .eg-save-btn{grid-column:1/-1;}
}

.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;}
.mock-exam-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.mock-exam-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,0.09);border-color:rgba(139,26,26,0.18);}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.13em;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.card-title-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;}
.card-title-icon svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.level-chip{font-size:12px;line-height:1.5;font-weight:700;padding:2px 7px;border-radius:3px;white-space:nowrap;}

/* Table */
.data-table{width:100%;border-collapse:collapse;}
.data-table th{background:#f9fafb;padding:10px 14px;text-align:left;font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);border-bottom:1px solid var(--border);}
.data-table td{padding:12px 14px;font-size:13px;border-bottom:1px solid #f3f4f6;vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:#fafafa;}
.pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700;}
.pill-green{background:rgba(21,128,61,0.1);color:var(--green);border:1px solid rgba(21,128,61,0.2);}
.pill-red{background:rgba(220,38,38,0.08);color:var(--red);border:1px solid rgba(220,38,38,0.2);}
.pill-gold{background:rgba(180,83,9,0.08);color:var(--gold);border:1px solid rgba(180,83,9,0.2);}
.pill-maroon{background:var(--maroon-dim);color:var(--maroon);border:1px solid var(--maroon-border);}

/* Score chart */
.chart-wrap{margin-bottom:20px;}
.chart-bars{display:flex;align-items:flex-end;gap:16px;height:100px;padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.bar{width:100%;border-radius:4px 4px 0 0;background:var(--maroon);opacity:0.7;min-height:4px;transition:height 0.6s ease;}
.bar.latest{opacity:1;box-shadow:0 -3px 8px rgba(139,26,26,0.2);}
.bar-val{font-size:11px;font-weight:700;color:var(--text);}
.bar-lbl{font-size:12px;line-height:1.5;color:var(--muted);}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.form-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:6px;}
.form-input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text);outline:none;transition:border-color 0.2s;background:var(--white);}
.form-input:focus{border-color:var(--maroon);}
.form-select{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text);outline:none;background:var(--white);cursor:pointer;}
.form-select:focus{border-color:var(--maroon);}
.form-btn{background:var(--maroon);color:#fff;border:none;border-radius:8px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s;}
.user-type-btn{display:flex;align-items:center;gap:10px;background:var(--white);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:all 0.15s;}
.user-type-btn:hover{border-color:var(--maroon-border,rgba(139,26,26,0.3));}
.user-type-btn.active{background:var(--acc2,rgba(139,26,26,0.06));border-color:var(--maroon);box-shadow:0 0 0 3px rgba(139,26,26,0.05);}
.form-btn:hover{background:var(--maroon2);}
.form-btn:disabled{opacity:0.5;cursor:not-allowed;}
.form-btn-sec{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-left:8px;}
.form-btn-sec:hover{border-color:var(--maroon);color:var(--maroon);}

/* Notice card */
.notice-item{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;}
.notice-tag{display:inline-block;font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:2px 8px;border-radius:100px;margin-bottom:8px;}
.tag-urgent{background:rgba(220,38,38,0.1);color:var(--red);border:1px solid rgba(220,38,38,0.2);}
.tag-info{background:rgba(29,78,216,0.08);color:var(--info);border:1px solid rgba(29,78,216,0.2);}
.tag-good{background:rgba(21,128,61,0.08);color:var(--green);border:1px solid rgba(21,128,61,0.2);}
.notice-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;}
.notice-body{font-size:13px;color:var(--muted);line-height:1.65;}
.notice-date{font-size:11px;color:var(--muted);margin-top:6px;}
/* Homework */
.tag-homework{background:rgba(124,58,237,0.1);color:var(--violet);border:1px solid rgba(124,58,237,0.2);}
.notice-item.hw-item{border-left:3px solid var(--violet);border-radius:0 var(--radius) var(--radius) 0;}
.hw-due{font-size:11px;font-weight:700;color:var(--violet);margin-bottom:6px;}
.notice-item.hw-expired{border-left-color:#9ca3af;opacity:0.72;}
.notice-subtab-row{display:flex;gap:8px;margin-bottom:14px;}
.notice-subtab{border:1px solid var(--border);background:var(--white);color:var(--muted);border-radius:999px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;}
.notice-subtab.active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.hw-due-expired{color:#b91c1c!important;}
.chat-messages{display:flex;flex-direction:column;gap:10px;height:420px;overflow-y:auto;padding:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;}
.chat-msg{max-width:80%;background:var(--bg);border-radius:10px;padding:8px 12px;align-self:flex-start;}
.chat-msg.chat-msg-mine{align-self:flex-end;background:var(--maroon-dim);}
.chat-msg-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px;}
.chat-msg-name{font-size:12px;font-weight:700;color:var(--text);}
.chat-msg-time{font-size:12px;line-height:1.5;color:var(--muted);margin-left:auto;}
.chat-badge{font-size:12px;line-height:1.5;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--maroon-dim);color:var(--maroon);}
.chat-badge-staff{background:rgba(29,78,216,0.1);color:var(--info);}
.chat-msg-body{font-size:13px;color:var(--text);line-height:1.5;word-break:break-word;}
.chat-msg-deleted{color:var(--muted);}
.chat-msg-actions{margin-top:4px;text-align:right;}
.chat-mod-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px;}
.chat-input-row{display:flex;gap:8px;}
.chat-input-row .form-input{flex:1;}
/* Per-task list */
.hw-tasks{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.hw-task-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);}
.hw-task-row.done-row{background:rgba(124,58,237,0.04);border-color:rgba(124,58,237,0.2);}
.hw-task-row.coming-soon{opacity:0.45;cursor:default;}
.hw-cb{width:18px;height:18px;border:2px solid var(--border2);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;background:var(--white);}
.hw-cb:hover{border-color:var(--violet);}
.hw-cb.done{background:var(--violet);border-color:var(--violet);}
.hw-cb.done::after{content:'';display:block;width:4px;height:8px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);}
.hw-cb.locked{cursor:default;}
.hw-task-label{flex:1;font-size:13px;color:var(--text);line-height:1.4;}
.hw-task-label.done{text-decoration:line-through;color:var(--muted);}
.hw-task-link{font-size:11px;font-weight:700;color:var(--violet);text-decoration:none;white-space:nowrap;padding:3px 8px;border:1px solid rgba(124,58,237,0.25);border-radius:4px;}
.hw-task-link:hover{background:rgba(124,58,237,0.08);}
.hw-task-soon{font-size:12px;line-height:1.5;color:var(--muted);font-weight:600;letter-spacing:.03em;white-space:nowrap;}
/* Admin homework toggle */
.hw-toggle-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);margin-top:10px;}
.hw-extra{display:none;background:var(--bg2,#f9fafb);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-top:10px;}
.hw-extra.show{display:block;}
.hw-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 0 6px;}
.hw-hub-checks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px;}
.hw-hub-check{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}
.hw-hub-check.coming-soon{opacity:0.4;cursor:default;}
.hw-custom-tasks{display:flex;flex-direction:column;gap:8px;}
.hw-custom-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
/* Admin tracker */
.hw-tracker-card{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--violet);border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin-bottom:10px;}
.hw-progress-bar{height:4px;background:#f3f4f6;border-radius:100px;margin:4px 0 8px;overflow:hidden;}
.hw-progress-fill{height:100%;border-radius:100px;background:var(--violet);transition:width .4s;}
.hw-task-stat{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border);}
.hw-task-stat:last-child{border-bottom:none;}
.hw-stat-bar{height:3px;background:#f3f4f6;border-radius:100px;overflow:hidden;width:60px;margin-left:8px;}
.hw-stat-fill{height:100%;border-radius:100px;background:var(--violet);}
.hw-completion-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:160px;overflow-y:auto;}
.hw-comp-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:2px 0;}
.hw-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-right:6px;}
.hw-dot.done{background:var(--violet);} .hw-dot.pending{background:#d1d5db;}

/* Material item */
.material-item{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;}
.mat-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.mat-info{flex:1;}
.mat-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.mat-meta{font-size:11px;color:var(--muted);}
.mat-btn{background:var(--maroon-dim);border:1px solid var(--maroon-border);color:var(--maroon);border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-block;}
.mat-btn:hover{background:var(--maroon);color:#fff;}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:#1a1a1a;color:#fff;border-radius:10px;padding:12px 20px;font-size:13px;font-weight:600;z-index:9999;opacity:0;transform:translateY(10px);transition:all 0.3s;pointer-events:none;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.success{background:var(--green);}
.toast.error{background:var(--red);}

/* Empty state */
.empty-state{text-align:center;padding:40px;color:var(--muted);}
.empty-icon{font-size:2.5rem;margin-bottom:12px;}
.empty-action-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.empty-action{display:inline-flex;align-items:center;gap:6px;background:var(--maroon-dim);border:1px solid var(--maroon-border);color:var(--maroon);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;text-decoration:none;}
.empty-action:hover{background:var(--maroon);color:#fff;}

/* ── NEW: Search/filter bar ── */
.search-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.search-input{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);outline:none;transition:border-color 0.2s;background:var(--white);width:220px;}
.search-input:focus{border-color:var(--maroon);}
.search-input::placeholder{color:var(--muted);}
.search-select{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);outline:none;background:var(--white);cursor:pointer;}
.search-select:focus{border-color:var(--maroon);}
.search-count{font-size:12px;color:var(--muted);margin-left:auto;}

/* ── NEW: Inline action buttons ── */
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;}
.btn-xs{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;border:none;transition:all 0.15s;white-space:nowrap;}
.btn-pay{background:rgba(21,128,61,0.1);color:var(--green);border:1px solid rgba(21,128,61,0.25);}
.btn-pay:hover{background:var(--green);color:#fff;}
.btn-wa{background:rgba(37,211,102,0.1);color:#128c5e;border:1px solid rgba(37,211,102,0.3);}
.btn-wa:hover{background:#25d366;color:#fff;}

/* ── NEW: Mark paid modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:998;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--white);border-radius:16px;padding:28px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.15);}
.modal-box h3{font-family:var(--font-heading);font-size:1.2rem;font-weight:900;color:var(--text);margin-bottom:6px;}
.modal-box .modal-sub{font-size:12px;color:var(--muted);margin-bottom:20px;}
.modal-field{margin-bottom:14px;}
.modal-field label{display:block;font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:5px;}
.modal-actions{display:flex;gap:10px;margin-top:20px;}
.modal-actions .form-btn{flex:1;}
.modal-actions .form-btn-sec{flex:1;margin-left:0;}

/* Fee progress bar in table */
.fee-mini-bar{width:60px;height:5px;background:#f3f4f6;border-radius:3px;overflow:hidden;display:inline-block;margin-left:6px;vertical-align:middle;}
.fee-mini-fill{height:100%;border-radius:3px;}

/* Hamburger button — hidden on desktop */
.hamburger{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:200;
  background:var(--maroon);
  border:none;
  border-radius:8px;
  width:38px;
  height:38px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

/* Overlay — covers content when sidebar is open on mobile */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:9;
}
.sidebar-overlay.show{display:block;}

@media(max-width:768px){
  .hamburger{display:flex;}

  .sidebar{
    transform:translateX(-100%);
    transition:transform 0.25s ease;
    z-index:10;
    width:240px;
  }
  .sidebar.open{transform:translateX(0);}

  .main-content{
    margin-left:0;
    padding:60px 16px 20px;
  }

  .stats-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
}

/* ── LEADERBOARD ── */
.lb-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.lb-batch-badge{display:inline-flex;align-items:center;gap:7px;background:var(--maroon-dim);border:1px solid var(--maroon-border);border-radius:100px;padding:5px 14px;font-size:12px;font-weight:700;color:var(--maroon);}
.lb-refresh{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.15s;}
.lb-refresh:hover{border-color:var(--maroon);color:var(--maroon);}

.lb-row{display:grid;grid-template-columns:36px 1fr 130px 36px;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;margin-bottom:6px;background:var(--white);border:1px solid var(--border);transition:box-shadow 0.15s;cursor:pointer;}
.lb-row:hover{box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.lb-row.is-you{border-color:var(--maroon-border);background:var(--maroon-dim);}
.lb-row.rank-1{border-color:#f59e0b;background:rgba(245,158,11,0.05);}
.lb-row.rank-2{border-color:#94a3b8;background:rgba(148,163,184,0.05);}
.lb-row.rank-3{border-color:#b45309;background:rgba(180,83,9,0.05);}

.lb-rank{font-family:var(--font-heading);font-size:1rem;font-weight:900;color:var(--muted);text-align:center;width:36px;flex-shrink:0;}
.lb-rank.r1{color:#f59e0b;} .lb-rank.r2{color:#94a3b8;} .lb-rank.r3{color:#b45309;}

.lb-name-block{min-width:0;}
.lb-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-you-tag{display:inline-block;font-size:11px;line-height:1.45;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;background:var(--maroon);color:#fff;border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:middle;}
.lb-module{font-size:11px;color:var(--muted);margin-top:1px;}
.lb-streak-chip{display:inline-block;margin-left:6px;color:#92400e;font-weight:800;}
.lb-badge-chip{display:inline-block;margin-left:6px;color:#78350f;font-weight:800;cursor:default;}

.lb-col{text-align:center;}
.lb-col-label{font-size:11px;line-height:1.45;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:2px;}
.lb-col-val{font-family:var(--font-heading);font-size:1.1rem;font-weight:900;color:var(--text);line-height:1;}
.lb-col-val.good{color:var(--green);} .lb-col-val.warn{color:var(--gold);}
.lb-col-sub{font-size:12px;line-height:1.5;color:var(--muted);margin-top:1px;}
.lb-bar-wrap{width:100%;height:4px;background:#f3f4f6;border-radius:100px;overflow:hidden;margin-top:3px;}
.lb-bar{height:100%;border-radius:100px;background:var(--maroon);}
.lb-head-row{display:grid;grid-template-columns:36px 1fr 130px 36px;gap:10px;padding:0 16px 8px;font-size:11px;line-height:1.45;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}

/* Effort breakdown — expandable below row */
.lb-effort-val{font-family:var(--font-heading);font-size:1.4rem;font-weight:900;color:var(--maroon);line-height:1;text-align:center;}
.lb-effort-bar-wrap{width:100%;height:5px;background:#f3f4f6;border-radius:100px;overflow:hidden;margin-top:5px;}
.lb-effort-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--maroon),#b91c1c);transition:width 0.6s ease;}
.lb-expand-btn{background:transparent;border:1px solid var(--border);border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:14px;transition:all 0.15s;}
.lb-expand-btn:hover{border-color:var(--maroon);color:var(--maroon);}
.lb-expand-btn.open{background:var(--maroon);border-color:var(--maroon);color:#fff;transform:rotate(180deg);}
.lb-breakdown{display:none;padding:12px 16px 14px;margin-top:-6px;margin-bottom:6px;background:var(--bg2,#f9fafb);border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;font-size:12px;color:var(--text);line-height:1.85;}
.lb-breakdown.open{display:block;}
.eff-seg{display:inline-block;background:var(--white);border:1px solid var(--border);border-radius:5px;padding:3px 9px;margin:2px 0;}
.eff-seg b{color:var(--text);font-weight:700;}
.eff-mult{color:var(--muted);font-size:12px;line-height:1.5;margin-left:2px;}
.eff-sep{color:var(--border2,#e5e7eb);margin:0 6px;}
.eff-total{display:inline-block;background:var(--maroon);color:#fff;border-radius:5px;padding:3px 10px;font-weight:700;margin-left:4px;}

.lb-disabled{text-align:center;padding:48px 24px;}
.lb-disabled-icon{font-size:2.5rem;margin-bottom:12px;}
.lb-disabled-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;}
.lb-disabled-sub{font-size:13px;color:var(--muted);line-height:1.6;}

.batch-toggle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
/* Leaderboard view tabs */
.lb-view-btn{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:7px 18px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.15s;letter-spacing:0.02em;}
.lb-view-btn:hover{border-color:var(--maroon);color:var(--maroon);}
.lb-view-btn.active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
/* Champion banner */
.lb-champ-card{background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(245,158,11,0.03));border:1px solid rgba(245,158,11,0.35);border-radius:10px;padding:12px 18px;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.lb-champ-trophy{font-size:1.6rem;flex-shrink:0;}
.lb-champ-label{font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#b45309;margin-bottom:2px;}
.lb-champ-name{font-size:14px;font-weight:700;color:var(--text);}
.lb-champ-pts{font-size:12px;color:var(--muted);margin-top:1px;}
.batch-toggle-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.btc-name{font-size:14px;font-weight:600;color:var(--text);} .btc-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.toggle-switch{position:relative;width:42px;height:24px;flex-shrink:0;display:inline-block;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.tog-track{position:absolute;inset:0;background:#d1d5db;border-radius:100px;cursor:pointer;transition:background 0.2s;}
.tog-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform 0.2s;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.toggle-switch input:checked ~ .tog-track{background:var(--maroon);}
.toggle-switch input:checked ~ .tog-thumb{transform:translateX(18px);}
@media(max-width:600px){
  .lb-row,.lb-head-row{grid-template-columns:28px 1fr 100px 30px;}
}

/* Student ID Card */
.idcard-skel{width:340px;height:214px;background:linear-gradient(90deg,#f0f0f0,#fafafa,#f0f0f0);background-size:200% 100%;animation:idskel 1.4s linear infinite;border-radius:10px;}
@keyframes idskel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.ik-idcard{width:340px;height:214px;background:#fff;border-radius:10px;box-shadow:0 6px 28px rgba(0,0,0,0.18);display:flex;overflow:hidden;font-family:var(--font-body);color:#1a1a1a;border:1px solid rgba(0,0,0,0.08);}
.ik-idcard-strip{width:90px;background:var(--brand);color:#fff;padding:14px 8px 28px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;position:relative;box-sizing:border-box;}
.ik-idcard-logo{width:42px;height:42px;border-radius:6px;background:rgba(255,255,255,0.12);padding:4px;object-fit:contain;box-sizing:border-box;}
.ik-idcard-strip-name{font-family:var(--font-display);font-size:13px;text-align:center;letter-spacing:0.04em;line-height:1.05;color:#fff;}
.ik-idcard-strip-label{font-family:var(--font-display);font-size:12px;line-height:1.5;letter-spacing:0.18em;color:rgba(255,255,255,0.85);position:absolute;bottom:10px;left:0;right:0;text-align:center;}
.ik-idcard-body{flex:1;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;position:relative;min-width:0;box-sizing:border-box;}
.ik-idcard-photo{width:60px;height:60px;border-radius:50%;background:#f5f5f5;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--brand);box-sizing:border-box;}
.ik-idcard-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ik-idcard-initials{font-family:var(--font-display);font-size:22px;color:#fff;background:var(--brand);width:100%;height:100%;display:flex;align-items:center;justify-content:center;letter-spacing:0.05em;}
.ik-idcard-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:54px;}
.ik-idcard-name{font-family:var(--font-display);font-size:16px;letter-spacing:0.03em;line-height:1.1;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ik-idcard-id-num{font-family:var(--font-mono);font-size:12px;color:#888;letter-spacing:0.04em;}
.ik-idcard-course{font-family:var(--font-display);font-size:11px;color:var(--brand);letter-spacing:0.12em;margin-top:3px;}
.ik-idcard-batch{font-size:12px;color:#888;}
.ik-idcard-valid{font-size:11px;color:#888;margin-top:auto;padding-top:6px;}
.ik-idcard-valid.expiring{color:var(--danger);font-weight:700;}
.ik-idcard-qr{position:absolute;bottom:8px;right:8px;width:50px;height:50px;background:#fff;padding:2px;box-sizing:border-box;}
.ik-idcard-qr img,.ik-idcard-qr canvas{width:100%!important;height:100%!important;display:block;}

/* ── CLASS MATERIALS ACCORDION ── */
.mat-week{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;}
.mat-week-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;background:var(--white);transition:background 0.15s;user-select:none;}
.mat-week-header:hover{background:var(--maroon-dim);}
.mat-week-num{font-family:var(--font-display);font-size:18px;letter-spacing:0.05em;color:var(--maroon);width:72px;flex-shrink:0;}
.mat-week-label{flex:1;font-size:13px;font-weight:600;color:var(--text);}
.mat-week-count{font-size:11px;color:var(--muted);background:var(--bg2,#f9fafb);border:1px solid var(--border);border-radius:20px;padding:2px 10px;white-space:nowrap;}
.mat-week-chevron{color:var(--muted);font-size:11px;transition:transform 0.2s;flex-shrink:0;}
.mat-week.open .mat-week-chevron{transform:rotate(180deg);}
.mat-week-body{display:none;border-top:1px solid var(--border);background:var(--white);}
.mat-week.open .mat-week-body{display:block;}

.mat-session-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);}
.mat-session-row:last-child{border-bottom:none;}
.mat-sess-badge{min-width:28px;height:22px;border-radius:5px;background:var(--maroon-dim);color:var(--maroon);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 6px;}
.mat-sess-badge.teacher{background:rgba(124,58,237,0.08);color:var(--violet);}
.mat-sess-title{flex:1;font-size:13px;color:var(--text);}
.mat-sess-file{font-size:11px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.mat-upload-row{padding:14px 16px;border-top:1px solid var(--border);background:rgba(200,16,46,0.02);}
.mat-upload-fields{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px;}
.mat-upload-actions{display:flex;gap:8px;}
.mat-upload-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:5px;}
.mat-footer-row{padding:10px 16px;border-top:1px solid var(--border);}

/* Materials course toggle */
.student-pdf-section{margin-top:24px;}.student-pdf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}.student-pdf-head h2{margin:0;font-family:var(--font-display);font-size:18px;color:var(--text);}.student-pdf-head span{font-size:11px;color:var(--muted);}
.student-pdf-item{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;background:var(--white);margin-bottom:8px;}.student-pdf-icon{font-size:11px;font-weight:800;color:var(--maroon);background:var(--maroon-dim);border:1px solid var(--maroon-border);border-radius:5px;padding:5px;}.student-pdf-main{min-width:0;flex:1;}.student-pdf-title{display:block;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.student-pdf-file{font-size:11px;color:var(--muted);}
.mat-course-btn{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:7px 18px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.15s;letter-spacing:0.02em;}
.mat-course-btn:hover{border-color:var(--maroon);color:var(--maroon);}
.mat-course-btn.active{background:var(--maroon);border-color:var(--maroon);color:#fff;}

/* Regular course homework accordion (Notices → Homework) — reuses .mat-week */
.rhw-head{margin:0 0 14px;}
.rhw-head-title{font-size:15px;font-weight:800;color:var(--text);letter-spacing:0;}
.rhw-head-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45;}
.rhw-row.rhw-done .mat-sess-title{color:var(--muted);}
.rhw-row.rhw-soon{opacity:0.72;}
.rhw-status{font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0;}
.rhw-status.is-done{color:var(--success,#15803d);}
.rhw-status.is-soon{color:var(--muted);font-weight:600;}
.rhw-open{flex-shrink:0;}
#regular-hw-root{margin-bottom:16px;}
#pre-hw-root{margin-bottom:16px;}
/* ~ (general sibling), not + (adjacent) — #pre-hw-root sits between this and
   #notices-list-homework in the DOM, so an adjacent-only selector would miss it. */
#regular-hw-root:not([hidden]) ~ #notices-list-homework .empty-state{display:none;}
#pre-hw-root:not([hidden]) ~ #notices-list-homework .empty-state{display:none;}
html[data-theme="dark"] .rhw-status.is-done{color:var(--success,#4ade80);}
/* .rhw-teacher-row lives in admin.css, not here — the teacher tracker renders in
   admin.html / teacher.html, and neither of those loads dashboard.css. These two
   rules sat in this file doing nothing until 2026-08-06 (B292). */

/* Slide viewer modal */
#slide-modal{display:none;position:fixed;inset:0;z-index:10000;background:#111;flex-direction:column;}
#slide-modal.open{display:flex;}
#slide-modal-bar{display:flex;align-items:center;justify-content:space-between;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:#1a1a1a;flex-shrink:0;gap:12px;}
#slide-modal-title{color:#fff;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#slide-modal-close{background:rgba(255,255,255,0.12);border:none;color:#fff;width:44px;height:44px;border-radius:8px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#slide-modal-close:hover{background:rgba(255,255,255,0.22);}
#slide-iframe{flex:1;border:none;width:100%;background:#fff;}
#slide-modal-loading{display:none;position:absolute;inset:64px 0 0;z-index:1;place-items:center;background:#f7f6f3;color:#4b5262;font-size:15px;font-weight:600;}
#slide-modal.loading #slide-modal-loading{display:grid;}
@media(max-width:600px){
  #slide-modal-bar{padding-top:max(8px,env(safe-area-inset-top));}
  #slide-modal-title{font-size:12px;}
}


/* ═══════════════════════════════════════════════════════════════════════
   Merged from login-dashboard.css (overview cards, notices, mistakes, drawer)
   ═══════════════════════════════════════════════════════════════════════ */
/* login.html page-specific styles — extracted from inline <style> (phase 0, 2026-06-20).
   Shared shell: /css/dashboard.css. Do not merge with mock-exam.css or student-dashboard.css. */

.ik-inline-mark{height:20px;width:auto;vertical-align:middle;}
.ov-study-streak-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;margin:0 0 14px;background:linear-gradient(90deg,rgba(234,179,8,0.12),rgba(249,115,22,0.08));border:1px solid rgba(234,179,8,0.35);border-radius:10px;font-size:13px;color:#78350f;}
.ov-study-streak-bar strong{font-family:var(--font-heading);font-size:1.15rem;color:#b45309;}
.ov-streak-sub{font-size:12px;color:#92400e;margin-left:auto;}
.ov-daily-q-cat{margin-left:auto;font-size:12px;line-height:1.5;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);background:#f3f4f6;padding:2px 8px;border-radius:999px;}
.ov-daily-q-text{font-size:14px;font-weight:600;line-height:1.5;margin-bottom:12px;}
.ov-daily-q-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ov-daily-q-opt{text-align:left;border:1px solid var(--border);background:#fff;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s;}
.ov-daily-q-opt:hover:not(:disabled){border-color:var(--maroon);}
.ov-daily-q-opt:disabled{cursor:default;}
.ov-daily-q-opt.ov-daily-q-correct{border-color:var(--success);background:var(--success-soft);color:var(--success);}
.ov-daily-q-opt.ov-daily-q-wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--danger);}
/* Pre-IELTS design pass (2026-07-05): full-width white boxes read as text
   inputs, not buttons — add A/B/C/D letter badges + a clearer tappable state.
   Scoped to .ovx-pre only; Daily Question is shared with regular/alumni,
   who keep the exact pre-existing look. */
.ovx-pre .ov-daily-q-opt--pre{display:flex;align-items:center;gap:10px;border-width:1.5px;border-radius:10px;padding:12px 14px;transition:border-color .15s,background .15s,transform .1s;}
.ovx-pre .ov-daily-q-opt--pre:active:not(:disabled){transform:scale(0.98);}
.ovx-pre .ov-daily-q-opt-letter{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(139,26,26,0.08);color:var(--maroon);font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;}
.ovx-pre .ov-daily-q-opt--pre.ov-daily-q-correct .ov-daily-q-opt-letter{background:var(--green);color:#fff;}
.ovx-pre .ov-daily-q-opt--pre.ov-daily-q-wrong .ov-daily-q-opt-letter{background:var(--danger);color:#fff;}
/* Vocab Duel opponent picker — custom-styled native select, pre only. */
.ovx-pre #ov-vd-opponent-pick{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1.5px solid var(--border);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px;
  transition:border-color .15s;
}
.ovx-pre #ov-vd-opponent-pick:hover{border-color:var(--maroon);}
.ov-daily-q-result{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);}
.ov-daily-q-result strong{color:var(--text);}
.sb-badge-count{font-size:11px;font-weight:700;color:#b45309;margin-top:2px;}
.ov-badges-list{display:flex;flex-wrap:wrap;gap:8px;}
.ov-badge-chip{display:flex;align-items:center;gap:6px;border:1px solid rgba(234,179,8,0.35);background:rgba(234,179,8,0.08);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:#78350f;}
.ov-badge-chip .ov-badge-icon{font-size:14px;}
.ov-badges-empty{font-size:13px;color:var(--muted);}
.mistake-row{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:10px;background:#fff;}
.mistake-row.mistake-learned{opacity:0.72;background:#f9fafb;}
.mistake-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.mistake-skill{font-size:12px;line-height:1.5;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--maroon);background:rgba(139,26,26,0.08);padding:2px 7px;border-radius:4px;}
.mistake-meta{font-size:11px;color:var(--muted);}
.mistake-prompt{font-size:14px;font-weight:700;margin-bottom:6px;}
.mistake-answers{display:flex;flex-direction:column;gap:3px;font-size:12px;margin-bottom:8px;}
.mistake-wrong{color:var(--danger);}
.mistake-right{color:var(--success);}
.mistake-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mistake-retry{font-size:12px;font-weight:700;color:var(--maroon);text-decoration:none;}
.mistake-learned-btn{font-size:11px;font-weight:700;border:1px solid var(--border);background:#fff;padding:5px 10px;border-radius:6px;cursor:pointer;}
.mistake-done-tag{font-size:11px;color:var(--green);font-weight:700;}
.mistake-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px;}

/* ── My Mistakes tab (lms-tour parity) ───────────────────────────────── */
.mi-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.mi-pill{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:700;padding:7px 15px;border-radius:100px;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s;}
.mi-pill:hover{border-color:var(--maroon);color:var(--maroon);}
.mi-pill.is-active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.mi-list{display:flex;flex-direction:column;gap:12px;}
.mi-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:15px 18px;border-left:3px solid var(--maroon);}
.mi-card.tone-vocab{border-left-color:var(--warning);}
.mi-card.tone-cambridge{border-left-color:var(--navy);}
.mi-card.tone-grammar{border-left-color:var(--maroon);}
.mi-card.is-learned{opacity:0.78;}
.mi-card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.mi-card-main{flex:1;min-width:0;}
.mi-tag{display:inline-block;font-size:9px;font-weight:900;letter-spacing:0.08em;padding:2px 8px;border-radius:4px;}
.mi-tag.tone-grammar{color:var(--maroon);background:var(--brand-soft);}
.mi-tag.tone-vocab{color:var(--warning);background:var(--warning-soft);}
.mi-tag.tone-cambridge{color:var(--navy);background:var(--navy-soft);}
.mi-prompt{font-size:13.5px;font-weight:800;color:var(--text);margin-top:8px;line-height:1.4;}
.mi-answers{display:flex;gap:22px;margin-top:8px;flex-wrap:wrap;}
.mi-ans-label{font-size:10px;color:var(--muted);}
.mi-ans-wrong{font-size:13px;font-weight:700;color:var(--danger);text-decoration:line-through;}
.mi-ans-right{font-size:13px;font-weight:700;color:var(--success);}
.mi-para{margin-top:8px;font-size:12px;color:var(--muted);font-family:'Hind Siliguri','Noto Sans Bengali',sans-serif;}
.mi-para a{color:var(--maroon);font-weight:700;text-decoration:none;}
.mi-card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.mi-retry{font-size:12px;font-weight:700;color:var(--maroon);text-decoration:none;}
.mi-master-btn{border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:11px;font-weight:800;padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.mi-master-btn:hover{border-color:var(--maroon);color:var(--maroon);}
.mi-done{font-size:11px;font-weight:800;color:var(--success);white-space:nowrap;}
.mi-empty-sub{font-size:12px;color:var(--muted);margin-top:8px;}
@media(max-width:600px){
  .mi-card-row{flex-direction:column;}
  .mi-card-actions{flex-direction:row;align-items:center;width:100%;}
  .mi-master-btn{flex:1;text-align:center;}
}

.acct-pay-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.acct-pay-row:last-child{border-bottom:none;}
.vacation-banner{display:none;width:100%;box-sizing:border-box;margin:0 0 18px;padding:18px;border:2px solid #f59e0b;border-left:8px solid #b45309;border-radius:16px;background:#fffbeb;box-shadow:0 10px 24px rgba(180,83,9,0.14);}
.vacation-banner-title{font-size:16px;font-weight:900;color:#78350f;margin-bottom:6px;}
.vacation-banner-body{font-size:14px;font-weight:700;line-height:1.55;color:#92400e;}
#mr-feedback-drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:#fff;box-shadow:-6px 0 28px rgba(0,0,0,0.22);z-index:9999;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;color:#1f2937;}
#mr-feedback-drawer.open{transform:translateX(0);}
#mr-feedback-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9998;display:none;}
/* ── My Results white dashboard (mr-* scope) ──────────────────────── */
.mr-new-table{width:100%;border-collapse:collapse;font-size:13px;}
.mr-new-table th{padding:8px 14px;font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;}
.mr-new-table td{padding:9px 14px;border-bottom:1px solid var(--border);}
.mr-new-table tbody tr:last-child td{border-bottom:none;}
.mr-new-table tbody tr:hover td{background:rgba(0,0,0,0.02);}
.mr-fb-btn{background:none;border:1px solid var(--brand);color:var(--brand);font-size:11px;padding:4px 10px;cursor:pointer;letter-spacing:0.5px;transition:background 0.15s,color 0.15s;}
.mr-fb-btn:hover{background:var(--brand);color:#fff;}
.mr-drawer-header{position:sticky;top:0;background:var(--brand);color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;z-index:2;}
.mr-drawer-title{font-size:18px;font-weight:800;line-height:1.25;color:#fff;}
.mr-drawer-sub{font-size:12px;color:rgba(255,255,255,.85);margin-top:4px;}
.mr-drawer-band{font-size:13px;font-weight:800;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:5px 10px;white-space:nowrap;margin-top:8px;display:inline-flex;}
.mr-drawer-close{background:none;border:none;font-size:28px;cursor:pointer;color:#fff;line-height:1;padding:0 2px;}
.mr-drawer-body{padding:18px 22px 28px;}
.mr-loading{display:flex;align-items:center;justify-content:center;gap:10px;color:#6b7280;padding:48px 20px;font-size:13px;}
.mr-spinner{width:18px;height:18px;border:3px solid #e5e7eb;border-top-color:var(--brand);border-radius:50%;animation:mrSpin .8s linear infinite;}
@keyframes mrSpin{to{transform:rotate(360deg);}}
.mr-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.mr-tab-pill{border:1px solid #d1d5db;background:#f3f4f6;color:#374151;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;}
.mr-tab-pill.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.mr-review-summary{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:13px;font-weight:800;color:#374151;}
.mr-q-group{margin-bottom:18px;}
.mr-q-group-title{font-size:11px;font-weight:900;text-transform:uppercase;color:#6b7280;letter-spacing:.08em;margin:14px 0 8px;}
.mr-q-row{border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:8px;background:#fff;}
.mr-q-main{display:grid;grid-template-columns:56px 1fr 1fr 32px;gap:10px;align-items:start;font-size:13px;}
.mr-q-num{font-weight:900;color:#111827;}
.mr-q-label{display:block;font-size:12px;line-height:1.5;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;margin-bottom:3px;}
.mr-q-answer{color:#374151;word-break:break-word;}
.mr-q-answer.correct-key{color:var(--success);font-weight:800;}
.mr-q-mark{font-size:18px;font-weight:900;text-align:right;}
.mr-q-mark.ok{color:var(--success);}
.mr-q-mark.bad{color:var(--danger);}
.enrich-explain-btn,.mr-explain-btn{margin-top:10px;border:1px solid rgba(192,57,43,.25);background:rgba(192,57,43,.06);color:var(--brand);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800;cursor:pointer;}
.mr-explain-text{display:none;margin-top:10px;background:#fff7ed;border-left:3px solid var(--brand);padding:10px 12px;font-size:13px;line-height:1.65;color:#374151;}
.mr-explain-text.open{display:block;}
.mr-writing-block{border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:14px;margin-bottom:14px;}
.mr-writing-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;font-weight:900;color:#111827;}
.mr-writing-band{color:var(--brand);font-size:13px;white-space:nowrap;}
.mr-writing-text{width:100%;min-height:180px;box-sizing:border-box;border:1px solid #d1d5db;border-radius:6px;padding:10px;font-family:inherit;font-size:13px;line-height:1.55;color:#374151;background:#f9fafb;resize:vertical;}
.mr-criteria{margin-top:10px;font-size:12px;line-height:1.6;color:#4b5563;}
.mr-criteria strong{color:#111827;}
.mr-dr-na,.me-empty{font-size:13px;color:#6b7280;font-style:italic;padding:14px 0;margin:0;}
@media(max-width:600px){#mr-feedback-drawer{width:100%;}.mr-q-main{grid-template-columns:48px 1fr;}.mr-q-mark{text-align:left;}.mr-drawer-header{padding:16px 18px;}.mr-drawer-body{padding:16px 18px 24px;}}
@media(max-width:600px){
  .mr-dr-bands-grid{grid-template-columns:1fr;}
}
.pre-ielts-lock-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;gap:1rem;max-width:420px;margin:0 auto}
.pre-ielts-lock-icon{font-size:2.5rem}
.pre-ielts-lock-title{font-size:1.15rem;font-weight:700;color:var(--text-primary,var(--text))}
.pre-ielts-lock-body{font-size:.92rem;color:var(--text-secondary,#555);line-height:1.6}
.pre-ielts-lock-cta{display:inline-block;margin-top:.5rem;padding:.6rem 1.4rem;background:var(--brand);color:#fff;border-radius:8px;font-weight:600;font-size:.9rem;text-decoration:none;transition:background .2s}
.pre-ielts-lock-cta:hover{background:var(--brand-hover)}
.pd-trend{display:block;font-size:12px;line-height:1.5;color:var(--muted,#888);margin-top:2px;}
/* 9px was below any legible floor; 11px + real leading, shared with login-mock-results.js. */
.prac-flag{display:inline-block;font-size:11px;line-height:1.45;font-weight:700;padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:middle;white-space:nowrap;}
.prac-flag-warn{background:rgba(248,113,113,0.15);color:var(--danger);}
.prac-flag-ok{background:rgba(74,222,128,0.15);color:var(--success);}
.cp-empty-state{text-align:center;padding:48px 24px;background:#fff;border-radius:12px;border:2px dashed var(--border);margin:24px 0;}
.cp-empty-icon{font-size:48px;margin-bottom:16px;}
.cp-empty-state h3{font-size:20px;color:var(--text);margin-bottom:8px;}
.cp-empty-state p{color:var(--muted);font-size:14px;line-height:1.6;}
.cp-empty-sub{color:var(--brand);font-weight:600;}
.cp-type-scroll{max-height:320px;overflow-y:auto;padding-right:4px;}
.cp-type-scroll::-webkit-scrollbar{width:4px;}
.cp-type-scroll::-webkit-scrollbar-track{background:#f5f5f5;border-radius:2px;}
.cp-type-scroll::-webkit-scrollbar-thumb{background:var(--brand);border-radius:2px;}
/* ── Coverage by Passage & Part ──────────────────────────────────────────────
   The rows used to carry .skill-row/.skill-bar classes that had no CSS anywhere
   in public/css: the track rendered 0px tall, the label and value collided into
   "Part 150%", <small> fell back to the UA's 13.3px (larger than its own label)
   and the rows tiled sideways as slivers in this flex container. Real styles,
   one type scale, 12px floor, explicit leading on every line. */
.cp-passage-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;}
.cp-pass-col{flex:1 1 260px;min-width:0;}
.cp-pass-head{
  font-size:12px;line-height:1.4;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.07em;
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);
}
.cp-pass-row{margin-bottom:16px;}
.cp-pass-row:last-child{margin-bottom:0;}
.cp-pass-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;}
.cp-pass-label{
  font-size:13px;line-height:1.45;font-weight:600;color:var(--text);
  min-width:0;overflow-wrap:anywhere;
}
.cp-pass-pct{font-size:13px;line-height:1.45;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto;}
.cp-pass-pct.ok{color:var(--success);}
.cp-pass-pct.watch{color:var(--warning);}
.cp-pass-pct.focus{color:var(--danger);}
.cp-pass-track{height:8px;border-radius:100px;background:var(--border);overflow:hidden;margin-bottom:6px;}
.cp-pass-track i{display:block;height:100%;border-radius:100px;transition:width .7s ease;}
.cp-pass-track i.ok{background:var(--success);}
.cp-pass-track i.watch{background:var(--warning);}
.cp-pass-track i.focus{background:var(--danger);}
.cp-pass-meta{font-size:12px;line-height:1.5;color:var(--muted);}
.cp-pass-empty{font-size:13px;line-height:1.5;color:var(--muted);padding:6px 0 14px;}
@media(max-width:600px){.cp-pass-col{flex:1 1 100%;}}
.cp-intel-hero{position:relative;overflow:hidden;margin-bottom:16px;padding:24px;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 9%,var(--card-bg)),var(--card-bg) 58%);box-shadow:0 12px 30px rgba(20,25,38,.07)}
.cp-intel-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-90px;background:color-mix(in srgb,var(--brand) 9%,transparent);pointer-events:none}
.cp-intel-kicker{font-size:12px;line-height:1.5;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--brand);margin-bottom:7px}
.cp-intel-hero h2{font-family:var(--font-heading);font-size:1.5rem;margin:0 0 5px;color:var(--text)}
.cp-intel-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.cp-intel-main{display:flex;justify-content:space-between;gap:20px;align-items:center;position:relative;z-index:1}
.cp-intel-cta{white-space:nowrap;text-decoration:none}
.cp-confidence{display:inline-flex;margin-top:10px;padding:4px 8px;border-radius:999px;font-size:12px;line-height:1.5;font-weight:900;border:1px solid var(--border);color:var(--muted);background:var(--surface-subtle)}
.cp-confidence.reliable{color:var(--success);border-color:color-mix(in srgb,var(--success) 28%,var(--border));background:color-mix(in srgb,var(--success) 8%,var(--card-bg))}
.cp-confidence.developing{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 28%,var(--border));background:color-mix(in srgb,var(--warning) 8%,var(--card-bg))}
.cp-intel-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-hero-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:-6px 2px 16px;font-size:12px;line-height:1.5;color:var(--muted)}
.cp-hero-meta b{color:var(--text);font-weight:800;font-size:13px}
.cp-hero-meta .pd-trend{display:inline;margin-left:4px}
.cp-hero-meta .pd-trend:before{content:'\00b7';margin-right:4px}
.cp-trap-teaser{display:flex;flex-direction:column;border-color:color-mix(in srgb,var(--brand) 30%,var(--border));text-decoration:none;color:inherit}
.cp-trap-teaser::before{background:var(--maroon)}
.cp-trap-teaser .sc-label{color:var(--maroon)}
.cp-trap-teaser-name{font-size:1rem;font-weight:900;color:var(--text);line-height:1.25;margin-bottom:4px}
.cp-trap-teaser-miss{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:8px;flex:1}
.cp-trap-teaser-cta{font-size:11px;font-weight:900;color:var(--maroon)}
.cp-trap-teaser-empty{font-size:12px;color:var(--muted);line-height:1.5}
.cp-card-explainer{margin:-4px 0 15px;color:var(--muted);font-size:11px;line-height:1.5}
.cp-skill-row{display:block;padding:11px 0;border-bottom:1px solid var(--border);color:inherit;text-decoration:none}
.cp-skill-row:last-child{border-bottom:0}
.cp-skill-head,.cp-skill-foot{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cp-skill-head b{display:block;font-size:12px;color:var(--text)}
.cp-skill-head small{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--muted);text-transform:capitalize}
.cp-skill-head strong{font-size:13px}.cp-skill-head strong.good{color:var(--success)}.cp-skill-head strong.watch{color:var(--warning)}.cp-skill-head strong.focus{color:var(--danger)}
.cp-skill-track{height:6px;margin:7px 0 5px;background:var(--divider);border-radius:99px;overflow:hidden}.cp-skill-track i{display:block;height:100%;border-radius:inherit}.cp-skill-track i.good{background:var(--success)}.cp-skill-track i.watch{background:var(--warning)}.cp-skill-track i.focus{background:var(--danger)}
.cp-skill-foot{font-size:11px;line-height:1.45;color:var(--muted)}
.cp-trap-row{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}.cp-trap-row:last-child{border-bottom:0}.cp-trap-rank{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--brand) 9%,var(--card-bg));color:var(--brand);font-size:12px;line-height:1.5;font-weight:900}.cp-trap-row b{font-size:12px;text-transform:capitalize}.cp-trap-row p{font-size:12px;line-height:1.5;color:var(--muted);margin:2px 0}.cp-trap-row small{display:block;font-size:12px;color:var(--text2);line-height:1.45}.cp-inline-empty{padding:18px;text-align:center;color:var(--muted);font-size:12px}
@media(max-width:600px){.cp-passage-row{flex-direction:column;}}
@media(max-width:700px){.cp-intel-stats{grid-template-columns:1fr}}
@media(max-width:600px){.cp-intel-main{align-items:flex-start;flex-direction:column}.cp-intel-cta{width:100%;justify-content:center}.cp-intel-hero{padding:18px}}
/* ── Hero row wrapper ── */
#ov-hero-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
#ov-hero-row>*{height:100%;}
#ik-regular-focus-today,#ov-band-hero-card{display:flex;flex-direction:column;justify-content:space-between;}
@media(max-width:768px){#ov-hero-row{grid-template-columns:1fr;}}
/* ── Band Score Hero Card ── */
.ov-band-hero-card{background:var(--surface);border-top:4px solid var(--brand);border-left:none;padding:1.25rem 1.5rem;border-radius:12px;margin-bottom:0;box-shadow:var(--shadow-card);box-sizing:border-box;}
.ov-bh-layout{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.ov-bh-left{flex:1;}
.ov-bh-eyebrow{font-size:0.7rem;font-weight:700;letter-spacing:.08em;color:var(--brand);text-transform:uppercase;margin-bottom:4px;}
.ov-bh-band{font-size:2.5rem;font-weight:800;color:var(--text);line-height:1;margin-bottom:4px;}
.ov-bh-sub{font-size:0.85rem;color:var(--muted);}
.ov-bh-right{flex-shrink:0;text-align:right;}
.ov-bh-spark-label{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:4px;font-weight:600;letter-spacing:.05em;}
.ov-bh-sparkline{display:block;}
.ov-bh-actions{display:flex;gap:8px;flex-wrap:wrap;}
.ov-bh-btn{padding:0.4rem 0.9rem;border-radius:6px;font-size:0.8rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit;}
.ov-bh-btn.ov-bh-btn-outline{background:transparent;border:1.5px solid var(--brand);color:var(--brand);}
.ov-bh-btn.ov-bh-btn-outline:hover{background:rgba(180,0,0,0.06);}
.ov-bh-btn.ov-bh-btn-primary{background:var(--brand);border:1.5px solid var(--brand);color:#fff;}
.ov-bh-btn.ov-bh-btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);}
.ov-bh-btn.ov-bh-btn-muted{background:transparent;border:1.5px solid #888;color:#555;}
.ov-bh-btn.ov-bh-btn-muted:hover{background:rgba(0,0,0,0.04);}
/* ── Hub Activity Card ── */
.ov-coverage-subtitle{font-size:12px;color:var(--muted);margin-bottom:14px;}
#ov-content-coverage-card {
  border-top: 4px solid var(--brand);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface);
}
.hub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--divider);
  gap: 1rem;
  transition: background 0.15s;
}
.hub-row:last-child { border-bottom: none; }
.hub-row:hover { background: var(--surface-subtle); }
.hub-row[data-skill="reading"]   { border-left-color: var(--navy); }
.hub-row[data-skill="listening"] { border-left-color: var(--navy); }
.hub-row[data-skill="grammar"]   { border-left-color: var(--brand); }
.hub-row[data-skill="vocab"]     { border-left-color: var(--brand); }
.hub-row-left { display: flex; flex-direction: column; gap: 0.2rem; }
.hub-row-label { display: flex; align-items: center; gap: 0.5rem; }
.hub-row-icon { font-size: 1rem; }
.hub-row-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}
.hub-row-sub {
  font-size: 0.75rem;
  color: var(--muted);
  padding-left: 1.5rem;
}
.hub-row-chips { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.hub-row-chip {
  display: inline-block;
  font-size:0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  background: var(--divider);
  color: var(--muted);
  letter-spacing: 0.03em;
}
.hub-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 160px;
}
.hub-row-metric {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.hub-row-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--divider);
  border-radius: 999px;
  overflow: hidden;
}
.hub-row-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--navy);
  transition: width 0.6s ease;
}


/* ═══════════════════════════════════════════════════════════════════════
   Merged from login-overview-premium.css (.ovx-regular coach + Weekly Focus)
   ═══════════════════════════════════════════════════════════════════════ */
/* login-overview-premium.css — premium restyle + coach/Weekly-Focus layer for the
   REGULAR IELTS student overview only. Everything is scoped under `.ovx-regular`
   (added to #tab-overview by login-student-dashboard.js in regular mode) so it can
   never affect pre / ssc / independent modes or any other tab.
   Added 2026-06-30 (premium parity with student-dashboard.html / tenant home). */

/* ── Scoped card polish (tenant-grade depth + spacing) ───────────────── */
.ovx-regular .card,
.ovx-regular .ov-band-hero-card,
.ovx-regular #ov-content-coverage-card,
.ovx-regular .ov-op-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06);
  border-top-width: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ovx-regular .ov-band-hero-card { border-top: 0; }
.ovx-regular .card-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Coach strip ─────────────────────────────────────────────────────── */
.ovx-coach {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: var(--text-on-brand);
  box-shadow: 0 10px 24px var(--focus-ring);
}
.ovx-coach__avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.ovx-coach__body { flex: 1; min-width: 0; }
.ovx-coach__label {
  font-size:0.7rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.72);
  margin-bottom: 3px;
}
.ovx-coach__msg { font-size: 0.92rem; line-height: 1.5; font-weight: 500; color: #fff; }

/* ── Weekly Focus card ───────────────────────────────────────────────── */
.ovx-focus-card { padding: 1.25rem 1.4rem; }
.ovx-focus__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.2;
  margin: 0 0 2px;
}
.ovx-focus__subtitle { font-size: 0.8rem; color: var(--muted); margin: 0 0 14px; }
.ovx-focus__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ovx-focus__item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ovx-focus__item:hover { background: var(--surface-subtle); transform: translateX(2px); }
.ovx-focus__item--high   { border-left-color: var(--danger); }
.ovx-focus__item--medium { border-left-color: var(--warning); }
.ovx-focus__item--low    { border-left-color: var(--text-tertiary); }
.ovx-focus__body { flex: 1; min-width: 0; }
.ovx-focus__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ovx-focus__name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.ovx-focus__metric {
  font-size:0.7rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--maroon);
  white-space: nowrap;
}
.ovx-focus__item--high .ovx-focus__metric { background: var(--danger-soft); color: var(--danger); }
.ovx-focus__reason { font-size: 0.78rem; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.ovx-focus__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  font-size: 0.8rem; font-weight: 700; color: var(--maroon);
  text-decoration: none; white-space: nowrap;
  padding: 6px 4px;
  border: none; background: none; cursor: pointer; font-family: inherit;
}
.ovx-focus__cta:hover { color: var(--maroon2); text-decoration: underline; }

/* ── Hub Activity rows: weakest / strongest badges ───────────────────── */
.ovx-regular .hub-row-name { display: inline-flex; align-items: center; gap: 8px; }
.ovx-skill-badge {
  font-size:0.7rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
}
.ovx-skill-badge--weak   { background: var(--danger-soft); color: var(--danger); }
.ovx-skill-badge--strong { background: var(--success-soft); color: var(--success); }

/* ── Premium band hero treatment ─────────────────────────────────────── */
.ovx-regular .ov-band-hero-card {
  background: var(--surface);
}
.ovx-regular .ov-bh-band {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
}

@media (max-width: 640px) {
  .ovx-focus__item { flex-wrap: wrap; }
  .ovx-focus__cta { width: 100%; padding-top: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Merged from login-redesign.css — FEATURE rules only (tokens -> ik-tokens.css)
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Typography ───────────────────────────────────────────────────────── */
/* body font handled by the base body rule (var(--font-body)); Bengali codepoints
   render via the self-hosted Hind Siliguri @font-face (unicode-range). */
.page-header h1,#greeting,.card-title,.sc-val,.sb-name,
h1.heading,h2.heading,h3.heading{font-family:var(--font-heading);font-weight:900;}
/* keep numeric stat values in the rounded heading face */
#tab-overview .sc-val{font-family:var(--font-heading);}

/* ── App background + main content ────────────────────────────────────── */
body,#dashboard-screen,.dashboard-shell{background:var(--bg);}
.main-content{background:var(--bg);}

/* ── Sidebar (mockup deep-maroon rail + gold active nav) ──────────────── */
.sidebar{background:linear-gradient(180deg,#6B1420,#4A0D16);border-right:none;}
.sb-brand{border-bottom:none;padding:22px 18px 10px;}
.sb-emblem{background:rgba(255,255,255,0.12);border:none;border-radius:12px;width:40px;height:40px;box-shadow:0 4px 12px rgba(0,0,0,0.18);}
.sb-emblem img{filter:brightness(0) invert(1)!important;height:16px;}
.sb-name{color:#fff;font-size:14px;font-weight:700;}
.sb-sub{color:rgba(255,255,255,0.5);font-size:11.5px;padding-left:0;letter-spacing:0;}
/* profile card look */
.sb-user{margin:6px 14px 4px;padding:12px 14px;background:rgba(255,255,255,0.07);border-radius:16px;border-bottom:none;}
.sb-avatar{width:34px;height:34px;background:rgba(255,255,255,0.14);color:#fff;box-shadow:none;}
.sb-user-info .sb-uname{color:#fff;font-size:12.5px;font-weight:700;}
.sb-user-info .sb-role{color:rgba(255,255,255,0.45);font-size:12px;line-height:1.5;letter-spacing:0.04em;}
.sb-user-info .sb-student-id{color:rgba(255,255,255,0.6);}
/* section kickers */
.nav-section-label{color:rgba(255,255,255,0.4);font-size:11px;font-weight:700;letter-spacing:0.09em;padding:18px 16px 6px;}
/* nav items */
.sb-nav{padding:0 10px 6px;}
.nav-item{position:relative;padding:12px 16px;border-radius:14px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,0.72);margin-bottom:2px;transition:background .15s,color .15s;}
.nav-item:hover{background:rgba(255,255,255,0.07);color:#fff;transform:none;}
.nav-item:focus-visible{outline:2px solid rgba(255,255,255,0.85);outline-offset:-2px;}
/* Active nav — restrained translucent white over the maroon rail + slim white left indicator (mockup) */
.nav-item.active{background:rgba(255,255,255,0.12);color:#fff;font-weight:700;box-shadow:none;}
.nav-item.active::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:2px;background:#fff;}
.nav-item.active .nav-icon svg{stroke:#fff;}
.nav-icon svg{stroke-width:2;}
.sb-bottom{border-top:1px solid rgba(255,255,255,0.12);}
.logout-item{color:rgba(255,255,255,0.78);border-radius:14px;font-size:14.5px;font-weight:600;}
.logout-item:hover{background:rgba(255,255,255,0.08);color:#fff;}

/* ── Header row (mockup circular buttons + lang pill + theme toggle) ──── */
/* .sd-topbar padding/min-height removed 2026-07-29: this later rule was silently
   overriding the app-bar's own padding (both the desktop 34px gutter and the
   mobile 42px hamburger clearance), which pushed the icons past the content
   column on desktop and let the hamburger sit on top of the bar title on phones.
   The bar is defined once now, near .page-header. */
.pre-header-bell{background:var(--header-btn-bg);border:1px solid var(--border);color:var(--text-secondary);box-shadow:var(--shadow-card);width:40px;height:40px;}
.pre-header-bell:hover{color:var(--brand);border-color:var(--border);transform:translateY(-1px);}
#sd-lang-toggle,#sd-theme-toggle{width:auto;min-width:40px;}
/* lang toggle as a pill */
#sd-lang-toggle{border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;height:auto;}
.pre-header-avatar{width:40px;height:40px;box-shadow:0 2px 8px rgba(107,20,32,0.10);}

/* ── Base card (mockup: soft shadow, 22px radius, no hard border) ─────── */
.card{background:var(--card-bg);border:none;border-radius:22px;box-shadow:var(--card-shadow);}
#tab-overview .card,
#tab-overview .stat-card,
#tab-overview .ov-band-hero-card,
#tab-overview #ov-content-coverage-card,
#tab-overview .ov-op-card{border-radius:22px;box-shadow:var(--card-shadow);}
.card-title{color:var(--muted);font-weight:700;letter-spacing:0.06em;}

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header h1,#greeting{color:var(--text);font-size:26px;font-weight:800;}
.page-header p,#greeting-sub{color:var(--muted);font-weight:600;}

/* ── Stat tile (colored 4px top border, per mockup) ───────────────────── */
.stat-card{border-radius:16px;box-shadow:var(--card-shadow);background:var(--card-bg);}
.sc-label{color:var(--muted);}
.sc-val{color:var(--text);}
.sc-sub{color:var(--muted);}

/* ── Empty states ─────────────────────────────────────────────────────── */
.empty-state{color:var(--muted);}

/* Vocab Progress — "Stuck Words" metric accent is a danger state, not warning (mockup §9).
   s4 is unique within this tab (only the Stuck card uses it here). */
#tab-vocab-progress .stat-card.s4::before{background:var(--danger);}

/* ── Cambridge Practice — donut column 1.2× wider (mockup ratio), desktop only ── */
@media(min-width:769px){
  #tab-cambridge-practice .stats-grid{grid-template-columns:repeat(3,1fr) 1.2fr;}
}

/* ── Paraphrase Bank — softer mockup corners/padding (tab is otherwise at parity) ── */
.pb-tab{border-radius:12px;}
.pb-group{border-radius:14px;}
.pb-pair-card{border-radius:12px;padding:14px 16px;}
.pb-group-body{padding:14px 18px;}

/* ══ PHASE 2 — Pre-IELTS Overview ═══════════════════════════════════════ */
/* Weekly 7-dot streak row (mockup) — active days = gold, inactive = divider */
.ov-streak-sub{margin-left:0;}
.ov-streak-dots{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0;}
.ov-streak-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.ov-streak-dot.on{background:var(--brand);box-shadow:0 0 0 2px var(--brand-soft);}
.ov-streak-dot.off{background:var(--divider);}
/* Daily Question 2×2 option chips → mockup (2px border, 14px radius, peach letter) */
.ovx-pre .ov-daily-q-opt--pre{border-width:2px;border-radius:14px;}
.ovx-pre .ov-daily-q-opt-letter{background:var(--brand-soft);color:var(--brand);}
.ovx-pre .ov-daily-q-opt--pre.ov-daily-q-correct .ov-daily-q-opt-letter{background:var(--green);color:#fff;}
.ovx-pre .ov-daily-q-opt--pre.ov-daily-q-wrong .ov-daily-q-opt-letter{background:var(--red);color:#fff;}
/* Streak banner → mockup cream/gold banner */
.ov-study-streak-bar{
  background:var(--streak-bg);border:none;border-radius:16px;
  padding:16px 22px;margin:0 0 20px;color:var(--text);font-weight:600;
  box-shadow:var(--card-shadow);font-size:14px;
}
.ov-study-streak-bar strong{font-family:var(--font-heading);color:var(--maroon);font-size:1.1rem;}
.ov-streak-sub{color:var(--muted);}
.ov-presence-chip{color:var(--muted);}
/* Operational info cards → 4px colored top border (mockup stat-tile look) */
#tab-overview .ov-op-card{border:none;border-radius:16px;box-shadow:var(--card-shadow);}
#tab-overview .ov-op-card::after{height:4px;opacity:1;background:var(--op-accent,var(--maroon));}
.ov-pre-fee-card{--op-accent:var(--warning);}
.ov-pre-attendance-card{--op-accent:var(--success);}
.ov-pre-notice-card{--op-accent:var(--brand);}
.ov-op-label,.ov-op-icon{color:var(--muted);}
/* Card-title icon chips → warm tint */
.card-title-icon{border-radius:8px;}
/* Daily-question / activity option chips already inherit base card; keep readable in dark */
.ov-daily-q-opt,.ov-daily-q-opt-letter{color:var(--text);}
/* Activity rows */
.actrow,.actrow + .actrow{border-color:var(--divider);}

/* ── Mock Exams tab (lms-tour parity) ────────────────────────────────── */
.me-header{align-items:center;gap:16px;}
.me-hall-cta{background:var(--maroon);color:#fff;font-size:12px;font-weight:800;padding:8px 16px;border-radius:100px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;transition:background .15s,transform .12s;}
.me-hall-cta:hover{background:var(--maroon2);transform:translateY(-1px);color:#fff;}
.me-purchase-banner{border:1px solid var(--warning);background:var(--warning-soft);padding:10px 14px;border-radius:10px;font-size:13px;color:var(--warning);margin-bottom:16px;}
.me-list{display:flex;flex-direction:column;gap:12px;margin:16px 0 22px;}
.me-next{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--maroon);border-radius:12px;padding:18px 22px;margin-bottom:16px;}
.me-next-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.me-next-kicker{font-size:10px;font-weight:900;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.me-next-title{font-size:1.15rem;font-weight:900;color:var(--text);margin-top:4px;line-height:1.25;}
.me-next-meta{font-size:12px;color:var(--maroon);margin-top:2px;}
.me-next-cta{background:var(--maroon);color:#fff;font-size:12px;font-weight:800;padding:10px 20px;border-radius:9px;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.me-next-cta:hover{background:var(--maroon2);color:#fff;}
.me-next-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
.me-next-stat{background:var(--bg);border-radius:10px;padding:12px 14px;}
.me-next-stat-label{font-size:9px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.me-next-stat-val{font-size:1.4rem;font-weight:900;color:var(--text);margin-top:2px;line-height:1.1;}
.me-next-stat-val.is-warn{color:var(--warning);}
.me-next-stat-val.is-ok{color:var(--success);}
.me-next-stat-val.is-focus{color:var(--maroon);font-size:1.15rem;}
.me-next-stat-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.me-focus-trend.is-up{color:var(--success);font-weight:800;}
.me-focus-trend.is-down{color:var(--danger);font-weight:800;}
.me-focus-trend.is-flat{color:var(--muted);font-weight:800;}
.me-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;border-left:3px solid var(--navy);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;}
.me-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,0.09);border-color:rgba(139,26,26,0.18);}
.me-card--active{border-left-color:var(--warning);background:linear-gradient(120deg,var(--card),var(--warning-soft));}
.me-card--done{border-left-color:var(--success);}
.me-card--todo{border-left-color:var(--maroon);}
.me-card-title{font-size:15px;font-weight:900;color:var(--text);}
.me-card-chips{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;align-items:center;}
.me-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:var(--divider);color:var(--muted);}
.me-chip.is-done{background:var(--success-soft);color:var(--success);}
.me-chip.is-progress{background:var(--warning-soft);color:var(--warning);}
.me-chip.is-due{background:var(--warning-soft);color:var(--warning);}
.me-chip.is-overdue{background:var(--danger-soft);color:var(--danger);}
.me-card-band{margin-left:auto;font-weight:800;font-size:13px;color:var(--warning);}
.me-card-band.is-muted{color:var(--muted);font-weight:700;}
.me-card-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--maroon);color:#fff;font-size:13px;font-weight:800;padding:10px 18px;border-radius:9px;border:none;text-decoration:none;cursor:pointer;font-family:inherit;}
.me-card-cta:hover{background:var(--maroon2);color:#fff;}
.me-card-expired{display:inline-flex;align-items:center;padding:10px 16px;border-radius:8px;background:var(--divider);color:var(--muted);font-size:13px;font-weight:800;}

.mr-section{margin-top:8px;}
.mr-latest-row{display:grid;grid-template-columns:0.9fr 1.1fr;gap:16px;margin-bottom:16px;}
.mr-band-card,.mr-sect-card,.mr-trend-card,.mr-history-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 22px;}
.mr-band-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.mr-band-kicker,.mr-sect-kicker,.mr-trend-kicker,.mr-history-kicker{font-size:10px;font-weight:900;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.mr-trend-kicker,.mr-history-kicker,.mr-sect-kicker{font-size:11px;letter-spacing:0.1em;color:var(--text-secondary,#61616B);display:flex;align-items:center;gap:8px;}
.mr-trend-icon{width:22px;height:22px;border-radius:6px;background:var(--brand-soft);color:var(--maroon);display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.mr-band-ring{width:126px;height:126px;border-radius:50%;border:9px solid var(--brand-soft);border-top-color:var(--maroon);border-right-color:var(--maroon);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mr-band-ring-val{font-size:2.7rem;font-weight:900;color:var(--text);line-height:1;}
.mr-band-ring-sub{font-size:9px;font-weight:800;letter-spacing:0.08em;color:var(--muted);margin-top:4px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mr-band-delta{font-size:12px;font-weight:700;margin-top:12px;color:var(--muted);}
.mr-band-delta .is-up{color:var(--success);}
.mr-band-delta .is-down{color:var(--danger);}
.mr-sect-row{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:12px;margin-bottom:13px;}
.mr-sect-row:last-child{margin-bottom:0;}
.mr-sect-name{font-size:13px;font-weight:800;color:var(--text);}
.mr-sect-track{height:8px;background:var(--divider);border-radius:999px;overflow:hidden;}
.mr-sect-fill{display:block;height:100%;border-radius:999px;}
.mr-sect-fill.tone-navy{background:var(--navy);}
.mr-sect-fill.tone-violet{background:var(--violet);}
.mr-sect-band{font-size:14px;font-weight:900;}
.mr-sect-band.tone-navy{color:var(--navy);}
.mr-sect-band.tone-violet{color:var(--violet);}
.mr-sect-empty{font-size:13px;color:var(--muted);padding:20px 0;text-align:center;}
.mr-trend-card{margin-bottom:16px;padding:18px 22px;}
.mr-trend-body{display:flex;align-items:flex-end;gap:26px;min-height:120px;padding:12px 8px 0;}
.mr-trend-bars{display:flex;align-items:flex-end;gap:26px;}
.mr-trend-col{display:flex;flex-direction:column;align-items:center;gap:6px;}
.mr-trend-band{font-size:12px;font-weight:900;color:var(--maroon);}
.mr-trend-bar{width:44px;background:linear-gradient(180deg,#C98A96,var(--maroon));border-radius:6px 6px 0 0;min-height:18px;}
.mr-trend-label{font-size:10px;color:var(--muted);}
.mr-trend-insight{flex:1;border-left:1px dashed var(--border);min-height:100px;display:flex;flex-direction:column;justify-content:center;padding-left:22px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.mr-trend-insight strong{color:var(--maroon);}
.mr-trend-empty{width:100%;text-align:center;color:var(--muted);font-size:13px;padding:36px 12px;}
.mr-history-card{padding:8px 4px;margin-bottom:16px;}
.mr-history-kicker{padding:12px 18px;margin-bottom:0;}
.mr-hist-table{width:100%;}
.mr-hist-head,.mr-hist-row{display:grid;grid-template-columns:1.6fr 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr;padding:12px 18px;align-items:center;font-size:12.5px;gap:4px;}
.mr-hist-head{background:var(--bg);font-size:10px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding:10px 18px;}
.mr-hist-row{border-top:1px solid var(--border);cursor:pointer;}
.mr-hist-row:hover{background:rgba(139,26,26,0.04);}
.mr-hist-test{font-weight:800;color:var(--text);}
.mr-hist-date{color:var(--muted);}
.mr-hist-sec.tone-navy{color:var(--navy);font-weight:700;}
.mr-hist-sec.tone-violet{color:var(--violet);font-weight:700;}
.mr-hist-dash{color:var(--muted);}
.mr-hist-overall{display:inline-block;font-size:12px;font-weight:900;padding:3px 10px;border-radius:100px;background:var(--bg);color:var(--text);}
.mr-hist-overall.is-good{background:var(--success-soft);color:var(--success);}
.mr-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.mr-kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;border-top:3px solid var(--border);}
.mr-kpi--attempts{border-top-color:var(--maroon);}
.mr-kpi--best{border-top-color:var(--success);}
.mr-kpi--latest{border-top-color:var(--violet);}
.mr-kpi-label{font-size:9px;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.mr-kpi-val{font-family:var(--font-heading);font-size:1.9rem;font-weight:900;color:var(--text);margin-top:6px;line-height:1;}
.mr-kpi--best .mr-kpi-val{color:var(--success);}
.mr-kpi-sub{font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:900px){
  .me-next-stats{grid-template-columns:1fr 1fr;}
  .mr-latest-row{grid-template-columns:1fr;}
  .mr-kpi-grid{grid-template-columns:1fr;}
  .mr-trend-body{flex-direction:column;align-items:stretch;gap:14px;}
  .mr-trend-insight{border-left:none;border-top:1px dashed var(--border);padding-left:0;padding-top:14px;min-height:0;}
  .mr-hist-head,.mr-hist-row{grid-template-columns:1.4fr 0.9fr repeat(5,0.7fr);font-size:11.5px;padding:10px 12px;}
}
@media(max-width:600px){
  .me-header{flex-wrap:wrap;}
  .me-next-row{flex-direction:column;}
  .me-next-cta,.me-card-cta{width:100%;text-align:center;justify-content:center;}
  .me-next-stats{grid-template-columns:1fr 1fr;}
  .mr-hist-table{overflow-x:auto;}
  .mr-hist-head,.mr-hist-row{min-width:560px;}
}

/* ── Class Tests tab (lms-tour parity) ───────────────────────────────── */
.mt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px;}
.mt-stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:15px 18px;border-top:3px solid var(--border);}
.mt-stat--active{border-top-color:var(--warning);}
.mt-stat--upcoming{border-top-color:var(--navy);}
.mt-stat--done{border-top-color:var(--success);}
.mt-stat--band{border-top-color:var(--maroon);}
.mt-stat-label{font-size:9px;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.mt-stat-val{font-family:var(--font-heading);font-size:1.9rem;font-weight:900;color:var(--text);margin-top:5px;line-height:1;}
.mt-stat--active .mt-stat-val{color:var(--warning);}
.mt-stat--done .mt-stat-val{color:var(--success);}
.mt-stat-sub{font-size:11px;color:var(--muted);margin-top:4px;}
.mt-section{margin-bottom:22px;}
.mt-section-label{font-size:11px;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px;}
.mt-section-label--active{color:var(--warning);}
.mt-section-label--upcoming{color:var(--navy);}
.mt-section-label--past{color:var(--success);}
.mt-list{display:flex;flex-direction:column;gap:12px;}
.mt-loading{color:var(--muted);font-size:13px;padding:12px 2px;}
.mt-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.mt-card--live{background:linear-gradient(120deg,var(--card),var(--warning-soft));border-color:rgba(181,106,18,0.35);border-left:4px solid var(--warning);border-radius:14px;padding:18px 22px;align-items:stretch;}
.mt-card--upcoming{border-left:3px solid var(--navy);}
.mt-card--past{border-left:3px solid var(--maroon);}
.mt-card--multi{flex-direction:column;align-items:stretch;}
.mt-card-row{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;}
.mt-card-main{min-width:0;flex:1;}
.mt-card-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.mt-live-dot{width:8px;height:8px;border-radius:50%;background:var(--warning);display:inline-block;flex-shrink:0;}
.mt-live-label{font-size:10px;font-weight:900;letter-spacing:0.1em;color:var(--warning);text-transform:uppercase;}
.mt-card-title{font-size:15px;font-weight:900;color:var(--text);line-height:1.3;}
.mt-card--upcoming .mt-card-title,.mt-card--past .mt-card-title{font-size:14px;}
.mt-card-meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45;}
.mt-start-btn{background:var(--maroon);color:#fff;font-size:13px;font-weight:800;padding:12px 26px;border:none;border-radius:9px;white-space:nowrap;cursor:pointer;font-family:inherit;flex-shrink:0;transition:background .15s,transform .12s;}
.mt-start-btn:hover{background:var(--maroon2);transform:translateY(-1px);}
.mt-pill{font-size:11px;font-weight:800;padding:6px 14px;border-radius:100px;white-space:nowrap;flex-shrink:0;}
.mt-pill--upcoming{background:var(--navy-soft);color:var(--navy);}
.mt-card-result{text-align:right;flex-shrink:0;}
.mt-score-line{font-size:12.5px;font-weight:800;color:var(--success);margin-bottom:4px;}
.mt-band-pill{display:inline-block;font-size:12px;font-weight:900;padding:3px 12px;border-radius:100px;}
.mt-band-pill--good{background:var(--success-soft);color:var(--success);}
.mt-band-pill--mid{background:var(--warning-soft);color:var(--warning);}
.mt-band-pill--pending{background:var(--divider);color:var(--muted);}
.mt-review-btn{display:inline-block;margin-top:8px;background:var(--maroon);color:#fff;font-size:12px;font-weight:800;padding:8px 16px;border-radius:8px;white-space:nowrap;text-decoration:none;transition:background .15s,transform .12s;}
.mt-review-btn:hover{background:var(--maroon2);transform:translateY(-1px);}
.mt-auto-tag{font-size:11px;color:var(--danger);font-weight:700;margin-left:4px;}
.mt-admin-note{font-size:12px;color:var(--muted);margin-top:6px;font-style:italic;}
.mt-combined{font-weight:700;font-size:13px;color:var(--success);margin-top:8px;}
.mt-combined--muted{color:var(--muted);font-weight:600;}
.mt-sec-list{border:1px solid var(--border);border-radius:10px;padding:0 12px;margin-top:12px;background:var(--card);}
.mt-sec-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.mt-sec-row:last-child{border-bottom:none;}
.mt-sec-row.is-locked{opacity:0.45;}
.mt-sec-idx{min-width:22px;text-align:center;font-weight:700;color:var(--muted);}
.mt-sec-row.is-done .mt-sec-idx{color:var(--success);}
.mt-sec-row.is-next .mt-sec-idx{color:var(--maroon);}
.mt-sec-body{flex:1;min-width:0;}
.mt-sec-title{font-size:13px;font-weight:600;color:var(--text);}
.mt-sec-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.mt-sec-right{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);flex-shrink:0;}
.mt-sec-row.is-done .mt-sec-right{color:var(--success);}
.mt-sec-btn{display:inline-block;background:var(--maroon);color:#fff;border:none;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;text-decoration:none;}
.mt-sec-btn:hover{background:var(--maroon2);}
.mt-speak-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.mt-speak-panel{background:var(--card);max-width:600px;width:100%;max-height:80vh;overflow-y:auto;padding:28px;border-radius:14px;border:1px solid var(--border);}
.mt-speak-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;margin-bottom:4px;color:var(--maroon);}
.mt-speak-label{font-size:13px;color:var(--muted);margin-bottom:20px;}
.mt-speak-q{padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text);}
.mt-speak-q strong{color:var(--maroon);}
@media(max-width:900px){.mt-stats{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){
  .mt-stats{grid-template-columns:1fr 1fr;gap:10px;}
  .mt-card,.mt-card--live{flex-direction:column;align-items:stretch;}
  .mt-card-row{flex-direction:column;align-items:stretch;}
  .mt-card-result{text-align:left;}
  .mt-start-btn{width:100%;text-align:center;}
  .mt-review-btn{width:100%;text-align:center;}
  .mt-pill{align-self:flex-start;}
}

/* ── Dark-mode surface hardening — map hardcoded white/grey inner surfaces to
   tokens so no light patches show inside dark cards. Light mode unchanged. ── */
.ov-daily-q-opt{background:var(--card-bg);border-color:var(--border);color:var(--text);}
.ov-daily-q-cat{background:var(--divider);color:var(--muted);}
.ov-daily-q-result{border-top-color:var(--border);}
.mistake-row{background:var(--card-bg);border-color:var(--border);}
.mistake-row.mistake-learned{background:var(--bg);}
.mistake-learned-btn{background:var(--card-bg);border-color:var(--border);color:var(--text);}
.acct-pay-row{border-bottom-color:var(--border);}
.acct-idcard-thumb{border-color:var(--border);background-color:var(--divider);}
.mr-new-table th,.mr-new-table td{border-color:var(--border);}
html[data-theme="dark"] .mr-new-table tbody tr:hover td{background:rgba(255,255,255,0.04);}
html[data-theme="dark"] .vacation-banner{background:var(--warning-soft);border-color:var(--warning);}

/* ══ PHASE 3–4 — Surface sweep across progress + practice/account tabs ════
   Card/drawer surfaces → --card-bg (identical in light). Bar tracks → --divider
   (subtle warm shift, matches mockup). #f9fafb panels → --bg. A few surfaces that
   MUST stay white (QR code, toggle thumb, embedded slide iframe) are left alone. */
.ov-op-card,.cp-empty-state,.ov-band-hero-card{background:var(--card-bg);}
.ph-bar-track,.eg-bar-track,.hw-progress-bar,.hw-stat-bar,.fee-mini-bar,
.lb-bar-wrap,.lb-effort-bar-wrap,.eg-pace-verdict.pace-muted{background:var(--divider);}
.data-table th{background:var(--bg);}
.data-table th,.data-table td{border-color:var(--border);}
.mistake-section-title{color:var(--muted);}
html[data-theme="dark"] .data-table tr:hover td{background:rgba(255,255,255,0.04);}
/* Regular-overview focus cards: token-colored text → must darken bg in dark mode.
   Scoped under .ovx-regular (real DOM ancestor) to outrank the premium.css base rule. */
html[data-theme="dark"] .ovx-focus__item{background-color:var(--card-bg)!important;}
html[data-theme="dark"] .ovx-focus__item:hover{background-color:var(--bg)!important;}
/* Pre/Foundation progress card (#ik-b1) — match the body-prefixed specificity so these win */
body #ik-b1-progress-card .ik-b1-wrap,
body #ik-b1-progress-card .ik-b1-focus-btn--secondary{background:var(--card-bg);}
html[data-theme="dark"] #ik-b1-progress-card .ik-b1-focus-btn--secondary{color:var(--text-secondary);border-color:var(--divider);}
html[data-theme="dark"] body #ik-b1-progress-card .ik-b1-bar-wrap{background:var(--divider);}
/* Surfaces intentionally kept LIGHT in dark mode (dark text baked in / function over theme):
   the ID card + its QR, toggle thumb, embedded slide iframe, and the whole mock-review
   feedback drawer (headers + body text are hardcoded dark and readable only on a light panel). */
.tog-thumb,.ik-idcard-qr,#slide-iframe{background:#fff;}

/* ══ Regular-overview dark-mode fixes (live-QA catch 2026-07-13) ═══════════
   These cards are rendered by regular-specific code (today-plan.js injected <style>,
   login-dashboard.css) with a hardcoded LIGHT palette + baked dark text, and they
   outrank the shared token overrides via id/injected specificity. Dark-scoped +
   !important where needed. Light mode is untouched. */
/* Focus Today card (.ik-reg-wrap, today-plan.js) */
html[data-theme="dark"] .ik-reg-wrap{background:var(--card-bg)!important;color:var(--muted);}
html[data-theme="dark"] .ik-reg-hd{color:var(--text);}
html[data-theme="dark"] .ik-reg-body{color:var(--muted);}
/* Predicted Band Score hero (.ov-band-hero-card + premium gradient) */
html[data-theme="dark"] .ov-band-hero-card,
html[data-theme="dark"] .ovx-regular .ov-band-hero-card{background:var(--card-bg)!important;}
html[data-theme="dark"] .ov-bh-band{color:var(--text);}
html[data-theme="dark"] .ov-bh-sub,
html[data-theme="dark"] .ov-bh-spark-label{color:var(--muted);}
/* Hub Activity card (#ov-content-coverage-card) + hub rows */
html[data-theme="dark"] #ov-content-coverage-card{background:var(--card-bg)!important;}
html[data-theme="dark"] .hub-row{border-bottom-color:var(--divider);}
html[data-theme="dark"] .hub-row:hover{background:rgba(255,255,255,0.04);}
html[data-theme="dark"] .hub-row-name{color:var(--text);}
html[data-theme="dark"] .hub-row-sub{color:var(--muted);}
html[data-theme="dark"] .hub-row-chip{background:var(--divider);color:var(--muted);}
/* Next Class card */
html[data-theme="dark"] .ov-next-class-card{background:var(--card-bg)!important;}
/* Exam Goal "Set Goal" button contrast on dark */
html[data-theme="dark"] .eg-set-btn{color:var(--text-secondary);border-color:var(--divider);}
/* Regular operational-grid cards use a white gradient (…rgba(255,255,255,0.98)) that
   turns them light in dark mode — Notice, Next Class, latest/weak/estimated cards. */
html[data-theme="dark"] .ov-regular-operational-grid .ov-regular-latest-card,
html[data-theme="dark"] .ov-regular-operational-grid .ov-regular-weak-card,
html[data-theme="dark"] .ov-regular-operational-grid .ov-regular-estimated-card,
html[data-theme="dark"] .ov-regular-operational-grid #ov-next-class-wrap>.stat-card,
html[data-theme="dark"] .ov-regular-stage-a-grid #ov-next-class-wrap>.stat-card,
html[data-theme="dark"] .ov-regular-stage-a-grid .ov-regular-notice-card{background:var(--card-bg)!important;}
/* Notice text + tag colors that go low-contrast on dark */
html[data-theme="dark"] .notice-body,
html[data-theme="dark"] .notice-date{color:var(--text-secondary);}
html[data-theme="dark"] .tag-info{color:var(--info);}
html[data-theme="dark"] .tag-homework,
html[data-theme="dark"] .hw-due{color:var(--violet);}
/* Predicted-Band card buttons → mockup design: neutral outline + maroon-gradient primary
   (was bright-red outlines). Theme-aware via tokens. */
.ov-bh-btn{border-radius:12px;padding:9px 15px;font-weight:700;font-size:12.5px;}
.ov-bh-btn.ov-bh-btn-outline,.ov-bh-btn.ov-bh-btn-muted{background-color:var(--card-bg);background-image:none;border:2px solid var(--divider);color:var(--text);}
.ov-bh-btn.ov-bh-btn-outline:hover,.ov-bh-btn.ov-bh-btn-muted:hover{border-color:var(--maroon);background-color:var(--bg);}
.ov-bh-btn.ov-bh-btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border:none;color:var(--text-on-brand);}
.ov-bh-btn.ov-bh-btn-primary:hover{background:linear-gradient(135deg,var(--brand-hover),var(--brand-dark));}

/* Class Tests — dark theme (token-driven cards + soft live wash) */
html[data-theme="dark"] .mt-card--live{background:linear-gradient(120deg,var(--card),var(--warning-soft));border-color:rgba(214,154,67,0.35);}
html[data-theme="dark"] .mt-start-btn,html[data-theme="dark"] .mt-sec-btn,html[data-theme="dark"] .mt-review-btn{color:#fff;}
html[data-theme="dark"] .mt-sec-list{background:var(--surface-subtle,#202025);}
html[data-theme="dark"] .me-card--active{background:linear-gradient(120deg,var(--card),var(--warning-soft));}
html[data-theme="dark"] .me-next-stat{background:var(--surface-subtle,#202025);}
html[data-theme="dark"] .mr-hist-row:hover{background:rgba(255,255,255,0.04);}
html[data-theme="dark"] .mr-band-ring{border-color:rgba(182,73,91,0.25);border-top-color:var(--maroon);border-right-color:var(--maroon);}
html[data-theme="dark"] .mi-master-btn{background:var(--card);color:var(--text-secondary);}
html[data-theme="dark"] .mi-pill:not(.is-active){background:var(--card);}

/* Class check-in sticky bar (2026-09-24) — board-code attendance */
.att-checkin-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--card-bg,var(--card,#fff));
  border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(15,23,42,0.08);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
}
body.has-att-checkin .main-content{padding-bottom:110px;}
/* The bar is fixed full-width (left:0;right:0), so it sits on top of the fixed
   sidebar's bottom edge too — reserve the same space there so it never covers
   the Logout item (B: attendance bar blocking logout). */
body.has-att-checkin .sidebar{padding-bottom:110px;}
.att-checkin-inner{
  max-width:920px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
}
.att-checkin-copy{min-width:0;flex:1 1 160px;}
.att-checkin-title{font-size:13px;font-weight:800;color:var(--text);line-height:1.2;}
.att-checkin-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.att-checkin-form{display:flex;gap:8px;align-items:center;flex:0 0 auto;}
.att-checkin-input{
  width:5.5rem;text-align:center;letter-spacing:0.28em;font-weight:800;font-size:1.15rem;
  padding:10px 8px;border:1px solid var(--border);border-radius:10px;
  background:var(--control-bg,var(--bg));color:var(--text);font-variant-numeric:tabular-nums;
}
.att-checkin-input:focus{outline:2px solid var(--maroon);outline-offset:1px;border-color:var(--maroon);}
.att-checkin-btn{
  border:none;border-radius:10px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer;
  background:linear-gradient(135deg,var(--brand,#8A2432),var(--brand-dark,#6f1212));
  color:var(--text-on-brand,#fff);
}
.att-checkin-btn:hover{filter:brightness(1.05);}
.att-checkin-msg{flex:1 1 100%;font-size:12px;color:var(--muted);min-height:1.1em;}
.att-checkin-msg.is-ok{color:var(--green);}
.att-checkin-msg.is-error{color:var(--red);}
@media(max-width:600px){
  .att-checkin-inner{gap:8px;}
  .att-checkin-form{width:100%;}
  .att-checkin-input{flex:1;}
  .att-checkin-btn{flex:0 0 auto;}
  body.has-att-checkin .main-content{padding-bottom:140px;}
  body.has-att-checkin .sidebar{padding-bottom:140px;}
}
html[data-theme="dark"] .att-checkin-bar{box-shadow:0 -8px 24px rgba(0,0,0,0.35);}

/* One-time self-attendance calendar (2026-09-28) — remove with login-attendance-selfmark.js */
.att-sm-box{border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;background:var(--card-bg,var(--card,#fff));}
.att-sm-title{font-size:15px;font-weight:800;color:var(--text);}
.att-sm-sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;}
.att-sm-sub b{color:var(--text);}
.att-sm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11px;color:var(--muted);margin:12px 0 4px;}
.att-sm-key{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:middle;}
.att-sm-key.is-present{background:var(--green,#15803d);}
.att-sm-key.is-absent{background:var(--red,#b91c1c);}
.att-sm-key.is-off{background:var(--control-bg,#e5e7eb);}
.att-sm-months{display:flex;flex-wrap:wrap;gap:16px;}
.att-sm-month{margin-top:12px;flex:1 1 230px;max-width:300px;}
.att-sm-month-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:6px;}
.att-sm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.att-sm-dow{font-size:10px;text-align:center;color:var(--muted);font-weight:700;}
.att-sm-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;font-weight:700;border:none;padding:0;}
.att-sm-day.is-off{color:var(--muted);background:transparent;opacity:.55;}
button.att-sm-day{cursor:pointer;color:#fff;min-height:34px;}
button.att-sm-day.is-present{background:var(--green,#15803d);}
button.att-sm-day.is-absent{background:var(--red,#b91c1c);}
button.att-sm-day:focus-visible{outline:2px solid var(--maroon,#8A2432);outline-offset:2px;}
.att-sm-count{font-size:13px;color:var(--text);margin-top:14px;}
.att-sm-confirm{font-size:13px;color:var(--text);margin-top:10px;line-height:1.4;}
.att-sm-btnrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.att-sm-submit,.att-sm-back{border:none;border-radius:10px;padding:11px 16px;font-weight:800;font-size:13px;cursor:pointer;}
.att-sm-submit{background:linear-gradient(135deg,var(--brand,#8A2432),var(--brand-dark,#6f1212));color:var(--text-on-brand,#fff);}
.att-sm-submit:disabled{opacity:.6;cursor:default;}
.att-sm-back{background:var(--control-bg,#e5e7eb);color:var(--text);}
.att-sm-note{font-size:11px;color:var(--muted);margin-top:10px;}
.att-sm-msg{font-size:12px;min-height:1.2em;margin-top:6px;color:var(--muted);}
.att-sm-msg.is-error{color:var(--red);}
.att-sm-done{font-size:14px;font-weight:800;color:var(--green);}

/* ── Announcements — premium cards (2026-09-28). Scoped to .nt-* so the overview notice card is untouched. ── */
.nt-card{--nt:var(--info);--nt-soft:var(--info-soft);position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 18px 16px 22px;margin-bottom:14px;box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;}
.nt-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--nt);}
.nt-card:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px);}
.nt-card.is-urgent{--nt:var(--danger);--nt-soft:var(--danger-soft);}
.nt-card.is-good{--nt:var(--success);--nt-soft:var(--success-soft);}
.nt-card.is-homework{--nt:var(--violet);--nt-soft:var(--violet-soft);}
.nt-card.is-expired{opacity:.72;}
.nt-head{display:flex;gap:14px;align-items:flex-start;}
.nt-ico{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--nt-soft);color:var(--nt);}
.nt-ico svg{width:21px;height:21px;}
.nt-meta{min-width:0;flex:1;}
.nt-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:7px;}
.nt-chip{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px;line-height:1.45;}
.nt-chip-tag{background:var(--nt-soft);color:var(--nt);}
.nt-chip-batch{background:var(--control-bg);color:var(--text-secondary);text-transform:none;letter-spacing:0;font-weight:600;}
.nt-chip-due{background:var(--warning-soft);color:var(--warning);text-transform:none;letter-spacing:0;}
.nt-chip-due.is-expired{background:var(--control-bg);color:var(--text-tertiary);}
.nt-title{font-size:16.5px;line-height:1.35;font-weight:800;color:var(--text);margin:0;letter-spacing:-.01em;overflow-wrap:anywhere;}
.nt-date{font-size:12px;color:var(--text-tertiary);margin-top:4px;}
.nt-lang{display:inline-flex;gap:2px;padding:3px;margin:14px 0 0;background:var(--control-bg);border-radius:999px;}
.nt-lang-btn{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:12px;font-weight:700;padding:6px 15px;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease;}
.nt-lang-btn:focus-visible,.nt-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.nt-card[data-lang="en"] .nt-lang-btn[data-l="en"],.nt-card[data-lang="bn"] .nt-lang-btn[data-l="bn"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(24,24,27,.14);}
.nt-card[data-lang="en"] [data-lang="bn"],.nt-card[data-lang="bn"] [data-lang="en"]{display:none;}
.nt-body-wrap{position:relative;margin-top:14px;}
.nt-body{font-size:14px;line-height:1.7;color:var(--text-secondary);overflow-wrap:anywhere;}
.nt-body p{margin:0 0 10px;}
.nt-body p:last-child{margin-bottom:0;}
.nt-pane[lang="bn"]{line-height:1.95;}
.nt-steps,.nt-bullets{list-style:none;margin:2px 0 12px;padding:0;display:flex;flex-direction:column;gap:9px;}
.nt-steps li{display:flex;gap:11px;align-items:flex-start;}
.nt-step{flex:0 0 24px;height:24px;border-radius:50%;background:var(--nt-soft);color:var(--nt);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.nt-bullets li{position:relative;padding-left:16px;}
.nt-bullets li::before{content:'';position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--nt);}
.nt-card.is-clamped:not(.is-open) .nt-body-wrap{max-height:272px;overflow:hidden;}
.nt-card.is-clamped:not(.is-open) .nt-body-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none;}
.nt-more{margin-top:6px;border:0;background:transparent;color:var(--nt);font:inherit;font-weight:800;font-size:13px;cursor:pointer;padding:6px 0;}
.nt-more::after{content:' \2193';}
.nt-card.is-open .nt-more::after{content:' \2191';}
.nt-card .hw-tasks{margin-top:14px;}
.nt-empty{text-align:center;padding:44px 20px;border:1px dashed var(--border);border-radius:18px;background:var(--surface-subtle);}
.nt-empty-ico{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.nt-empty-ico svg{width:24px;height:24px;}
.nt-empty-title{font-size:15px;font-weight:800;color:var(--text);}
.nt-empty-sub{font-size:13px;color:var(--text-secondary);margin-top:4px;}
/* Segmented Homework | Announcements switch (also used by the chat channel switch) */
.notice-subtab-row{display:inline-flex;gap:2px;padding:4px;margin-bottom:16px;background:var(--control-bg);border-radius:999px;}
.notice-subtab{border:0;background:transparent;color:var(--text-secondary);padding:8px 18px;transition:background .15s ease,color .15s ease;}
.notice-subtab.active{background:var(--brand);color:var(--text-on-brand,#fff);box-shadow:0 2px 8px rgba(24,24,27,.16);}
@media(max-width:600px){.nt-card{padding:16px 14px 14px 18px;border-radius:16px;}.nt-ico{flex-basis:38px;width:38px;height:38px;border-radius:12px;}.nt-title{font-size:15.5px;}.nt-head{gap:11px;}}
@media(prefers-reduced-motion:reduce){.nt-card{transition:none;}.nt-card:hover{transform:none;}}

/* ── Community chat — student view (2026-09-28). Scoped to #tab-community; admin/teacher chat CSS is separate. ── */
#tab-community .chat-channel-head{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:18px 18px 0 0;}
#tab-community .chat-ch-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;}
#tab-community .chat-ch-ico svg{width:20px;height:20px;}
#tab-community .chat-ch-text{min-width:0;}
#tab-community .chat-ch-title{font-size:15px;font-weight:800;color:var(--text);overflow-wrap:anywhere;}
#tab-community .chat-ch-sub{font-size:12px;color:var(--text-secondary);margin-top:1px;line-height:1.4;}
#tab-community .chat-messages{display:block;height:clamp(340px,calc(100vh - 400px),620px);overflow-y:auto;padding:6px 14px 16px;background:var(--surface-subtle);border:1px solid var(--border);border-radius:0;margin-bottom:0;}
#tab-community .chat-messages .nt-empty{margin:36px 6px;background:transparent;}
#tab-community .chat-day{display:flex;justify-content:center;margin:16px 0 6px;}
#tab-community .chat-day span{font-size:11px;font-weight:700;color:var(--text-secondary);background:var(--control-bg);padding:3px 12px;border-radius:999px;}
#tab-community .chat-row{display:flex;gap:8px;align-items:flex-start;margin-top:10px;}
#tab-community .chat-row.is-cont{margin-top:2px;}
#tab-community .chat-row.is-mine{justify-content:flex-end;}
#tab-community .chat-av{flex:0 0 32px;width:32px;height:32px;border-radius:50%;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
#tab-community .chat-row.is-cont .chat-av{visibility:hidden;}
#tab-community .chat-av-0{background:var(--brand-soft);color:var(--brand);}
#tab-community .chat-av-1{background:var(--info-soft);color:var(--info);}
#tab-community .chat-av-2{background:var(--violet-soft);color:var(--violet);}
#tab-community .chat-av-3{background:var(--success-soft);color:var(--success);}
#tab-community .chat-av-4{background:var(--warning-soft);color:var(--warning);}
#tab-community .chat-av-5{background:var(--control-bg);color:var(--text-secondary);}
#tab-community .chat-msg{max-width:min(78%,520px);min-width:0;align-self:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px 16px 16px 5px;padding:8px 12px 6px;box-shadow:0 1px 2px rgba(24,24,27,.05);}
#tab-community .chat-row.is-cont .chat-msg{border-top-left-radius:5px;}
#tab-community .chat-msg.chat-msg-mine{background:var(--brand);border-color:var(--brand);border-radius:16px 16px 5px 16px;}
#tab-community .chat-row.is-mine.is-cont .chat-msg{border-top-right-radius:5px;}
#tab-community .chat-msg-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px;}
#tab-community .chat-msg-name{font-size:12px;font-weight:800;color:var(--text);}
#tab-community .chat-badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand);}
#tab-community .chat-badge-staff{background:var(--info-soft);color:var(--info);text-transform:uppercase;}
#tab-community .chat-msg-body{font-size:14px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;}
#tab-community .chat-msg-mine .chat-msg-body{color:var(--text-on-brand,#fff);}
#tab-community .chat-msg.is-deleted{background:transparent;border-style:dashed;box-shadow:none;}
#tab-community .chat-msg-deleted{color:var(--text-tertiary);font-size:13px;}
#tab-community .chat-msg-foot{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:2px;}
#tab-community .chat-msg-time{font-size:11px;color:var(--text-tertiary);margin:0;}
#tab-community .chat-msg-mine .chat-msg-time{color:rgba(255,255,255,.75);}
#tab-community .chat-mod-btn{display:inline-flex;padding:2px;border:0;background:none;color:var(--text-tertiary);cursor:pointer;opacity:0;transition:opacity .15s ease;border-radius:6px;}
#tab-community .chat-mod-btn svg{width:13px;height:13px;}
#tab-community .chat-msg:hover .chat-mod-btn,#tab-community .chat-mod-btn:focus-visible{opacity:1;}
#tab-community .chat-mod-btn:hover{color:var(--danger);}
@media(hover:none){#tab-community .chat-mod-btn{opacity:.55;}}
#tab-community .chat-composer{display:flex;gap:10px;align-items:center;padding:12px;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 18px 18px;}
#tab-community .chat-composer-input{flex:1;min-width:0;border:1px solid var(--border);background:var(--control-bg);color:var(--text);border-radius:999px;padding:12px 18px;font:inherit;font-size:14px;transition:border-color .15s ease,background .15s ease;}
#tab-community .chat-composer-input::placeholder{color:var(--text-tertiary);}
#tab-community .chat-composer-input:focus{outline:2px solid var(--focus-ring);border-color:var(--brand);background:var(--surface);}
#tab-community .chat-composer-input:disabled{opacity:.6;}
#tab-community .chat-send{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:var(--brand);color:var(--text-on-brand,#fff);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(24,24,27,.16);transition:background .15s ease,transform .15s ease;}
#tab-community .chat-send:hover{background:var(--brand-hover);transform:translateY(-1px);}
#tab-community .chat-send:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
#tab-community .chat-send svg{width:19px;height:19px;margin-left:-2px;}
@media(max-width:600px){#tab-community .chat-msg{max-width:84%;}#tab-community .chat-channel-head{padding:12px 14px;}}
@media(prefers-reduced-motion:reduce){#tab-community .chat-send{transition:none;}}

/* Unscripta host (2026-09-30): the sidebar gradient above is hardcoded IK maroon, so the mirrored app showed a maroon rail next to indigo accents.
   Same indigo pair the guided tour uses. IK sets no data-brand attribute, so this cannot touch the IK portal. */
[data-brand="unscripta"] .sidebar{background:linear-gradient(180deg,#3A30B0,#1E1866);}
[data-brand="unscripta"] .nav-item.active{color:#3F35C9;}