@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* --- DESIGN TOKENS --- */
:root {
  --bg-base: #F5F3FF;
  --bg-base-2: #E2E8F0;
  --bg: #F8FAFC;
  --card-bg: #FFFFFF;
  --card-border: rgba(15, 23, 42, 0.08);
  --border: rgba(15, 23, 42, 0.12);

  --text-primary: #0F172A;
  --text-muted: #64748B;
  --muted: #64748B;
  --navy: #1E293B;

  --violet: #7C6CF0;
  --violet-2: #9F8BFF;
  --teal: #06D6A0;
  --teal-glow: rgba(6, 214, 160, 0.28);
  --accent-glow: rgba(124, 108, 240, 0.30);
  --danger: #EF4444;
  --success: #10B981;

  --shadow: 0 20px 45px -18px rgba(31, 22, 90, 0.22);
  --glass-blur: blur(18px);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Motion tokens — centralized so the whole app eases the same way */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.28s;
  --dur-slow: 0.45s;
}

[data-theme="dark"] {
  --bg-base: #0A0B14;
  --bg-base-2: #15182B;
  --bg: #111424;
  --card-bg: #181B2E;
  --card-border: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);

  --text-primary: #FFFFFF;
  --text-muted: #94A3B8;
  --muted: #94A3B8;
  --navy: #E2E8F0;

  --violet: #7C6CF0;
  --violet-2: #9F8BFF;
  --teal: #06D6A0;
  --teal-glow: rgba(6, 214, 160, 0.24);
  --accent-glow: rgba(124, 108, 240, 0.32);
  --danger: #EF4444;
  --success: #10B981;

  --shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.65);
}

/* --- AURORA BACKGROUND MESH (light theme only, very subtle) --- */
body {
  position: relative;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--dur-med) ease, color var(--dur-med) ease;
}

/* GPU-only pseudo-element: two large radial gradients that drift slowly */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, var(--teal-glow) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 75%, var(--accent-glow) 0%, transparent 70%);
  animation: auroraDrift 18s ease-in-out infinite alternate;
  opacity: 0.6;
}

[data-theme="dark"] body::before {
  opacity: 0.35;
}

@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -25px) scale(1.08); }
}

/* --- RESET & BASE --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
}

html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* --- CUSTOM SCROLLBAR STYLING --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base-2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--teal), var(--violet));
  border-radius: 10px;
  border: 2px solid var(--bg-base-2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--violet), var(--teal));
}

::-webkit-scrollbar-thumb:active {
  background: var(--teal);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--bg-base-2);
}

/* --- FOCUS-VISIBLE (keyboard navigation) --- */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes spinOrbit {
  to { transform: rotate(360deg); }
}

@keyframes successPop {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes checkmarkDraw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* --- REDUCED MOTION (accessibility) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- STAGGERED CARD ENTRY (course grid reveals one-by-one) --- */
.course-grid .card {
  animation: fadeIn var(--dur-slow) var(--ease-out-expo) both;
}
.course-grid .card:nth-child(1) { animation-delay: 0ms; }
.course-grid .card:nth-child(2) { animation-delay: 60ms; }
.course-grid .card:nth-child(3) { animation-delay: 120ms; }
.course-grid .card:nth-child(4) { animation-delay: 180ms; }
.course-grid .card:nth-child(5) { animation-delay: 240ms; }
.course-grid .card:nth-child(n+6) { animation-delay: 300ms; }

/* Cards outside the grid keep their original animation */
.card:not(.course-grid .card), section {
  animation: fadeIn var(--dur-slow) var(--ease-out-expo) forwards;
}

/* --- NAVBAR --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 6%;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 24px rgba(15, 12, 60, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.brand-wordmark {
  height: 44px;
  width: auto;
  display: block;
  /* No mix-blend-mode here any more. screen/multiply existed because the old
     wordmark was a PNG keyed from BLACK, so the black had to be blended away
     to hide a 1px fringe. The Adsum assets are true alpha with a bright
     cyan-to-violet gradient, and screening that against a dark navbar blows the
     gradient out to white. Normal alpha compositing is correct for them. */
}

.brand-text {
  background: linear-gradient(135deg, var(--teal), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- SPLASH SCREEN --- */
#splashScreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.6s ease, transform 0.6s ease;
  overflow: hidden;
  cursor: pointer;
}

#splashScreen.splash-fade-out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* Splash: calm clean backdrop. No lighting tricks — the artwork
   (V mark orbit ring + breathing lockup) carries the premium feel. */
.splash-glow { display: none; }

/* No vignette overlay — keep the splash backdrop flat and calm. */
#splashScreen::before { content: none; }

[data-theme="light"] #splashScreen::before { content: none; }

/* Brand lockup: mark + wordmark rise together, then settle into a
   barely-there premium "breathing" float (also runs under the hint). */
.splash-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation:
    splashBrandIn 1.5s var(--ease-out-expo) both,
    splashBreathe 5.5s 1.9s ease-in-out infinite;
  will-change: transform;
}

/* The full lockup (monogram + "Adsum" + "I am present") is ~2.7:1, so it is
   sized by WIDTH and capped to the viewport, unlike the old near-square mark
   which was a fixed 120px box. */
.splash-logo {
  width: min(78vw, 380px);
  height: auto;
  /* Clean grounded shadow on a flat backdrop — no top-light shine. */
  filter: drop-shadow(0 18px 28px rgba(2, 4, 12, 0.35));
  animation: splashMarkSheen 1.1s var(--ease-out-expo) both;
}

/* Thin premium divider that draws itself under the wordmark. */
.splash-rule {
  width: min(52vw, 220px);
  height: 1px;
  background: var(--card-border);
  overflow: hidden;
}

.splash-rule span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--teal), var(--violet-2), transparent);
  transform: scaleX(0);
  animation: splashRuleDraw 1s 0.7s var(--ease-out-expo) forwards;
}

.splash-text {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.splash-hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  animation: splashHintPulse 2s ease-in-out infinite;
  animation-delay: 1.9s;
  opacity: 0;
}

@keyframes splashGlowIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes splashBrandIn {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle idle float: ±4px / ±0.6deg — noticeable, never seasick. */
@keyframes splashBreathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(0.6deg); }
}

@keyframes splashMarkSheen {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splashRuleDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes splashHintPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-glow,
  .splash-brand,
  .splash-logo,
  .splash-rule span {
    animation: none;
  }
  .splash-brand { opacity: 1; }
  .splash-glow { opacity: 1; }
  .splash-rule span { transform: scaleX(1); }
}

.theme-btn {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease;
  color: var(--text-primary);
}

.theme-btn:hover {
  transform: scale(1.08) rotate(-8deg);
  border-color: var(--teal);
  box-shadow: 0 6px 18px var(--teal-glow);
}

/* --- CONTAINER & GLASS CARDS --- */
.container {
  width: min(92%, 850px);
  margin: 40px auto;
  position: relative;
  z-index: 1;
}

.card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 40px 35px;
  border-radius: 22px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--card-border);
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--teal), var(--violet), transparent 35%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: spinOrbit 6s linear infinite;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -18px var(--accent-glow);
}

.card:hover::before {
  opacity: 1;
}

.card h2 {
  font-family: var(--font-display);
  margin-bottom: 8px;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.card p {
  color: var(--text-muted);
  margin-bottom: 25px;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* --- FORM FIELDS & INPUTS --- */
.field {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

input, select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: rgba(127, 127, 127, 0.06);
  color: var(--text-primary);
  outline: none;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316C4D9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-hotspot: no-hotspot;
  background-position: right 14px center;
  background-size: 16px;
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232DE0C9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

select option, select optgroup {
  background-color: var(--bg-base-2);
  color: var(--text-primary);
  padding: 10px;
  font-weight: 500;
  font-size: 0.9rem;
}

input::placeholder { color: var(--text-muted); opacity: 0.7; }

input:focus, select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-glow);
  background: var(--card-bg);
  outline: none;
  transform: translateY(-1px);
}

input:focus::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

/* --- CUSTOM ATTENDANCE DROPDOWN & BADGES --- */
.custom-dropdown {
  border: 1.5px solid var(--border) !important;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

.custom-dropdown:hover {
  border-color: var(--teal) !important;
  background: var(--bg) !important;
  transform: translateY(-1px);
}

.custom-dropdown:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px var(--teal-glow);
}

.hall-info-chip {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  border: 1px solid var(--border);
  background: rgba(127, 127, 127, 0.06);
  color: var(--text-muted);
}

.hall-info-chip.badge-hall {
  background: rgba(34, 197, 140, 0.12);
  border-color: rgba(34, 197, 140, 0.35);
  color: var(--success);
}

.hall-info-chip.badge-emergency {
  background: rgba(253, 126, 20, 0.12);
  border-color: rgba(253, 126, 20, 0.35);
  color: #fd7e14;
}

.hall-info-chip.badge-live {
  background: rgba(22, 196, 217, 0.12);
  border-color: rgba(22, 196, 217, 0.35);
  color: var(--teal);
}

/* --- LUCIDE VECTOR ICONS STYLING --- */
.lucide {
  width: 18px;
  height: 18px;
  stroke-width: 2.2px;
  vertical-align: -3px;
  display: inline-block;
  flex-shrink: 0;
}

.btn .lucide {
  vertical-align: -3px;
  margin-right: 6px;
}

.theme-btn .lucide {
  margin: 0;
  vertical-align: middle;
}

.section-title .lucide,
.card h2 .lucide,
.card h3 .lucide,
.dashboard-header h2 .lucide {
  color: var(--teal);
  vertical-align: -3px;
  margin-right: 8px;
}

/* --- AUTOCOMPLETE DROPDOWN --- */
.autocomplete-wrapper {
  position: relative;
}

.suggestions-box {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 11px 15px;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item:focus {
  background: var(--teal-glow);
}

/* --- BUTTONS --- */
.btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 10px 24px var(--accent-glow);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, filter 0.25s ease;
  min-height: 48px; /* Touch-friendly minimum height */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--accent-glow);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 600px) {
  .btn {
    padding: 16px 20px;
    font-size: 1rem;
    border-radius: 16px;
  }

  .btn-outline {
    padding: 14px 18px;
    font-size: 0.9rem;
  }
}

.btn-secondary {
  background: var(--text-primary);
  color: var(--bg-base);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  margin-bottom: 10px;
}

.btn-secondary:hover {
  background: var(--text-primary);
  filter: brightness(1.15);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  box-shadow: none;
}

.btn-outline:hover {
  background: var(--teal-glow);
  border-color: var(--teal);
  transform: translateY(-1px);
}

.hidden { display: none !important; }

/* --- DASHBOARD & GRIDS --- */
.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 40px;
}

.section-title {
  font-family: var(--font-display);
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.course-grid .card {
  max-width: 100%;
  margin: 0;
  padding: 30px;
}

/* --- LIVE SESSION BANNER PULSE --- */
#sessionBanner {
  animation: pulseGlow 2.2s infinite;
  backdrop-filter: var(--glass-blur);
}

/* --- MODALS --- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 15, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  padding: 20px;
  z-index: 100;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  width: 100%;
  max-width: 420px;
  padding: 35px;
  border-radius: 22px;
  border: 1.5px solid var(--card-border);
  box-shadow: var(--shadow);
  transform: scale(0.94) translateY(8px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.show .modal-card {
  transform: scale(1) translateY(0);
}

.modal-card h3 {
  font-family: var(--font-display);
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

/* --- MOBILE HAMBURGER MENU --- */
.hamburger-btn {
  display: none;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 60;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hamburger-btn:hover {
  background: var(--teal-glow);
  border-color: var(--teal);
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  gap: 15px;
  align-items: center;
}

@media (max-width: 768px) {
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    flex-direction: column;
    padding: 24px 20px;
    gap: 12px;
    border-bottom: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-links.show-menu {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .nav-links button {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
  }

  .nav-links button:hover {
    background: var(--teal-glow);
    border-color: var(--teal);
    transform: translateY(-2px);
  }
}

/* ============================================================
   TOAST NOTIFICATION SYSTEM
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}

@media (max-width: 600px) {
  #toast-container {
    top: 80px;
    bottom: auto;
    right: 16px;
    left: 16px;
    max-width: 100%;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--card-border);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.45;
  pointer-events: all;
  animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.toast.toast-exit {
  animation: toastOut 0.28s ease forwards;
}

.toast-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
}

.toast-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 2px;
  font-family: var(--font-display);
}

.toast-message {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid #fd7e14; }
.toast-info    { border-left: 3px solid var(--teal); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.94); }
}

/* --- BUTTON MICRO-INTERACTIONS --- */
.btn, .drawer-item, .hamburger-btn {
  transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:active, .drawer-item:active {
  transform: scale(0.96);
}

/* --- SKELETON SHIMMER (loading states) --- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-base-2) 25%, var(--card-bg) 50%, var(--bg-base-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* --- SUCCESS CELEBRATION (check-in) --- */
.success-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 20, 0.85);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.25s ease forwards;
}

.success-checkmark {
  width: 80px;
  height: 80px;
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.success-checkmark path {
  stroke: var(--success);
  stroke-width: 3;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkmarkDraw 0.4s 0.2s ease forwards;
}

.success-text {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 16px;
  opacity: 0;
  animation: fadeIn 0.3s 0.4s ease forwards;
}

/* ============================================================
   CUSTOM CONFIRM DIALOG
   ============================================================ */
#confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 15, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

#confirm-overlay.show {
  opacity: 1;
  visibility: visible;
}

#confirm-box {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 32px 28px;
  max-width: 400px;
  width: 100%;
  transform: scale(0.94) translateY(8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#confirm-overlay.show #confirm-box {
  transform: scale(1) translateY(0);
}

#confirm-icon {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 12px;
}

#confirm-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-align: center;
}

#confirm-message {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 24px;
}

/* Key/value table shown when showConfirm receives `details`
   (e.g. the signup double-check review). */
#confirm-details {
  margin: -12px 0 16px;
  padding: 4px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  text-align: left;
}

#confirm-details.hidden {
  display: none !important;
}

.confirm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.82rem;
  border-bottom: 1px dashed var(--border);
}

.confirm-detail-row:last-child {
  border-bottom: none;
}

.confirm-detail-label {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.confirm-detail-value {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

#confirm-actions {
  display: flex;
  gap: 12px;
}

#confirm-cancel {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#confirm-cancel:hover {
  background: var(--teal-glow);
  border-color: var(--teal);
}

#confirm-ok {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--danger), #c0392b);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

#confirm-ok:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#confirm-ok.ok-safe {
  background: linear-gradient(135deg, var(--violet), var(--teal));
}

/* ============================================================
   GLOBAL BUSY OVERLAY
   ------------------------------------------------------------
   WHY A SCRIM AND NOT A BLUR
   `backdrop-filter: blur()` over a whole phone viewport is one of
   the most expensive things a browser can be asked to do, and this
   app runs on the low-end Android hardware its users actually own.
   A full-screen blur on EVERY action risks dropped frames and a
   drained battery mid-lecture, so the scrim is deliberately opaque
   with NO backdrop-filter: visually almost identical against the
   dark glass design, and effectively free.
   ============================================================ */
#busyOverlay {
  position: fixed;
  inset: 0;
  z-index: 9750;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 15, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

#busyOverlay.show {
  opacity: 1;
  visibility: visible;
}

#busyOverlay.hidden {
  display: none;
}

.busy-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#busyOverlay.show .busy-card {
  transform: scale(1);
}

/* A CSS spinner, not a Lucide icon: it animates without JS, cannot
   fail to render because an icon set has not loaded yet, and keeps
   animating even if the main thread is briefly busy. */
.busy-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 3px solid var(--border);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: busySpin 0.8s linear infinite;
}

@keyframes busySpin {
  to {
    transform: rotate(360deg);
  }
}

.busy-label {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.4;
}

.busy-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.5;
}

.busy-hint.hidden,
.busy-cancel.hidden {
  display: none;
}

.busy-cancel {
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.busy-cancel:hover {
  color: var(--text-primary);
  border-color: var(--violet);
}

/* Respect the OS setting. The spinner is the only thing conveying
   "still working", so it keeps its rotation — only the decorative
   card transition is dropped. */
@media (prefers-reduced-motion: reduce) {
  .busy-card {
    transition: none;
  }
}

/* --- SECURITY OVERLAY STYLING --- */
#securityOverlay {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#securityOverlay.hidden {
  display: none !important;
}

#securityOverlay.show {
  display: flex !important;
}

/* ============================================================
   RESPONSIVE LAYOUT HELPERS (rep control center + panels)
   ============================================================ */
.hall-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.hall-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hall-actions button {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.mode-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.headcount-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.manual-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.manual-request-actions [data-approve-uid],
.manual-request-actions [data-reject-uid] {
  flex: 1 1 auto;
}

/* ============================================================
   APP GUIDE MODAL (self-explanatory handbook)
   ============================================================ */
.guide-section {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  margin-bottom: 12px;
}

.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(108, 93, 211, 0.12);
  color: var(--violet);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.guide-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guide-check {
  font-weight: 700;
  margin-right: 4px;
}

.network-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  white-space: nowrap;
}

.manage-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.manage-tool-btn {
  font-size: 0.78rem;
  padding: 10px 8px;
}

.manage-tool-btn.active {
  border: 2px solid var(--teal) !important;
  background: rgba(45, 224, 201, 0.15) !important;
  color: var(--teal) !important;
  box-shadow: none !important;
}

/* Mobile guide tweak: comfortable spacing for the handbook */
@media (max-width: 640px) {
  .guide-section {
    padding: 12px 10px;
  }

  .guide-step {
    gap: 8px;
  }

  .guide-step-num {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }
}

/* ============================================================
   MOBILE / NARROW-SCREEN POLISH
   ============================================================ */
@media (max-width: 640px) {
  /* App shell breathing room */
  .container {
    width: min(96%, 850px);
    margin: 20px auto;
    padding: 0 10px;
  }

  .navbar {
    padding: 12px 4%;
  }

  .brand {
    font-size: 1.25rem;
  }

  .brand-wordmark {
    height: 36px;
  }

  .splash-logo {
    width: min(72vw, 300px);
  }

  .card {
    padding: 26px 20px;
  }

  .dashboard-header h2 {
    font-size: 1.6rem;
  }

  .section-title {
    font-size: 1.1rem;
  }

  .course-grid {
    gap: 16px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }

  /* Course Rep Control Center */
  #repControls {
    padding: 16px 14px !important;
  }

  #repControls h3 {
    font-size: 1.05rem;
  }

  #repControls > div,
  #repControls .hall-info-chip {
    margin-bottom: 14px;
  }

  .hall-actions-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hall-actions {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .hall-actions button {
    flex: 1 1 100%;
    min-height: 42px;
    font-size: 0.78rem;
  }

  /* Attendance mode cards: single column, room to breathe */
  #modeCardsGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #modeCardsGrid button[data-mode] {
    padding: 12px 12px !important;
    font-size: 0.78rem !important;
  }

  #modeCardsGrid button[data-mode] div {
    margin-bottom: 4px !important;
  }

  /* Headcount: input and button stack full-width */
  .headcount-row {
    flex-direction: column;
    align-items: stretch;
  }

  .headcount-row input {
    flex: 1 1 100%;
  }

  .headcount-row .btn {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
  }

  /* Manual verification requests: full-width stacked actions */
  .manual-request-actions {
    flex-direction: column;
  }

  .manual-request-actions [data-approve-uid],
  .manual-request-actions [data-reject-uid] {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }

  /* Lower sections: slightly tighter padding */
  #assistantManagementSection,
  #exemptionManagementSection,
  #repArchiveSection,
  #studentAnalyticsSection {
    padding: 16px 14px !important;
  }

  /* Modals & confirm dialogs */
  .modal-card {
    padding: 24px 20px;
  }

  .modal-actions {
    flex-direction: column;
    gap: 10px;
  }

  .modal-actions .btn {
    min-height: 46px;
  }

  #confirm-box {
    padding: 24px 20px;
  }

  /* Session banner + PIN display */
  #activePinDisplay {
    padding: 12px 12px;
  }

  #pinCodeText {
    font-size: 1.7rem;
    letter-spacing: 6px;
  }

  /* QR projector overlay: fit narrow screens, never overflow the viewport */
  #qrModeOverlay {
    overflow-y: auto;
  }
  #qrCourseTitle {
    font-size: 1.1rem;
  }
  #qrCanvas {
    max-width: min(86vw, 540px);
    max-height: min(70vh, 540px);
    width: auto;
    height: auto;
  }
  #qrPinText {
    font-size: 1.2rem;
    letter-spacing: 6px;
  }

  #closeQrBtn {
    width: auto;
    padding: 10px 20px;
    font-size: 0.85rem;
  }
}
/* ============================================================
   REP MISSION-CONTROL DRAWER (slide-out panel + draggable tab)
   Staff/assistant-only chrome. One portal view at a time.
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9400;
  background: rgba(11, 13, 23, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.portal-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(84vw, 340px);
  background: var(--bg-base);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 30px rgba(11, 13, 23, 0.25);
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(0.25, 0.7, 0.3, 1);
  z-index: 9450;
  display: flex;
  flex-direction: column;
}
.portal-drawer.show {
  transform: translateX(0);
}

.drawer-header {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.drawer-title {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.drawer-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 2px 8px;
  border-radius: 8px;
}
.drawer-close:hover {
  color: var(--text-primary);
  background: var(--bg-base-2);
}

.drawer-nav {
  padding: 8px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}
.drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.drawer-item:hover {
  border-color: var(--violet);
}
.drawer-item.active {
  border-color: var(--violet);
  background: var(--accent-glow);
  color: var(--violet);
}
.drawer-item.hidden {
  display: none;
}
.drawer-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  line-height: 1;
}
.drawer-footnote {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

/* The protruding handle — pinned to the right edge (see the block below). */
.drawer-tab {
  position: fixed;
  z-index: 9500;
  width: 36px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--violet);
  color: #fff;
  border: none;
  /* Not `grab` any more — it is no longer a drag handle, and promising a
     drag the app no longer performs is how a control stops feeling honest. */
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 13, 23, 0.35);
  /* Not `none` any more: that existed to feed pointermove to the drag, and
     left in place it silently swallowed page scrolls started on the tab.
     `manipulation` keeps taps instant while still allowing scroll/pan. */
  touch-action: manipulation;
  animation: drawerTabPulse 2.4s ease-in-out infinite;
}
@keyframes drawerTabPulse {
  0%,
  100% {
    box-shadow:
      0 4px 14px rgba(11, 13, 23, 0.35),
      0 0 0 0 rgba(139, 92, 246, 0.55);
  }
  50% {
    box-shadow:
      0 4px 14px rgba(11, 13, 23, 0.35),
      0 0 0 9px rgba(139, 92, 246, 0);
  }
}
.drawer-tab .tab-glyph {
  font-size: 1.15rem;
  line-height: 1;
}
.drawer-tab .tab-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  line-height: 1;
  opacity: 0.9;
}
.drawer-tab:active {
  cursor: pointer;
}
/* 🛑 THE TAB IS PINNED — right edge, just below the sticky navbar, always
   inside the viewport.

   It used to be draggable across four edges and remembered its position in
   localStorage, which is exactly how it ended up stranded mid-screen on the
   LEFT: a position saved by an older build (or on a different screen size)
   was restored forever, because restore() honoured the v4 fallback key. A
   control whose location you cannot predict is a control you cannot trust,
   so the moving parts are gone and the position is derived from the live
   navbar on every layout change (see pinDrawerTab in app.js).

   --tab-offset is the tab's TOP edge in px (no centering transform). */
.drawer-tab {
  right: 0;
  top: var(--tab-offset, 76px);
  border-radius: 12px 0 0 12px;
}
/* Desktop: same spot, just scaled up for the bigger screen. */
@media (min-width: 768px) {
  .drawer-tab {
    width: 46px;
    height: 104px;
    gap: 5px;
  }
  .drawer-tab .tab-glyph {
    font-size: 1.45rem;
  }
  .drawer-tab .tab-label {
    font-size: 0.68rem;
  }
  .drawer-tab {
    top: var(--tab-offset, 84px);
  }
}
.drawer-tab.hidden {
  display: none;
}
.drawer-tab-badge {
  position: absolute;
  top: -5px;
  /* 🛑 The tab is always right-docked, so the badge sits on the INNER side
     (toward the content) and never under the browser scrollbar that hugs the
     right screen edge. Asserted unconditionally — keying this off
     data-edge="right" meant a stale "left" value silently flipped the badge
     back out over the scrollbar. */
  left: -7px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid #fff;
  animation: badgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: center;
}

/* 📡 HOTSPOT MODE — a session hotspot's ONLY job is displaying the QR.
   Close Class, headcount, the manual queue, the hotspots picker and the
   pre-class setup card are rep work and never render on their screen. */
#repControls.hotspot-view #sessionSetupCard,
#repControls.hotspot-view #closeClassWrapper,
#repControls.hotspot-view #presenceCheckPanel,
#repControls.hotspot-view #manualRequestsPanel,
#repControls.hotspot-view #hotspotsBtn {
  display: none !important;
}
/* Semester report table. Shares the card look so the rep screen reads as one surface. */
.report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.report-table th, .report-table td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--card-border);
}
.report-table th { color: var(--text-muted); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.8px; }
.report-table .num { text-align: right; }
.report-table tbody tr:last-child td { border-bottom: none; }