/* ============================================================
   70-LIME-CHARCOAL.CSS — FULL DASHBOARD THEME OVERRIDE
   Lime-Charcoal design system.
   Loaded last in the stylesheet chain — overrides everything.
   Colors: #2C2C2C page · #1A1A1A surfaces · #383838 cards
           #DFFF00 lime accent · #E0E0E0 text
   Fonts:  Bitter (headings/numbers) · Cabin (body/UI)
   Shadow: hard-offset zero-blur (brutalist style)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@700;800&family=Cabin:wght@400;500;600;700&display=swap');

/* ── 1. CSS VARIABLE OVERRIDES ────────────────────────────── */
:root {
  /* Surfaces */
  --surface:   #383838;
  --surface-2: #2C2C2C;
  --surface-3: #1A1A1A;
  /* Borders */
  --border:    #444;
  --border-2:  rgba(255, 255, 255, 0.07);
  --border-3:  rgba(255, 255, 255, 0.12);
  /* Text */
  --t1: #E0E0E0;
  --t2: #A0A0A0;
  --t3: #555555;
  /* Accent — electric lime is the ONLY chromatic signal */
  --blue:    #DFFF00;
  --blue-2:  rgba(223, 255, 0, 0.6);
  --accent:  #DFFF00;
  --primary: #DFFF00;
  --purple:  #a855f7;
  --on-accent: #000000;
  /* Semantic */
  --success: #4ADE80;
  --warning: #FACC15;
  --error:   #F87171;
  --border-donation: #DFFF00;
  /* Shadows — hard offset, zero blur */
  --sh-md:   5px 5px 0px rgba(0, 0, 0, 0.55);
  --sh-card: 6px 6px 0px rgba(0, 0, 0, 0.55);
  --sh-sm:   2px 2px 0px rgba(0, 0, 0, 0.4);
  /* Fonts */
  --font-heading: 'Bitter', serif;
  --font-body:    'Cabin', sans-serif;
}

/* ── 2. BODY & TYPOGRAPHY ─────────────────────────────────── */
body.website-page {
  background: #2C2C2C !important;
  color: #E0E0E0;
  font-family: 'Cabin', sans-serif !important;
}

body.website-page * {
  font-family: 'Cabin', sans-serif;
  box-sizing: border-box;
}

body.website-page h1,
body.website-page h2,
body.website-page h3,
body.website-page h4 {
  font-family: 'Bitter', serif !important;
}

/* ── 3. PAGE LAYOUT ───────────────────────────────────────── */
body.website-page .container {
  max-width: 100% !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 0 !important;
  background: #2C2C2C !important;
  align-items: stretch !important;
}

/* ── 4. HERO HEADER ───────────────────────────────────────── */
.hero-header,
.hero-header.glass {
  background: #1A1A1A !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-column: 1 / -1 !important;
}

/* Promo banner */
.smpp-promo-banner {
  background: #1A1A1A !important;
  border: none !important;
  border-bottom: 1px solid rgba(223, 255, 0, 0.15) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

.smpp-promo-text { color: #A0A0A0 !important; font-size: 0.8rem !important; }
.smpp-promo-btn {
  background: #DFFF00 !important;
  color: #000 !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5) !important;
}
.smpp-promo-dismiss {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #555 !important;
  border-radius: 2px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Warning banner */
.report-warning-banner {
  background: rgba(245, 158, 11, 0.07) !important;
  border: none !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 9px 0 !important;
  color: #fde68a !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* Main header row */
.hero-header-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 11px 0 !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}

/* Brand mark */
.header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 200px !important;
  flex-shrink: 0 !important;
}

.header-brand-mark {
  width: 38px !important;
  height: 38px !important;
  background: #DFFF00 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6) !important;
  flex-shrink: 0 !important;
}

.header-brand-mark i,
.header-brand-mark .ti {
  font-size: 18px !important;
  color: #000 !important;
}

.header-brand-title {
  font-family: 'Bitter', serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #E0E0E0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
  display: block !important;
}

.header-brand-sub {
  font-size: 0.6rem !important;
  color: #555 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-top: 1px !important;
  display: block !important;
}

/* User identity */
.hero-identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 20px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-shrink: 0 !important;
  align-self: auto !important;
  justify-self: auto !important;
  grid-column: unset !important;
  flex-direction: row !important;
}

.profile-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #DFFF00 !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

.hero-identity-text {
  display: flex !important;
  flex-direction: column !important;
}

.hero-identity-text h1,
#user-name {
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
  margin: 0 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #E0E0E0 !important;
}

.hero-identity-sub {
  font-size: 0.68rem !important;
  color: #555 !important;
  font-weight: 400 !important;
  display: block !important;
}

/* Quick actions (middle) */
.hero-quick-actions,
.hero-quick-actions-row {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* All hero buttons */
.hero-btn,
.hero-btn-action,
.header-action-btn {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  color: #E0E0E0 !important;
  padding: 7px 14px !important;
  border-radius: 0 !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s !important;
  height: auto !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: normal !important;
  transform: none !important;
  width: auto !important;
  white-space: nowrap !important;
}

.hero-btn:hover,
.hero-btn-action:hover,
.header-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
}

.hero-btn i,
.hero-btn-action i {
  color: #A0A0A0 !important;
  font-size: 13px !important;
}

/* Nheinz & Instagram links in header */
.hero-quick-actions-row a.hero-btn-action i {
  font-size: 13px !important;
}

/* Sync button — lime primary */
.hero-btn.hero-btn-primary,
#sync-data-btn {
  background: #DFFF00 !important;
  border: none !important;
  color: #000 !important;
  padding: 10px 22px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6) !important;
  font-size: 0.88rem !important;
}

.hero-btn.hero-btn-primary:hover,
#sync-data-btn:hover {
  background: #efff33 !important;
  color: #000 !important;
  transform: none !important;
}

#sync-data-btn i { color: #000 !important; }
#sync-data-btn.loading i { color: #000 !important; }

/* Manual sync button */
#manual-sync-btn {
  background: transparent !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
  color: #60a5fa !important;
  padding: 8px 12px !important;
  border-radius: 2px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  height: auto !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

#manual-sync-btn i { color: #60a5fa !important; }
#manual-sync-btn:hover { border-color: rgba(96,165,250,0.4) !important; }

/* Theme picker */
#theme-picker-btn {
  background: #383838 !important;
  border: 1px solid #444 !important;
  color: #E0E0E0 !important;
  padding: 10px 11px !important;
  border-radius: 2px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.theme-btn-dots { display: none !important; }

/* Right actions group */
.hero-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  height: auto !important;
}

/* Hide old grid-based sub-components replaced by new structure */
.hero-inline-stats { display: none !important; }
.profile-cluster { display: contents !important; }
.profile-identity { display: none !important; }

/* ── 5. SIDEBAR ───────────────────────────────────────────── */
.sidebar,
.sidebar.glass {
  width: 280px !important;
  min-width: 280px !important;
  background: #1A1A1A !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: static !important;
  top: auto !important;
  overflow: visible !important;
  max-height: none !important;
  align-self: stretch !important;
  padding-right: 16px !important;
}

.stat-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ── 6. SIDEBAR CARDS ─────────────────────────────────────── */
.sidebar-card {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.55) !important;
  transition: none !important;
  transform: none !important;
}

.sidebar-card:hover {
  transform: none !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.55) !important;
  border-color: #444 !important;
}

.sidebar-card-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-bottom: 12px !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #A0A0A0 !important;
  background: none !important;
}

.sidebar-card-label i {
  font-size: 13px !important;
  color: #DFFF00 !important;
}

/* Metrics card stat units */
.stat-unit {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.stat-label {
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #555 !important;
  margin-bottom: 6px !important;
}

.stat-label-small { font-size: 0.6rem !important; color: #555 !important; }

/* Big average */
.stat-value,
.stat-value.text-blue,
#total-percent {
  font-family: 'Bitter', serif !important;
  font-size: 3.2rem !important;
  font-weight: 700 !important;
  color: #DFFF00 !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #DFFF00 !important;
}

/* "Gewogen" chip */
.weighted-indicator,
#weighted-indicator {
  display: inline-block !important;
  background: #000 !important;
  color: #DFFF00 !important;
  font-size: 0.58rem !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
  margin-top: 6px !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Score distribution */
.distribution-box,
.distribution-box-tight {
  margin-bottom: 14px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.dist-chart {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  height: 52px !important;
  margin-bottom: 5px !important;
}

.dist-bar {
  flex: 1 !important;
  border-radius: 2px 2px 0 0 !important;
  transition: none !important;
}

.dist-fail { background: #F87171 !important; }
.dist-ok   { background: #FACC15 !important; }
.dist-good { background: #4ADE80 !important; }
.dist-pro  { background: #DFFF00 !important; }

.distribution-scale {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.58rem !important;
  color: #555 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* AI Prognose box */
.ai-insight-box,
.ai-insight-box.glass {
  background: rgba(223, 255, 0, 0.04) !important;
  border: 1px solid rgba(223, 255, 0, 0.12) !important;
  border-radius: 4px !important;
  padding: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}

.ai-insight-box-spaced { margin-bottom: 12px !important; }

.stat-label-ai {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #DFFF00 !important;
  margin-bottom: 5px !important;
}

.stat-label-ai i { color: #DFFF00 !important; font-size: 11px !important; }

.ai-prediction-text {
  font-size: 0.74rem !important;
  color: #A0A0A0 !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
}

.ai-final-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.ai-final-row span { font-size: 0.7rem !important; color: #555 !important; }

#final-pred {
  font-family: 'Bitter', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  background: none !important;
  -webkit-text-fill-color: #E0E0E0 !important;
}

/* Total points */
.total-points-value,
#total-points {
  font-family: 'Bitter', serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  letter-spacing: -0.3px !important;
  background: none !important;
  -webkit-text-fill-color: #E0E0E0 !important;
}

/* Insights */
.insight-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.insight-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

.insight-card i { font-size: 16px !important; flex-shrink: 0 !important; }

.insight-name {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #555 !important;
}

.insight-value {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  margin-top: 2px !important;
}

/* Vakuren nav */
.subject-hours-empty {
  font-size: 0.76rem !important;
  color: #555 !important;
  font-style: italic !important;
}

/* Guide toggles */
.creator-widget,
.creator-widget.glass {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.creator-widget:last-child { margin-bottom: 0 !important; }

#guide-toggle-startergids ~ .sidebar-guide-body,
#guide-toggle-startergids {
  border-color: rgba(223, 255, 0, 0.1) !important;
}

.sidebar-guide-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 11px !important;
  cursor: pointer !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  gap: 6px !important;
  font-family: 'Cabin', sans-serif !important;
}

.sidebar-guide-toggle span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sidebar-guide-toggle .toggle-icon { color: #555 !important; font-size: 11px !important; }
.sidebar-guide-toggle i:not(.toggle-icon) { color: #DFFF00 !important; font-size: 12px !important; }

.sidebar-guide-body { padding: 0 11px 11px !important; }
.creator-name { display: none !important; }
.creator-text {
  font-size: 0.7rem !important;
  color: #A0A0A0 !important;
  line-height: 1.6 !important;
}

/* Sidebar ad card */
.sidebar-card-ad {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.55) !important;
  padding: 16px !important;
  margin-top: 0 !important;
}

/* ── 7. MAIN CONTENT ──────────────────────────────────────── */
.main-content,
.subject-board,
.main-content.glass,
.subject-board.glass {
  background: #2C2C2C !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ── 8. TAB BAR ───────────────────────────────────────────── */
.view-tab-bar,
body.website-page .view-tab-bar {
  display: flex !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  box-shadow: none !important;
}

.view-tab-bar::-webkit-scrollbar { display: none !important; }

.view-tab,
body.website-page .view-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 11px 18px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  color: #555 !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s !important;
  box-shadow: none !important;
}

.view-tab:hover { color: #A0A0A0 !important; }

.view-tab.active,
body.website-page .view-tab.active {
  color: #DFFF00 !important;
  border-bottom-color: #DFFF00 !important;
  background: transparent !important;
}

.view-tab span { display: inline !important; }
.view-tab i { font-size: 14px !important; }

/* ── 9. BOARD HEADER ──────────────────────────────────────── */
.board-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.board-header h2 {
  font-family: 'Bitter', serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  margin: 0 0 3px !important;
  letter-spacing: -0.4px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #E0E0E0 !important;
}

#sync-status {
  font-size: 0.74rem !important;
  color: #555 !important;
  font-weight: 400 !important;
}

/* Search and filter */
.filter-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.search-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}

.search-box i { font-size: 13px !important; color: #555 !important; }

.search-box input,
#subject-search {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 0.8rem !important;
  color: #E0E0E0 !important;
  font-family: 'Cabin', sans-serif !important;
  width: 130px !important;
  box-shadow: none !important;
}

.sort-select,
select#sort-mode {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  color: #A0A0A0 !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}

/* ── 10. KPI CARDS ────────────────────────────────────────── */
.kpi-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.kpi-card { border-radius: 8px !important; padding: 18px 20px !important; box-shadow: 6px 6px 0 rgba(0,0,0,0.55) !important; background: #383838 !important; }
.kpi-card-neutral { border: 1px solid #444 !important; }
.kpi-card-blue    { border: 1px solid rgba(74, 222, 128, 0.25) !important; }
.kpi-card-amber   { border: 1px solid rgba(250, 204, 21, 0.25) !important; }
.kpi-card-red     { border: 1px solid rgba(248, 113, 113, 0.25) !important; }

.kpi-overline {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 10px !important;
  color: #555 !important;
}

.kpi-card-neutral .kpi-overline { color: #555 !important; }
.kpi-card-blue    .kpi-overline { color: rgba(74, 222, 128, 0.5) !important; }
.kpi-card-amber   .kpi-overline { color: rgba(250, 204, 21, 0.5) !important; }
.kpi-card-red     .kpi-overline { color: rgba(248, 113, 113, 0.5) !important; }

.kpi-number {
  font-family: 'Bitter', serif !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -1.5px !important;
}

.kpi-card-neutral .kpi-number { color: #E0E0E0 !important; -webkit-text-fill-color: #E0E0E0 !important; }
.kpi-card-blue    .kpi-number { color: #4ADE80 !important; -webkit-text-fill-color: #4ADE80 !important; }
.kpi-card-amber   .kpi-number { color: #FACC15 !important; -webkit-text-fill-color: #FACC15 !important; }
.kpi-card-red     .kpi-number { color: #F87171 !important; -webkit-text-fill-color: #F87171 !important; }

.kpi-sub {
  font-size: 0.68rem !important;
  margin-top: 8px !important;
  color: #555 !important;
}
.kpi-card-blue  .kpi-sub { color: rgba(74, 222, 128, 0.4) !important; }
.kpi-card-amber .kpi-sub { color: rgba(250, 204, 21, 0.4) !important; }
.kpi-card-red   .kpi-sub { color: rgba(248, 113, 113, 0.4) !important; }

/* ── 11. PERIOD BAR ───────────────────────────────────────── */
.goal-bar,
.goal-bar.glass,
.goal-bar-layout {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 14px 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45) !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  backdrop-filter: none !important;
}

.goal-bar-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.goal-bar-title i,
.goal-bar-title > i {
  font-size: 20px !important;
  color: #DFFF00 !important;
}

.goal-bar-title span {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
}

.goal-subtitle {
  font-size: 0.7rem !important;
  color: #555 !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
}

.goal-bar-controls { flex-shrink: 0 !important; }

.period-toggle {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

/* Period buttons */
.period-btn {
  background: transparent !important;
  border: 1px solid #444 !important;
  color: #A0A0A0 !important;
  padding: 8px 16px !important;
  border-radius: 2px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

.period-btn:hover {
  border-color: #555 !important;
  color: #E0E0E0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
}

.period-btn.active {
  background: #DFFF00 !important;
  border-color: #DFFF00 !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.55) !important;
}

.period-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ── 12. SUBJECT TABLE HEADER ─────────────────────────────── */
.subject-table-head {
  display: grid !important;
  grid-template-columns: 1fr 140px 150px 110px !important;
  padding: 6px 20px !important;
  margin-bottom: 6px !important;
  background: transparent !important;
  border: none !important;
}

.subject-th {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: #555 !important;
}

.subject-th-score, .subject-th-status { text-align: center !important; }
.subject-th-actie { text-align: right !important; }

/* ── 13. SUBJECT CARDS ────────────────────────────────────── */
#subject-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.subject-card {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-left-width: 1px !important;
  border-bottom: 1px solid #444 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important;
  transition: none !important;
  width: 100% !important;
}

.subject-card:last-child { margin-bottom: 0 !important; }

.subject-card:hover {
  background: #3e3e3e !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important;
  transform: none !important;
  border-color: #555 !important;
}

/* Score-based border accent */
.subject-card.score-fail { border-color: rgba(248, 113, 113, 0.3) !important; }
.subject-card.score-ok   { border-color: rgba(250, 204, 21, 0.22) !important; }
.subject-card.score-good { border-color: #444 !important; }
.subject-card.score-pro  { border-color: rgba(223, 255, 0, 0.2) !important; }

.subject-card.score-fail:hover { border-color: rgba(248, 113, 113, 0.45) !important; }
.subject-card.score-ok:hover   { border-color: rgba(250, 204, 21, 0.35) !important; }
.subject-card.score-pro:hover  { border-color: rgba(223, 255, 0, 0.35) !important; }

/* Active state */
.subject-card.active {
  grid-column: unset !important;
  background: #3e3e3e !important;
  transform: none !important;
}

/* Trigger: 4-column flex row */
.subject-trigger {
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  gap: 0 !important;
  cursor: pointer !important;
}

/* Subject info — name + icon — takes 1fr */
.subject-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Icon box */
.subject-icon-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  opacity: 1 !important;
}

.subject-card:hover .subject-icon-box { opacity: 1 !important; }

/* Subject name */
.subject-name-tag {
  flex: 1 !important;
  min-width: 0 !important;
}

.subject-name-tag h3 {
  font-family: 'Bitter', serif !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.subject-name-tag p {
  font-size: 0.68rem !important;
  color: #555 !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

/* Score meta: row layout */
.score-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  min-width: unset !important;
}

/* Score badge */
.score-badge {
  font-family: 'Bitter', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  width: 80px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Score colors — override inline color via !important */
.subject-card.score-fail .score-badge { color: #F87171 !important; }
.subject-card.score-ok   .score-badge { color: #FACC15 !important; }
.subject-card.score-good .score-badge { color: #4ADE80 !important; }
.subject-card.score-pro  .score-badge { color: #DFFF00 !important; }

/* Score trend — hidden in canvas design */
.score-trend { display: none !important; }

/* Status chip */
.subject-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 3px 12px !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  min-width: 90px !important;
  justify-content: center !important;
  line-height: 1.5 !important;
}

/* Status chip colors — override inline style via !important */
.subject-card.score-pro  .subject-status-badge { background: #DFFF00 !important; color: #000 !important; border: none !important; }
.subject-card.score-good .subject-status-badge { background: rgba(74, 222, 128, 0.12) !important; color: #4ADE80 !important; border: 1px solid rgba(74, 222, 128, 0.28) !important; }
.subject-card.score-ok   .subject-status-badge { background: rgba(250, 204, 21, 0.12) !important; color: #FACC15 !important; border: 1px solid rgba(250, 204, 21, 0.3) !important; }
.subject-card.score-fail .subject-status-badge { background: rgba(248, 113, 113, 0.12) !important; color: #F87171 !important; border: 1px solid rgba(248, 113, 113, 0.32) !important; }

/* Hide dot inside chip */
.subject-status-badge span[style*="border-radius:50%"],
.subject-status-badge span[style*="border-radius: 50%"] { display: none !important; }

/* Exclude / action button */
.subject-exclude-btn {
  background: transparent !important;
  border: 1px solid #444 !important;
  color: #A0A0A0 !important;
  padding: 7px 12px !important;
  border-radius: 4px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  white-space: nowrap !important;
}

.subject-exclude-btn:hover { border-color: #555 !important; color: #E0E0E0 !important; }
.subject-exclude-btn.is-excluded { border-color: rgba(223, 255, 0, 0.3) !important; color: #DFFF00 !important; }

/* Priority badges */
.priority-badge {
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
}

.priority-critical { background: rgba(248,113,113,0.15) !important; color: #F87171 !important; }
.priority-warning  { background: rgba(250,204,21,0.15) !important; color: #FACC15 !important; }
.priority-muted    { background: rgba(255,255,255,0.06) !important; color: #555 !important; }

.whatif-impact { font-size: 0.68rem !important; color: #DFFF00 !important; margin-top: 2px !important; }

/* Drawer (expanded subject card) */
.subject-card .drawer {
  background: rgba(0,0,0,0.15) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 0 8px 8px !important;
}

/* ── 14. EMPTY STATES ─────────────────────────────────────── */
.dashboard-empty-state,
.period-nodata-state {
  background: #383838 !important;
  border: 1px dashed #444 !important;
  border-radius: 8px !important;
  padding: 48px 28px !important;
  box-shadow: none !important;
  min-height: 200px !important;
}

.dashboard-empty-icon {
  background: rgba(223, 255, 0, 0.08) !important;
  border: 1px solid rgba(223, 255, 0, 0.15) !important;
  color: #DFFF00 !important;
  border-radius: 8px !important;
}

.dashboard-empty-title { font-family: 'Bitter', serif !important; color: #E0E0E0 !important; }
.dashboard-empty-body  { color: #A0A0A0 !important; }

.dashboard-empty-actions .period-btn {
  background: #DFFF00 !important;
  border-color: #DFFF00 !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.55) !important;
}

/* ── 15. FRIENDS VIEW ─────────────────────────────────────── */
.class-view-inner { display: flex !important; flex-direction: column !important; gap: 16px !important; }

.friends-section-card {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important;
  backdrop-filter: none !important;
}

.coop-boss-card     { border-color: rgba(248, 113, 113, 0.3) !important; }
.comeback-crown-card{ border-color: rgba(250, 204, 21, 0.3) !important; }
.wagers-card        { border-color: rgba(96, 165, 250, 0.3) !important; }

.friends-section-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.friends-section-header > i { font-size: 1.3rem !important; flex-shrink: 0 !important; margin-top: 2px !important; }

.friends-section-title {
  font-family: 'Bitter', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.friends-section-desc { font-size: 0.8rem !important; color: #A0A0A0 !important; margin: 0 !important; line-height: 1.5 !important; }

.friends-badge {
  background: #DFFF00 !important;
  color: #000 !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  padding: 1px 6px !important;
}

.accepted-friends-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }

.friends-empty-state {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px !important;
  font-size: 0.82rem !important;
  color: #555 !important;
  border: 1px dashed rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
}

/* Shortcode UI */
.shortcode-big {
  font-family: 'Bitter', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #DFFF00 !important;
  letter-spacing: 4px !important;
  -webkit-text-fill-color: #DFFF00 !important;
}

.shortcode-timer-badge { font-size: 0.72rem !important; color: #555 !important; }

.shortcode-input {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  color: #E0E0E0 !important;
  font-family: 'Cabin', sans-serif !important;
}

.shortcode-input:focus { border-color: rgba(223,255,0,0.4) !important; outline: none !important; }

.shortcode-display {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}

.class-section-title {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #A0A0A0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

/* Friend wager / comeback row */
.wager-item {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 4px !important;
}

.comeback-row {
  background: rgba(250,204,21,0.03) !important;
  border: 1px solid rgba(250,204,21,0.15) !important;
  border-radius: 4px !important;
}

.wager-badge.pending   { background: rgba(250,204,21,0.12) !important; color: #FACC15 !important; }
.wager-badge.active    { background: rgba(96,165,250,0.12) !important; color: #60a5fa !important; }
.wager-badge.completed { background: rgba(74,222,128,0.12) !important; color: #4ADE80 !important; }

.friend-streak-badge { background: rgba(249,115,22,0.12) !important; color: #f97316 !important; border-radius: 2px !important; }

/* Boss health bar */
.boss-health-bar-container { background: #1A1A1A !important; border: 1px solid #333 !important; border-radius: 4px !important; }
.boss-health-bar-fill { background: linear-gradient(90deg, #f43f5e, #be123c) !important; }

/* Leaderboard podium */
.don-podium-cell {
  border-radius: 4px !important;
}

.don-rest-row {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}

/* ── 16. CLASS COMPARISON ─────────────────────────────────── */
.class-panel {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important;
}

.class-panel-title { font-family: 'Bitter', serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #E0E0E0 !important; margin-bottom: 6px !important; }
.class-panel-desc  { font-size: 0.8rem !important; color: #A0A0A0 !important; margin-bottom: 14px !important; }

.class-access-card {
  background: #383838 !important;
  border: 1px solid rgba(223, 255, 0, 0.2) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.class-access-icon {
  width: 48px !important;
  height: 48px !important;
  background: rgba(223,255,0,0.1) !important;
  border: 1px solid rgba(223,255,0,0.2) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #DFFF00 !important;
  font-size: 1.3rem !important;
}

.class-access-title { font-family: 'Bitter', serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #E0E0E0 !important; }
.class-access-text  { font-size: 0.8rem !important; color: #A0A0A0 !important; margin: 0 !important; }

.pro-upgrade-btn {
  background: #DFFF00 !important;
  border: none !important;
  color: #000 !important;
  padding: 10px 20px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  font-family: 'Cabin', sans-serif !important;
}

.pro-upgrade-btn:hover { background: #efff33 !important; }

.pro-code-btn {
  background: transparent !important;
  border: 1px solid #444 !important;
  color: #A0A0A0 !important;
  padding: 10px 16px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  font-family: 'Cabin', sans-serif !important;
}

/* Comparison table */
#class-table-container table { width: 100% !important; border-collapse: collapse !important; background: transparent !important; }
#class-table-container td, #class-table-container th {
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  font-size: 0.82rem !important;
  color: #E0E0E0 !important;
}
#class-table-container th {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #555 !important;
  border-bottom: 1px solid #444 !important;
}

.ctable-me-badge {
  background: #DFFF00 !important;
  color: #000 !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
}

/* ── 17. TESTS VIEW ───────────────────────────────────────── */
.test-compare-headline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  font-family: 'Bitter', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  flex-wrap: wrap !important;
}

.tc-name-me    { color: #DFFF00 !important; }
.tc-name-other { color: #A0A0A0 !important; }
.tc-vs         { color: #555 !important; font-size: 0.8rem !important; font-family: 'Cabin', sans-serif !important; }

.test-compare-scoreboard { display: flex !important; gap: 8px !important; margin-bottom: 14px !important; }

.tcs-block {
  flex: 1 !important;
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
  padding: 10px !important;
  text-align: center !important;
}

.tcs-count { font-family: 'Bitter', serif !important; font-size: 1.8rem !important; font-weight: 700 !important; color: #E0E0E0 !important; line-height: 1 !important; }
.tcs-me .tcs-count    { color: #DFFF00 !important; }
.tcs-other .tcs-count { color: #A0A0A0 !important; }

.tests-subject-btn {
  display: block !important;
  width: 100% !important;
  background: rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
  text-align: left !important;
}

.tests-subject-btn.is-active { border-color: rgba(223,255,0,0.3) !important; background: rgba(223,255,0,0.04) !important; }
.tests-subject-name { font-family: 'Bitter', serif !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #E0E0E0 !important; }

.test-compare-hint { font-size: 0.78rem !important; color: #555 !important; margin-top: 10px !important; }

/* TCM Modal rows */
.tcm-summary { display: flex !important; gap: 8px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
.tcm-summary-pill {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
}
.tcm-summary-me    { background: rgba(223,255,0,0.12) !important; color: #DFFF00 !important; border: 1px solid rgba(223,255,0,0.2) !important; }
.tcm-summary-other { background: rgba(255,255,255,0.05) !important; color: #A0A0A0 !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.tcm-summary-total { background: rgba(255,255,255,0.03) !important; color: #555 !important; border: 1px solid rgba(255,255,255,0.05) !important; }

.tcm-row {
  display: grid !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  background: rgba(255,255,255,0.01) !important;
  margin-bottom: 4px !important;
}

/* ── 18. PROFILE VIEW ─────────────────────────────────────── */
#profile-large-avatar { border: 3px solid #DFFF00 !important; }

/* ── 19. MODALS ───────────────────────────────────────────── */
.subject-modal-overlay,
.tests-compare-modal-overlay,
#ideas-modal-overlay,
#login-overlay,
#register-overlay,
.ideas-modal-overlay {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(4px) !important;
}

.subject-modal {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.6) !important;
}

.modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 16px 20px !important;
}

.modal-title { font-family: 'Bitter', serif !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #E0E0E0 !important; }
.modal-subtitle { font-size: 0.78rem !important; color: #555 !important; }

.modal-close {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #A0A0A0 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.modal-close:hover { background: rgba(255,255,255,0.08) !important; color: #E0E0E0 !important; }

.modal-score-badge {
  background: #DFFF00 !important;
  color: #000 !important;
  font-family: 'Bitter', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.55) !important;
}

.modal-icon-box { border-radius: 8px !important; }

.modal-progress { height: 3px !important; background: rgba(255,255,255,0.06) !important; border-radius: 0 !important; }
.modal-progress-fill { background: #DFFF00 !important; height: 100% !important; border-radius: 0 !important; }

.modal-body { padding: 16px 20px !important; }

.modal-section-label {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #555 !important;
}

.modal-divider { height: 1px !important; background: rgba(255,255,255,0.06) !important; }

/* Eval grid */
.eval-card {
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
}

.eval-fail { border-color: rgba(248,113,113,0.25) !important; }
.eval-ok   { border-color: rgba(250,204,21,0.25) !important; }
.eval-pass { border-color: rgba(74,222,128,0.25) !important; }
.eval-top  { border-color: rgba(223,255,0,0.2) !important; }

.modal-whatif-total { font-size: 0.76rem !important; color: #A0A0A0 !important; }

/* Report setup popup */
.report-setup-popup-inner,
.missing-hours-popup-inner,
.review-popup-inner {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}

.report-setup-popup-head,
.report-setup-popup-eyebrow,
.missing-hours-popup-head {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.rs-tab-btn {
  background: transparent !important;
  border: 1px solid #444 !important;
  color: #A0A0A0 !important;
  padding: 7px 14px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: 'Cabin', sans-serif !important;
}

.rs-tab-btn.active { background: #DFFF00 !important; border-color: #DFFF00 !important; color: #000 !important; }

.rs-weight-badge { border-radius: 2px !important; }

/* Period weights config */
.period-weights-config, .period-weights-config.glass {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  backdrop-filter: none !important;
}

/* Missing hours chip */
.missing-hours-chip {
  background: rgba(250,204,21,0.12) !important;
  border: 1px solid rgba(250,204,21,0.25) !important;
  color: #FACC15 !important;
  border-radius: 2px !important;
}

/* Review popup */
.review-btn-primary {
  background: #DFFF00 !important;
  color: #000 !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.55) !important;
}

/* Elite panels */
.elite-panel {
  background: rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
}

/* ── 20. FORM ELEMENTS ────────────────────────────────────── */
.website-page select,
.website-page input[type="text"],
.website-page input[type="number"],
.website-page input[type="email"],
.website-page input[type="password"],
.website-page textarea {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  color: #E0E0E0 !important;
  font-family: 'Cabin', sans-serif !important;
}

.website-page select:focus,
.website-page input:focus,
.website-page textarea:focus {
  border-color: rgba(223, 255, 0, 0.4) !important;
  outline: none !important;
}

.website-page select option { background: #1A1A1A !important; }

.test-compare-select {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  color: #E0E0E0 !important;
  padding: 8px 12px !important;
}

.rs-weight-input-wrap input,
.lesson-duration-row input {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid #444 !important;
  color: #E0E0E0 !important;
  border-radius: 4px !important;
}

/* ── 21. AD SLOTS ─────────────────────────────────────────── */
.dashboard-ad-slot {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.55) !important;
}

.sidebar-card-ad {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.55) !important;
  padding: 16px !important;
}

/* ── 22. FOOTER ───────────────────────────────────────────── */
.dashboard-footer {
  background: #1A1A1A !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 14px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dashboard-footer > span { font-size: 0.82rem !important; color: #555 !important; }
.dashboard-footer > span:first-child {
  font-family: 'Bitter', serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #E0E0E0 !important;
}

.footer-ideas-btn,
.dashboard-footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #A0A0A0 !important;
  padding: 7px 13px !important;
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-family: 'Cabin', sans-serif !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
}

.footer-ideas-btn:hover,
.dashboard-footer-links a:hover {
  border-color: rgba(255,255,255,0.12) !important;
  color: #E0E0E0 !important;
}

/* ── 23. MISCELLANEOUS ────────────────────────────────────── */

/* Period weights config section (in main content) */
.period-weights-total {
  font-family: 'Bitter', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #E0E0E0 !important;
}

.period-weights-status-info { color: #A0A0A0 !important; font-size: 0.8rem !important; }

/* SMPP */
.smpp-active-badge { background: rgba(74,222,128,0.12) !important; border: 1px solid rgba(74,222,128,0.25) !important; color: #4ADE80 !important; border-radius: 2px !important; }

/* Dashboard announcements */
.dashboard-announcements {
  background: rgba(223,255,0,0.05) !important;
  border: 1px solid rgba(223,255,0,0.12) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

/* Ideas modal */
.ideas-modal { background: #1A1A1A !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px !important; }
.ideas-modal-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.ideas-modal-title { font-family: 'Bitter', serif !important; font-weight: 700 !important; color: #E0E0E0 !important; }
.ideas-list li { color: #A0A0A0 !important; font-size: 0.82rem !important; }

/* Shortcuts / subject hours nav chips */
.subject-hours-nav a, .subject-hours-nav button {
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  color: #A0A0A0 !important;
  font-size: 0.76rem !important;
  padding: 5px 10px !important;
}

/* Report impact */
.report-impact-row { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.report-impact-bar-fill { background: #DFFF00 !important; }

/* What-if modal cards */
.whatif-card {
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
}

/* ── TOAST NOTIFICATIONS ─────────────────────────────────── */
.ss-toast-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ss-toast {
  background: #383838 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  color: #E0E0E0 !important;
  padding: 10px 16px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.55) !important;
  min-width: 200px !important;
  max-width: 340px !important;
  animation: ss-toast-in 0.2s ease forwards;
}

.ss-toast.success { border-color: rgba(74,222,128,0.35) !important; color: #4ADE80 !important; }
.ss-toast.warning { border-color: rgba(250,204,21,0.35) !important; color: #FACC15 !important; }
.ss-toast.error   { border-color: rgba(248,113,113,0.35) !important; color: #F87171 !important; }
.ss-toast.info    { border-color: rgba(223,255,0,0.2) !important; }

@keyframes ss-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ss-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* Chart.js default overrides via CSS */
/* (Chart.js uses canvas, we set defaults in app.js) */

/* ── 24. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1200px) {
  body.website-page .container { grid-template-columns: 270px minmax(0, 1fr) !important; }
  .sidebar { width: 270px !important; min-width: 270px !important; }
}

@media (max-width: 980px) {
  body.website-page .container { grid-template-columns: 1fr !important; }
  .sidebar { width: 100% !important; min-width: unset !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
  .kpi-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .subject-table-head { grid-template-columns: 1fr 90px 110px 90px !important; }
}

@media (max-width: 640px) {
  .hero-header { padding: 0 14px !important; }
  .hero-header-main { flex-wrap: wrap !important; gap: 10px !important; }
  .header-brand { min-width: auto !important; }
  .hero-quick-actions { display: none !important; }
  .hero-identity { padding: 0 10px !important; }
  .kpi-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .subject-table-head { display: none !important; }
  .subject-trigger { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .score-meta { flex-direction: row !important; width: 100% !important; justify-content: space-between !important; }
  .main-content, .subject-board { padding: 14px !important; }
  .dashboard-footer { flex-direction: column !important; gap: 10px !important; text-align: center !important; padding: 14px !important; }
}