/* ============================================================================
   KLOUDHIRE — ONE DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Tokens, sidebar, topbar, hero, cards, panels and charts are the SAME system
   KloudExam uses, so the two Kurela products read as one platform. Nothing
   below is role-specific: all seven roles (Student, TPO, Recruiter, Hiring
   Manager, Employer Admin, Alumni, Platform Admin) render through these rules.

   Only NAVIGATION ITEMS and PANEL CONTENT change per role. See assets/roles.js.
   ========================================================================== */

:root{
  /* --- reference tokens, unchanged --- */
  --page-bg:#eef1f8;
  --card-bg:#ffffff;
  --border:#eef0f6;
  --text:#1f2430;
  --text-soft:#6b7280;
  --text-faint:#9aa1b1;
  --blue:#3b82f6;
  --blue-dark:#2563eb;
  --purple:#8b5cf6;
  --pink:#ec4899;
  --green:#22c55e;
  --orange:#f59e0b;
  --teal:#14b8a6;
  --cyan:#06b6d4;
  --red:#ef4444;
  --navy:#1e3a8a;
  --sidebar-w:214px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow:0 2px 10px rgba(30,41,80,.06);

  /* --- extensions (same idiom, new components) --- */
  --shadow-hover:0 6px 18px rgba(30,41,80,.10);
  --tint:#f4f6fb;          /* the reference's light-blue surface tint      */
  --tint-strong:#eceffb;   /* the reference's hover tint                   */
  --ease:160ms cubic-bezier(.4,0,.2,1);  /* 120-200ms, subtle             */
  --hero-image:none;       /* bound to the tenant theme's banner, if any   */

  font-family:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
ul{list-style:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input{font-family:inherit;}
i{line-height:1;}
a{text-decoration:none;color:inherit;}

.app{display:flex;min-height:100vh;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ===================== SIDEBAR =============================================
   IDENTICAL FOR EVERY ROLE. Width, branding block, nav metrics, footer and
   hover/active treatment never change; only the list of items does.
   ========================================================================= */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:#fff;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
  z-index:40;
}

/* College branding area — logo + college name, once, here only. */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 18px 16px;
  border-bottom:1px solid var(--border);
}
.brand-icon{
  width:38px;height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  flex:0 0 auto;
  overflow:hidden;
}
/* The real college logo when the tenant theme supplies one. */
.brand-icon img{width:100%;height:100%;object-fit:contain;background:#fff;}
.brand-title{
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  color:var(--text);
}
.brand-sub{
  font-size:11px;
  color:var(--text-soft);
  margin-top:1px;
}

.nav{
  flex:1;
  overflow-y:auto;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav-section{
  font-size:10px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:14px 12px 6px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border-radius:9px;
  color:#4b5266;
  font-size:13px;
  font-weight:500;
  line-height:1.25;
  border:1px solid transparent;
  transition:background var(--ease),color var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.nav-item i{width:16px;text-align:center;font-size:14px;color:#8891a5;transition:color var(--ease);}
.nav-item:hover{background:var(--tint);border-color:#e6eaf6;}
.nav-item.active{
  background:linear-gradient(135deg,#3b82f6,#2f6fed);
  color:#fff;
  box-shadow:0 4px 10px rgba(59,130,246,.35);
  border-color:transparent;
}
.nav-item.active i{color:#fff;}
.nav-count{
  margin-left:auto;
  font-size:10.5px;
  font-weight:700;
  background:#eaf1ff;
  color:var(--blue-dark);
  border-radius:20px;
  padding:2px 7px;
  min-width:20px;
  text-align:center;
}
.nav-item.active .nav-count{background:rgba(255,255,255,.22);color:#fff;}

/* Bottom branding — deliberately subtle. */
.sidebar-footer{
  padding:12px 18px;
  font-size:11px;
  color:var(--text-faint);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:6px;
}
.sidebar-footer b{font-weight:700;color:#8b93a6;}

/* ===================== MAIN ===================== */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100vh;
}

/* ---- topbar ---- */
.topbar{
  height:64px;
  flex:0 0 64px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  gap:24px;
}
.menu-btn{
  display:none;
  width:38px;height:38px;
  border-radius:10px;
  background:var(--tint);
  color:#5b6373;
  font-size:16px;
  align-items:center;justify-content:center;
  transition:background var(--ease);
}
.menu-btn:hover{background:var(--tint-strong);}
.search{
  flex:1;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--tint);
  border:1px solid #e9ecf5;
  border-radius:10px;
  padding:9px 12px;
  color:var(--text-faint);
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
.search:hover{border-color:#dbe4f7;}
.search:focus-within{background:#fff;border-color:#c7d9fb;box-shadow:0 0 0 3px rgba(59,130,246,.10);}
.search i{font-size:13px;color:var(--blue-dark);}
.search input{
  border:none;background:transparent;outline:none;flex:1;
  font-size:13px;color:var(--text);min-width:0;
}
.search input::placeholder{color:var(--text-faint);}
.kbd{
  font-size:11px;font-weight:700;color:var(--blue-dark);
  background:#eaf1ff;border:1px solid #dbe6fb;border-radius:6px;padding:3px 7px;
  flex:0 0 auto;
}

.topbar-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.icon-btn{
  position:relative;
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:#5b6373;font-size:16px;background:var(--tint);
  transition:background var(--ease),box-shadow var(--ease);
}
.icon-btn:hover{background:var(--tint-strong);box-shadow:var(--shadow);}
.icon-btn .fa-grip{color:var(--blue-dark);}
.badge{
  position:absolute;top:-3px;right:-3px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.profile{
  display:flex;align-items:center;gap:9px;
  padding-left:10px;border-left:1px solid var(--border);cursor:pointer;
}
.avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  background:#eaf1ff;color:var(--blue-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;flex:0 0 auto;
}
.profile-name{font-size:13px;font-weight:700;color:var(--text);}
.profile-role{font-size:11px;color:var(--text-soft);}
.profile-caret{font-size:10px;color:var(--text-faint);margin-left:2px;}

/* ---- content ---- */
.content{
  flex:1;
  overflow-y:auto;
  padding:22px 24px 40px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ===================== HERO / BANNER =====================
   The approved hero (2026-09-16): a quiet greeting over a large name, the
   role's two calls to action, our drawn desk scene centre-right, and the
   product line "Assess Better. Together." at the far right.               */
.banner{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:212px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 36px;
  color:#122a5c;
  background:linear-gradient(115deg,#e7efff 0%,#f1f6ff 46%,#fbfdff 100%);
}
/* Tenant banner image slot. Defaults to the gradient above when unset. */
.banner-photo{position:absolute;inset:0;background-image:var(--hero-image);background-size:cover;background-position:center 32%;}
.banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(234,241,255,.9) 0%,rgba(234,241,255,.55) 26%,rgba(234,241,255,0) 44%);
}
/* The desk scene - the user's own generated photograph-grade asset, sitting
   centre-right where the reference's photo sat. Soft-masked on both sides so
   it dissolves into the banner wash under the text and the product line. */
.banner-art{
  position:absolute;
  left:33%;right:18%;top:0;bottom:0;
  pointer-events:none;
}
.banner-art img{
  width:100%;height:100%;display:block;
  /* Right-anchored: the croppable slack is the empty wall on the image's
     left, never the pencil cup on its right. */
  object-fit:cover;object-position:right 72%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 93%,transparent 100%);
}
.banner-date{
  position:absolute;top:18px;right:26px;
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #e2e8f6;
  box-shadow:0 2px 8px rgba(30,41,80,.1);
  padding:8px 14px;border-radius:10px;
  font-size:12.5px;font-weight:700;color:#26324a;z-index:3;
  transition:box-shadow var(--ease),border-color var(--ease);
}
.banner-date:hover{box-shadow:var(--shadow-hover);border-color:#c7d9fb;}
.banner-date i:first-child{color:var(--blue-dark);}
.banner-date .fa-chevron-down{color:var(--text-faint);font-size:10px;}

.banner-content{position:relative;z-index:2;max-width:42%;}
.hero-greet{font-size:18px;font-weight:600;color:#3d5077;line-height:1.2;}
.hero-name{
  font-size:41px;font-weight:800;color:#152c5b;
  line-height:1.05;letter-spacing:-.8px;margin:2px 0 9px;
}
.banner-content p{font-size:13.5px;font-weight:500;color:#43506b;max-width:44ch;}
.hero-cta{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap;}
.hero-cta .btn{padding:9px 15px;font-size:12.5px;border-radius:10px;}
/* The scope stays, quietly: whose data is on screen is still worth a line. */
.hero-scope{
  display:flex;align-items:center;gap:7px;margin-top:12px;
  font-size:11px;font-weight:600;color:#8291ad;
}
.hero-scope i{font-size:11px;color:#9fb1cf;}

/* The product line, far right, with its underline stroke. */
.banner-line{
  position:absolute;right:44px;top:50%;transform:translateY(-50%);
  z-index:2;text-align:right;
  font-size:25px;font-weight:800;line-height:1.22;color:#152c5b;letter-spacing:-.3px;
  display:flex;flex-direction:column;align-items:flex-end;
}
.banner-line::after{
  content:'';width:56px;height:4px;border-radius:4px;
  background:var(--blue-dark);margin-top:10px;
}

/* ===================== STAT CARDS ===================== */
/* Same rule as quick-grid: a KPI card's content is top-packed with no
   bottom filler, so if one label in the row wraps to two lines and the grid
   defaults to stretch, every other card in that row would show blank space
   below its own content instead of matching height gracefully. */
.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:start;}
.stats-row.cols-5{grid-template-columns:repeat(5,1fr);}
.stat-card{
  background:var(--card-bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  padding:14px 12px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:11px;row-gap:2px;
  align-items:start;align-content:start;
  border:1px solid transparent;
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
.stat-card:hover{box-shadow:var(--shadow-hover);border-color:#e3eafb;transform:translateY(-1px);}
.stat-icon{
  grid-row:1/4;width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.stat-num{font-size:21px;font-weight:800;color:var(--text);line-height:1.1;}
.stat-label{font-size:11.5px;color:var(--text-soft);font-weight:500;white-space:nowrap;}
.stat-delta{font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;margin-top:5px;white-space:nowrap;}
.stat-delta span{color:var(--text-faint);font-weight:500;margin-left:1px;}
.stat-delta.up{color:#16a34a;}
.stat-delta.down{color:#ef4444;}
.stat-delta.flat{color:var(--text-faint);}

/* shared tint palette for icon chips */
.pink{background:#fde7ef;color:#ec4899;}
.blue{background:#e6f0ff;color:#3b82f6;}
.purple{background:#f1e9fe;color:#8b5cf6;}
.green{background:#e3f9ec;color:#16a34a;}
.orange{background:#fdece0;color:#f0653a;}
.teal{background:#e1f8f2;color:#14b8a6;}
.cyan{background:#e0f7fb;color:#06b6d4;}
.navy{background:#e5e9fb;color:#1e3a8a;}
.amber{background:#fdf0d9;color:#e8a20c;}
.red{background:#fdeceb;color:#e0453a;}

/* ===================== PANELS / GRIDS ===================== */
.grid-3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-bottom{display:grid;grid-template-columns:1fr 1.28fr;gap:16px;}
.grid-wide-left{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
.panel{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px 20px 20px;
  display:flex;flex-direction:column;
  border:1px solid transparent;
  min-width:0;
  transition:box-shadow var(--ease),border-color var(--ease);
}
.panel:hover{box-shadow:var(--shadow-hover);border-color:#e9eef9;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;}
.panel-head h3{font-size:14.5px;font-weight:700;color:var(--text);}
.panel-head .sub{font-size:11.5px;color:var(--text-faint);font-weight:500;margin-top:2px;}
.dropdown-btn{
  font-size:11.5px;font-weight:600;color:var(--text-soft);
  background:var(--tint);border:1px solid #e9ecf5;
  padding:6px 10px;border-radius:7px;
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.dropdown-btn:hover{background:var(--tint-strong);border-color:#d9e2f5;color:var(--text);}
.link-btn{
  font-size:12px;font-weight:700;color:var(--blue-dark);
  border-radius:7px;padding:4px 8px;flex:0 0 auto;
  transition:background var(--ease);
}
.link-btn:hover{background:#eaf1ff;}

/* legend + chart frames */
.legend{display:flex;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-soft);font-weight:500;}
.legend-item i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.chart-wrap{position:relative;height:210px;}
.chart-wrap.tall{height:248px;}
.chart-wrap.short{height:168px;}

/* ===================== PROGRESS ROWS (reference "module usage") ========== */
.usage-list{display:flex;flex-direction:column;gap:17px;padding-top:4px;flex:1;justify-content:space-evenly;}
.usage-row{display:flex;align-items:center;gap:10px;}
.usage-icon{
  width:32px;height:32px;flex:0 0 auto;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.usage-name{flex:0 0 116px;font-size:12px;font-weight:600;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.usage-val{flex:0 0 42px;text-align:right;font-size:12px;font-weight:700;color:var(--text-soft);}
.usage-bar{flex:1;height:9px;background:#eef0f6;border-radius:6px;overflow:hidden;min-width:40px;}
.usage-fill{height:100%;border-radius:6px;transition:width var(--ease);}
.usage-fill.blue{background:linear-gradient(90deg,#60a5fa,#3b82f6);}
.usage-fill.purple{background:linear-gradient(90deg,#a78bfa,#8b5cf6);}
.usage-fill.green{background:linear-gradient(90deg,#4ade80,#22c55e);}
.usage-fill.orange{background:linear-gradient(90deg,#fbbf6d,#f0653a);}
.usage-fill.cyan{background:linear-gradient(90deg,#67e8f9,#06b6d4);}
.usage-fill.pink{background:linear-gradient(90deg,#f9a8d4,#ec4899);}
.usage-fill.teal{background:linear-gradient(90deg,#5eead4,#14b8a6);}
.usage-fill.amber{background:linear-gradient(90deg,#fcd34d,#e8a20c);}

/* ===================== DONUT + LEGEND ===================== */
.donut-body{display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap;}
.donut-wrap{position:relative;width:150px;height:150px;flex:0 0 auto;}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut-num{font-size:24px;font-weight:800;color:var(--text);}
.donut-label{font-size:10.5px;color:var(--text-soft);font-weight:500;text-align:center;line-height:1.3;}
.donut-legend{display:flex;flex-direction:column;gap:12px;flex:1;min-width:120px;}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-soft);font-weight:500;}
.donut-legend li i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.donut-legend li span{flex:1;}
.donut-legend li b{color:var(--text);font-weight:700;font-size:13px;}
.panel-foot{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--text-soft);font-weight:600;gap:10px;
}
.panel-foot b{font-size:16px;color:var(--text);font-weight:800;}

/* ===================== LISTS (activity / tasks / queue) ================== */
.tile-list{display:flex;flex-direction:column;gap:9px;}
.tile-list li{
  display:flex;align-items:center;gap:12px;
  background:#fbfcfe;border:1px solid #eef0f6;border-radius:11px;
  padding:8px 12px 8px 8px;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.tile-list li:hover{background:#f4f8ff;border-color:#d9e6fb;box-shadow:var(--shadow);}
.tile-icon{
  width:36px;height:36px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.tile-body{flex:1;min-width:0;}
.tile-title{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tile-meta{font-size:11px;color:var(--text-faint);margin-top:2px;}
.tile-right{font-size:11px;color:var(--text-faint);font-weight:600;white-space:nowrap;text-align:right;flex:0 0 auto;}
.tile-right b{display:block;font-size:12.5px;color:var(--text);font-weight:800;}

/* date chip (reference "task-date") */
.date-chip{
  width:40px;height:40px;flex:0 0 auto;border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  background:#fdeceb;color:#e0453a;
}
.date-chip .tm{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.date-chip .td{font-size:15px;font-weight:800;}

/* ===================== TABLE ===================== */
.table-wrap{overflow-x:auto;margin:0 -4px;}
table.kx{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:520px;}
table.kx th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text-faint);
  padding:0 10px 9px;border-bottom:1px solid var(--border);white-space:nowrap;
}
table.kx td{padding:11px 10px;border-bottom:1px solid #f4f6fb;color:var(--text-soft);vertical-align:middle;}
table.kx tbody tr{transition:background var(--ease);}
table.kx tbody tr:hover{background:#f7faff;}
table.kx tbody tr:last-child td{border-bottom:none;}
table.kx td.strong{color:var(--text);font-weight:700;}
table.kx td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);}
.cell-stack{display:flex;flex-direction:column;line-height:1.3;}
.cell-stack b{font-size:12.5px;font-weight:700;color:var(--text);}
.cell-stack span{font-size:11px;color:var(--text-faint);}

/* ===================== BADGES / PILLS ===================== */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 9px;
  white-space:nowrap;border:1px solid transparent;
}
.pill i{font-size:9px;}
.pill.live{background:#fdeceb;color:#d93a2f;border-color:#f8d5d2;}
.pill.live i{animation:kxpulse 1.6s ease-in-out infinite;}
.pill.ok{background:#e3f9ec;color:#16803c;border-color:#c9f0d9;}
.pill.info{background:#e6f0ff;color:#1d4ed8;border-color:#d4e4fd;}
.pill.warn{background:#fdf0d9;color:#a9700a;border-color:#f7e2b4;}
.pill.muted{background:#f1f3f9;color:#6b7280;border-color:#e6e9f2;}
.pill.violet{background:#f1e9fe;color:#6d28d9;border-color:#e4d8fc;}
@keyframes kxpulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ===================== QUICK ACCESS ===================== */
/* `align-items:start`, not `stretch`: when this panel is the shorter one in
   a two-panel row and gets stretched to match its sibling, `stretch` would
   force every tile to fill that extra height - the icon and label stay
   pinned to the top and the rest of the tile becomes a blank rectangle. With
   `start`, the tiles keep their natural size and any leftover height is
   empty panel below the row, never inside a tile. */
.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1;align-items:start;align-content:start;}
.quick-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px;border-radius:12px;background:#f8f9fc;
  text-align:center;font-size:11px;font-weight:600;color:var(--text);
  border:1px solid transparent;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.quick-item:hover{background:#eef4ff;border-color:#d9e6fb;box-shadow:var(--shadow);transform:translateY(-1px);}
.quick-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.quick-icon.blue{background:#dbeafe;color:#3b82f6;}
.quick-icon.purple{background:#ede4fe;color:#8b5cf6;}
.quick-icon.pink{background:#fde0eb;color:#ec4899;}
.quick-icon.indigo{background:#e3e5fd;color:#6366f1;}
.quick-icon.orange{background:#fde6d6;color:#f0653a;}
.quick-icon.green{background:#dcf7e6;color:#16a34a;}
.quick-icon.teal{background:#d5f5ee;color:#14b8a6;}
.quick-icon.amber{background:#fdf0d9;color:#e8a20c;}

/* ===================== QUESTION-WISE STRIP (student) ===================== */
.qstrip{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px;}
.qbox{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;border:1px solid transparent;
  transition:transform var(--ease),box-shadow var(--ease);
}
.qbox:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.qbox.correct{background:#e3f9ec;color:#16803c;border-color:#c9f0d9;}
.qbox.partial{background:#fdf0d9;color:#a9700a;border-color:#f7e2b4;}
.qbox.wrong{background:#fdeceb;color:#d93a2f;border-color:#f8d5d2;}
.qbox.skipped{background:#f1f3f9;color:#8b93a6;border-color:#e6e9f2;}

/* ===================== EMPTY STATE ===================== */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:26px 16px;text-align:center;color:var(--text-faint);
  background:#fbfcfe;border:1px dashed #e2e8f4;border-radius:12px;
}
.empty i{font-size:20px;color:#c3cbdb;}
.empty p{font-size:12px;font-weight:500;}

/* ===================== PROTOTYPE ROLE SWITCHER =========================== */
/* Review affordance only. Not part of the product UI. */
.proto{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid #dbe4f7;border-radius:30px;
  box-shadow:0 6px 22px rgba(30,41,80,.16);padding:6px 8px 6px 14px;
}
.proto-label{font-size:10.5px;font-weight:700;color:var(--text-faint);letter-spacing:.4px;text-transform:uppercase;margin-right:2px;}
.proto button{
  font-size:11.5px;font-weight:700;color:var(--text-soft);
  border-radius:20px;padding:6px 11px;
  transition:background var(--ease),color var(--ease);
}
.proto button:hover{background:var(--tint);color:var(--text);}
.proto button.on{background:var(--blue-dark);color:#fff;}

/* sidebar scrim for mobile drawer */
.scrim{
  position:fixed;inset:0;background:rgba(19,30,60,.42);
  z-index:35;opacity:0;pointer-events:none;transition:opacity var(--ease);
}
.scrim.show{opacity:1;pointer-events:auto;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1400px){
  .stats-row,.stats-row.cols-5{grid-template-columns:repeat(3,1fr);}
  .grid-3,.grid-bottom,.grid-2,.grid-wide-left{grid-template-columns:1fr;}
  .quick-grid{grid-template-columns:repeat(3,1fr) !important;}
  .banner-line{display:none;}
  .banner-content{max-width:58%;}
  .banner-art{left:auto;right:2%;width:38%;opacity:.95;}
}
@media (max-width:900px){
  .sidebar{position:fixed;left:calc(var(--sidebar-w) * -1 - 12px);transition:left var(--ease);box-shadow:0 10px 40px rgba(30,41,80,.18);}
  .sidebar.open{left:0;}
  .menu-btn{display:flex;}
  /* On a phone the PAGE scrolls, not an inner pane: an inner scroll container
     inside a flex column truncates the content and fights the address bar. */
  .main{height:auto;min-height:100vh;}
  .content{padding:18px 16px 36px;overflow:visible;flex:none;}
  .topbar{position:sticky;top:0;z-index:30;}
  .topbar{padding:0 16px;gap:12px;}
  .kbd{display:none;}
  .stats-row,.stats-row.cols-5{grid-template-columns:repeat(2,1fr);}
  .quick-grid{grid-template-columns:repeat(3,1fr) !important;}
  .banner{padding:22px 20px;min-height:0;}
  .banner-art{display:none;}
  .banner-content{max-width:100%;}
  .hero-greet{font-size:15px;}
  .hero-name{font-size:29px;letter-spacing:-.5px;}
  .hero-cta .btn{flex:1;justify-content:center;}
  .banner-date{position:static;margin-bottom:14px;align-self:flex-start;}
}
@media (max-width:640px){
  /* A nowrap KPI label sets a minimum the phone cannot honour, and the grid
     obliges by overflowing the page. Tracks clamp to the viewport and the
     labels wrap instead. */
  .stats-row,.stats-row.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-card{min-width:0;}
  .stat-label,.stat-delta{white-space:normal;}
  .profile-name,.profile-role,.profile-caret{display:none;}
  .profile{padding-left:0;border-left:none;}
  /* The row must still fit the avatar: let the search shrink and drop the
     secondary app-switcher rather than pushing the profile off the edge. */
  .search{min-width:0;}
  .topbar{gap:8px;padding:0 12px;}
  .topbar-right{gap:8px;}
  .icon-btn.secondary{display:none;}
  .quick-grid{grid-template-columns:repeat(2,1fr) !important;}
  .panel{padding:16px 14px 18px;}
  .content{gap:14px;}
  .proto{left:12px;right:12px;bottom:12px;justify-content:center;padding:6px;}
  .proto-label{display:none;}
  .donut-body{justify-content:center;}
}