/* Dashboard-only helpers (Tailwind is loaded via CDN in dashboard/index.html) */
:root{
  --orange:#FF8702;
  --purple:#6725A1;
  --red:#DC2A38;
  --green:#07734F;
  --pink:#F26D7E;
  --fog:#F0F4F3;
  --muted:#b8bcc7;
  --bg:#0f1014;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.14);
  --surface-1:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.10);
  --surface-soft:rgba(0,0,0,.20);
  --surface-strong:#14161c;
  --shadow-card:0 18px 42px rgba(0,0,0,.28);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.08), 0 20px 52px rgba(0,0,0,.34);
  --chart-label:#cfd3de;
  --overlay:rgba(0,0,0,.70);
  --ui-scheme:dark;
}

:root[data-theme="light"]{
  color-scheme:light;
  --fog:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;
  --line:rgba(15,23,42,.12);
  --line-strong:rgba(15,23,42,.18);
  --surface-1:rgba(255,255,255,1);
  --surface-2:rgba(255,255,255,1);
  --surface-soft:#f1f5f9;
  --surface-strong:#e2e8f0;
  --shadow-card:0 10px 25px -5px rgba(0,0,0,.05), 0 8px 10px -6px rgba(0,0,0,.01);
  --shadow-glow:0 0 0 1px rgba(255,255,255,1), 0 15px 35px -5px rgba(0,0,0,.08);
  --chart-label:#64748b;
  --overlay:rgba(255,255,255,.85);
  --ui-scheme:light;
}

html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at top, rgba(255,135,2,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--bg);
  color:var(--fog);
}

:root[data-theme="light"] body{
  background:
    radial-gradient(circle at top, rgba(255,135,2,.05), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Prevent background scroll when any modal is open */
body.modal-open, html.modal-open{overflow:hidden}

/* Form controls (improve native select dropdown contrast on dark UI) */
.select{
  color-scheme: var(--ui-scheme);
  background-color: var(--surface-soft) !important;
  border-color: var(--line-strong) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, var(--shadow-card);
}
.select:focus{
  border-color: rgba(255,135,2,.38) !important;
  box-shadow: 0 0 0 3px rgba(255,135,2,.18), 0 10px 30px rgba(0,0,0,.35);
}
.select option,
.select optgroup{
  background-color:var(--surface-strong);
  color:var(--fog);
}

/* Mobile sticky header */
.mobile-topbar{ background:var(--bg); }

/* Theme toggle */
.theme-toggle{
  display:flex;
  width:100%;
  align-items:center;
  gap:.8rem;
  padding:.78rem .9rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  color:var(--fog);
  box-shadow:var(--shadow-card);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(255,135,2,.28);
}
.theme-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,135,2,.16), var(--shadow-card);
}
.theme-toggle.compact{
  width:auto;
  padding:.55rem .72rem;
  border-radius:1rem;
  box-shadow:none;
}
.theme-toggle-mark{
  position:relative;
  display:grid;
  height:2rem;
  width:2rem;
  flex:none;
  place-items:center;
  border-radius:.9rem;
  background:linear-gradient(135deg, rgba(255,135,2,.22), rgba(103,37,161,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  overflow:hidden;
}
.theme-toggle-mark::before{
  content:'';
  position:absolute;
  inset:.38rem;
  border-radius:999px;
  background:linear-gradient(135deg, #ffdba2, #ff9b3f);
  box-shadow:0 0 18px rgba(255,135,2,.24);
}
.theme-toggle-mark::after{
  content:'';
  position:absolute;
  top:.34rem;
  right:.34rem;
  height:.74rem;
  width:.74rem;
  border-radius:999px;
  background:rgba(15,16,20,.84);
}
:root[data-theme="light"] .theme-toggle-mark{
  background:linear-gradient(135deg, rgba(255,207,120,.30), rgba(255,135,2,.12));
}
:root[data-theme="light"] .theme-toggle-mark::after{
  opacity:0;
}
.theme-toggle-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
}
.theme-toggle-kicker{
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.theme-toggle-label{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--fog);
}
.theme-toggle.compact .theme-toggle-kicker{
  display:none;
}
.theme-toggle.compact .theme-toggle-label{
  font-size:.76rem;
}

/* Subtle "aurora" sheen for gradient cards */
.card.gradient{position:relative;overflow:hidden}
.card.gradient::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(900px circle at 18% 0%, rgba(255,135,2,.18), transparent 45%),
    radial-gradient(900px circle at 82% 8%, rgba(103,37,161,.16), transparent 46%),
    radial-gradient(900px circle at 50% 120%, rgba(7,115,79,.12), transparent 50%);
  opacity:.22;
  transition:opacity .22s ease;
}
.card.gradient::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  /* Full-surface hover glow (avoid narrow diagonal band that looks "cut off") */
  background:
    radial-gradient(800px circle at 25% 25%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(760px circle at 85% 35%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%, rgba(0,0,0,.10));
  opacity:.0;
  transition:opacity .22s ease;
  will-change: opacity;
}
@media (hover:hover){
  .card.gradient:hover::after{opacity:.42}
  .card.gradient:hover::before{opacity:1}
}

/* Gentle lift on hover for cards */
.card.shadow-card,.card.shadow-glow{transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.shadow-card{box-shadow:var(--shadow-card) !important}
.shadow-glow{box-shadow:var(--shadow-glow) !important}
@media (hover:hover){
  .card.shadow-card:hover,.card.shadow-glow:hover{transform:translateY(-1px)}
}

/* SPA routing helpers */
.page{display:none}
.page.active{display:block}

/* Sidebar groups */
.menu-children{display:none}
.menu-group.open>.menu-children{display:block}
.menu-item{position:relative}
.menu-item.active{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:var(--fog);
}
.menu-item.active::before{
  content:none;
}
.menu-item.active .ic{
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
.menu-item.menu-child.active::before{ left:8px; top:12px; bottom:12px; }
.caret svg{transition:transform .2s ease}
.menu-group.open .caret svg{transform:rotate(90deg)}

/* Sidebar collapse behavior (driven by app.js toggling .app.is-collapsed) */
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
@media (min-width:1024px){
  .app{grid-template-columns:17.5rem 1fr}
}
.app.is-collapsed{grid-template-columns:1fr}
.sidebar{transform:translateX(0)}
.app.is-collapsed .sidebar{transform:translateX(-100%)}
.app.is-collapsed .sidebar{display:none}
.app.is-collapsed .sidebar-scrim{opacity:0;pointer-events:none}
.sidebar-retract{display:none !important; z-index:45}
@media (min-width:1024px){
  .app.is-collapsed .sidebar-retract{display:grid !important}
  .app:not(.is-collapsed) .sidebar-retract{display:none !important}
}

/* On small screens, show scrim when sidebar is open */
@media (max-width: 1023px){
  .app:not(.is-collapsed) .sidebar-scrim{opacity:1;pointer-events:auto}
  /* Mobile uses the header menu button; never show the floating retract button */
  .sidebar-retract{display:none !important}
  /* Prevent header overlapping the opened sidebar */
  .app:not(.is-collapsed) .mobile-topbar{display:none}
}

/* Dashboard widgets */
.daily-targets.collapsed{display:none}

/* Progress bar fill (used for dynamic-rendered bars that Tailwind CDN might not safelist) */
.bbm-bar-fill{
  transition:width .35s ease;
  background:linear-gradient(90deg, rgba(255,135,2,.95), rgba(242,109,126,.95), rgba(103,37,161,.95));
  box-shadow:0 0 18px rgba(255,135,2,.22);
}

/* BBM stepper */
.bbm-step{display:none}
.bbm-step.active{display:block}

/* Modals */
.modal{display:none}
.modal.show{display:flex}
.modal.show{animation:modalOverlayIn .18s ease-out}
.modal.show .modal-card{animation:modalCardIn .22s ease-out}
.modal .modal-card{transform:translateY(8px) scale(.98);opacity:.94}
.modal.show .modal-card{transform:none;opacity:1}
.modal-card{position:relative}
.modal-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,135,2,.16), rgba(103,37,161,.14), rgba(7,115,79,.10));
  opacity:.55;
  filter:blur(.2px);
}
.modal-card::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(720px circle at 12% 0%, rgba(255,135,2,.16), transparent 44%),
    radial-gradient(840px circle at 86% 10%, rgba(103,37,161,.14), transparent 48%),
    radial-gradient(760px circle at 50% 120%, rgba(242,109,126,.10), transparent 55%);
  opacity:.35;
}
.modal-card > *{position:relative;z-index:1}
.modal-card .modal-body{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.modal-card .modal-body::-webkit-scrollbar{width:10px}
.modal-card .modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px;border:3px solid transparent;background-clip:content-box}
.modal-card .modal-body::-webkit-scrollbar-track{background:transparent}

@keyframes modalOverlayIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes modalCardIn{
  from{transform:translateY(12px) scale(.97);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

/* Loading overlay */
#loadingOverlay{display:none}
#loadingOverlay.show{display:flex}

/* Common utility-ish helpers used by JS templates */
.muted{color:var(--muted)}

/* Simple SVG ring styling (progress strokeDashoffset set in JS) */
.progress-ring svg .track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:10}
.progress-ring svg .progress{fill:none;stroke:rgba(255,135,2,.95);stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px}

/* Weekly chart styling */
#weeklyChart .axis{stroke:rgba(255,255,255,.10);stroke-width:1}
#weeklyChart .ylabels,
#weeklyChart .labels,
#weeklyChart text{fill:var(--chart-label)}
#weeklyChart .area{fill:url(#weeklyArea)}
#weeklyChart .line{fill:none;stroke:url(#weeklyStroke);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,135,2,.18))}
#weeklyChart .dot{fill:rgba(255,255,255,.85);opacity:.9}

/* Streak hype: subtle animated ember glow */
.kpi.streak{position:relative;overflow:hidden}
.kpi.streak::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(420px circle at 85% 35%, rgba(220,42,56,.22), transparent 55%),
    radial-gradient(520px circle at 70% 15%, rgba(255,135,2,.18), transparent 58%),
    radial-gradient(520px circle at 10% 110%, rgba(103,37,161,.10), transparent 60%);
  opacity:.35;
  transform:translateY(0);
  animation:streakPulse 2.6s ease-in-out infinite;
}
.kpi.streak .streak-flame{filter:drop-shadow(0 0 14px rgba(220,42,56,.25))}
.kpi.streak .streak-flame{animation:flameFlicker 2.2s ease-in-out infinite}
@keyframes streakPulse{
  0%,100%{opacity:.28;transform:translateY(0)}
  50%{opacity:.5;transform:translateY(-2px)}
}
@keyframes flameFlicker{
  0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}
  45%{transform:translateY(-1px) rotate(1deg) scale(1.03)}
  70%{transform:translateY(0) rotate(0deg) scale(.99)}
}
@media (prefers-reduced-motion: reduce){
  .kpi.streak::after,
  .kpi.streak .streak-flame{animation:none}
}

/* Share progress (dashboard) */
.share-card{
  position:relative;
  aspect-ratio:9/16;
  width:100%;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f1014;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.55);
}
.share-bg{position:absolute; inset:0}
.share-bg-mesh{
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px circle at 14% 2%, rgba(255,135,2,.30), transparent 46%),
    radial-gradient(900px circle at 86% 10%, rgba(103,37,161,.26), transparent 52%),
    radial-gradient(880px circle at 50% 105%, rgba(242,109,126,.20), transparent 56%),
    radial-gradient(780px circle at 0% 100%, rgba(7,115,79,.14), transparent 60%);
  opacity:.92;
}
.share-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.06;
}
.share-bg-sheen{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%, rgba(0,0,0,.12));
  opacity:.75;
}
.share-bg-vignette{
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(1000px circle at 50% 20%, transparent 40%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.50) 100%);
  opacity:.95;
}

.share-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:30px 22px 22px;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.share-avatar-ring{
  padding:6px;
  border-radius:26px;
  background:linear-gradient(135deg, rgba(255,135,2,.85), rgba(242,109,126,.65), rgba(103,37,161,.75));
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 18px 45px rgba(0,0,0,.40);
}
.share-avatar{
  height:84px;
  width:84px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:rgba(0,0,0,.28);
  color:#fff;
  font-weight:900;
  font-size:34px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}
.share-avatar img{width:100%;height:100%;object-fit:cover}

.share-name{
  margin-top:16px;
  padding:0 6px;
  color:rgba(255,255,255,.98);
  font-weight:950;
  font-size:34px;
  letter-spacing:-.03em;
  line-height:1.12;
  text-transform:uppercase;
  text-shadow:0 18px 40px rgba(0,0,0,.55);
  padding-bottom:2px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.share-name.is-long{font-size:30px}
.share-name.is-xlong{font-size:26px}

.share-badge{
  margin-top:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg, rgba(255,135,2,.22), rgba(242,109,126,.18), rgba(103,37,161,.18));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.share-kpis{
  margin-top:22px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.share-kpi{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 16px 40px rgba(0,0,0,.35);
  padding:14px 14px 13px;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.share-kpi-streak{
  background:
    radial-gradient(440px circle at 85% 20%, rgba(220,42,56,.22), transparent 60%),
    radial-gradient(520px circle at 20% 120%, rgba(255,135,2,.14), transparent 62%),
    rgba(255,255,255,.05);
}
.share-kpi-hours{
  background:
    radial-gradient(520px circle at 15% 15%, rgba(103,37,161,.22), transparent 60%),
    radial-gradient(520px circle at 90% 110%, rgba(242,109,126,.12), transparent 62%),
    rgba(255,255,255,.05);
}
.share-kpi-label{
  color:rgba(255,255,255,.55);
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.share-kpi-value{display:flex; align-items:flex-end; justify-content:center; gap:10px}
.share-kpi-number{
  font-weight:950;
  font-size:40px;
  letter-spacing:-.03em;
  line-height:1;
  color:rgba(255,135,2,.95);
  text-shadow:0 12px 30px rgba(0,0,0,.45);
}
.share-kpi-emoji{
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 0 18px rgba(220,42,56,.40));
}
.share-kpi-hours-value{
  font-weight:950;
  font-size:34px;
  letter-spacing:-.03em;
  line-height:1.05;
  color:rgba(200,180,255,.95);
  text-shadow:0 12px 30px rgba(0,0,0,.45);
}

.share-quote{
  margin-top:18px;
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  padding:12px 14px;
  box-shadow:0 14px 35px rgba(0,0,0,.28);
}
.share-quote-text{
  color:rgba(255,255,255,.70);
  font-size:14px;
  font-style:italic;
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.share-footer{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.share-footer-mark{
  height:26px;
  width:26px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
}
.share-footer-sep{opacity:.45}

/* Share progress image preview (rendered canvas) */
.share-card-img{
  width:100%;
  aspect-ratio:9/16;
  display:block;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f1014;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.55);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout: default;
}

/* Light theme */
:root[data-theme="light"] .bg-gradients{
  filter:blur(60px) saturate(110%);
  opacity:.4;
}
:root[data-theme="light"] .bg-gradients > :nth-child(4){
  mix-blend-mode:normal;
  opacity:.08;
}
:root[data-theme="light"] .bg-gradients > :nth-child(5){
  background-image:radial-gradient(circle at 1px 1px, rgba(15,23,42,.06) 1px, transparent 0) !important;
  opacity:1;
}

:root[data-theme="light"]{
  --lt-bg-top:#f8fafc;
  --lt-bg-bottom:#f1f5f9;
  --lt-panel:#ffffff;
  --lt-panel-soft:#ffffff;
  --lt-panel-solid:#ffffff;
  --lt-panel-muted:#f1f5f9;
  --lt-sidebar:#ffffff;
  --lt-accent:linear-gradient(135deg, rgba(255,135,2,.12), rgba(242,109,126,.08), rgba(103,37,161,.08));
  --lt-accent-soft:linear-gradient(135deg, rgba(255,135,2,.08), rgba(242,109,126,.05), rgba(103,37,161,.05));
  --lt-text:#0f172a;
  --lt-text-soft:#475569;
  --lt-text-faint:#94a3b8;
  --lt-border:rgba(15,23,42,.08);
  --lt-border-strong:rgba(15,23,42,.15);
  --lt-shadow:0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.025);
  --lt-shadow-soft:0 1px 3px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.03);
  --lt-shadow-glow:0 0 0 1px rgba(255,255,255,1), 0 10px 25px -5px rgba(0,0,0,.08);
  --lt-ghost-bg:rgba(241,245,249,.7);
  --lt-ghost-bg-hover:rgba(226,232,240,.9);
  --lt-tag-bg:rgba(241,245,249,1);
  --lt-modal-overlay:rgba(255,255,255,.85);
}

:root[data-theme="light"] body{
  background:
    radial-gradient(circle at top, rgba(255,135,2,.05), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(103,37,161,.03), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, var(--lt-bg-top) 0%, #f1f5f9 52%, var(--lt-bg-bottom) 100%);
  color:var(--lt-text);
}

:root[data-theme="light"] .sidebar{
  background:var(--lt-sidebar);
  border-right-color:var(--lt-border);
  box-shadow:18px 0 54px rgba(0,0,0,.03);
}
:root[data-theme="light"] .brand,
:root[data-theme="light"] .profile-mini,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .mobile-topbar > div > div,
:root[data-theme="light"] .loader-card{
  border-color:var(--lt-border) !important;
  background:var(--lt-panel) !important;
  box-shadow:var(--lt-shadow) !important;
}
:root[data-theme="light"] .mobile-topbar{
  border-bottom-color:var(--lt-border) !important;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
}
:root[data-theme="light"] .circle-btn,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] #openSidebar,
:root[data-theme="light"] #mobileMenuBtn,
:root[data-theme="light"] #mobileScrollTop{
  border-color:var(--lt-border) !important;
  background:var(--lt-ghost-bg) !important;
  color:var(--lt-text) !important;
  box-shadow:var(--lt-shadow-soft);
}
:root[data-theme="light"] .circle-btn:hover,
:root[data-theme="light"] .icon-btn:hover,
:root[data-theme="light"] #openSidebar:hover,
:root[data-theme="light"] #mobileMenuBtn:hover,
:root[data-theme="light"] #mobileScrollTop:hover{
  background:var(--lt-ghost-bg-hover) !important;
  color:var(--lt-text) !important;
  border-color:rgba(255,135,2,.18) !important;
}
:root[data-theme="light"] .brand-text small,
:root[data-theme="light"] .profile-mini .sub,
:root[data-theme="light"] .mobile-topbar .text-\[11px\]{
  color:var(--lt-text-faint) !important;
}
:root[data-theme="light"] .menu-item{
  color:var(--lt-text-soft) !important;
}
:root[data-theme="light"] .menu-item:hover{
  background:rgba(241,245,249,.72) !important;
  color:var(--lt-text) !important;
}
:root[data-theme="light"] .menu-item .ic{
  background:rgba(241,245,249,.78) !important;
  box-shadow:0 0 0 1px rgba(15,23,42,.12) inset !important;
}
:root[data-theme="light"] .menu-item.active{
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.90)) !important;
  border-color:rgba(255,135,2,.15) !important;
  color:var(--lt-text) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.56);
}
:root[data-theme="light"] .menu-item.active .ic{
  background:var(--lt-accent) !important;
  box-shadow:0 0 0 1px rgba(255,135,2,.08) inset !important;
}
:root[data-theme="light"] .menu-parent .caret,
:root[data-theme="light"] .menu-parent .caret svg{
  color:var(--lt-text-faint) !important;
  stroke:var(--lt-text-faint) !important;
}
:root[data-theme="light"] .menu-children{
  border-left-color:rgba(15,23,42,.1);
}

:root[data-theme="light"] [class*="border-white/10"]{
  border-color:var(--lt-border) !important;
}
:root[data-theme="light"] [class*="border-white/20"]{
  border-color:var(--lt-border-strong) !important;
}
:root[data-theme="light"] [class*="bg-white/5"]:not([class*="bg-sima-"]){
  background-color:rgba(255,255,255,.70) !important;
}
:root[data-theme="light"] [class*="bg-white/10"]:not([class*="bg-sima-"]){
  background-color:rgba(255,255,255,.86) !important;
}
:root[data-theme="light"] [class*="bg-black/20"]:not([class*="bg-sima-"]){
  background-color:rgba(241,245,249,.82) !important;
}
:root[data-theme="light"] [class*="bg-black/30"]{
  background-color:rgba(226,232,240,.88) !important;
}
:root[data-theme="light"] [class*="bg-gradient-to-br"][class*="from-white/10"][class*="to-white/5"]{
  background-image:linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.84)) !important;
}
:root[data-theme="light"] [class*="text-white/"]{
  color:var(--lt-text-soft) !important;
}
:root[data-theme="light"] [class*="text-white/90"],
:root[data-theme="light"] [class*="text-white/85"],
:root[data-theme="light"] [class*="text-white/80"]{
  color:#1e293b !important;
}
:root[data-theme="light"] [class*="text-white/45"],
:root[data-theme="light"] [class*="text-white/40"],
:root[data-theme="light"] [class*="text-white/35"],
:root[data-theme="light"] [class*="text-white/30"],
:root[data-theme="light"] [class*="text-white/25"],
:root[data-theme="light"] [class*="text-white/20"]{
  color:var(--lt-text-faint) !important;
}

:root[data-theme="light"] .subtitle,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .mini-link,
:root[data-theme="light"] .dt-subline,
:root[data-theme="light"] .exam-count,
:root[data-theme="light"] .mc-meta,
:root[data-theme="light"] .mc-sub,
:root[data-theme="light"] .latest-meta{
  color:var(--lt-text-soft) !important;
}
:root[data-theme="light"] .mini-link{
  text-decoration-color:rgba(15,23,42,.2);
}
:root[data-theme="light"] .mini-link:hover{
  color:var(--lt-text) !important;
  text-decoration-color:rgba(255,135,2,.32);
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .agenda,
:root[data-theme="light"] .latest-item,
:root[data-theme="light"] .mat-card,
:root[data-theme="light"] .row,
:root[data-theme="light"] .exam-count,
:root[data-theme="light"] .target-item,
:root[data-theme="light"] .exam-item,
:root[data-theme="light"] .profile-hero,
:root[data-theme="light"] .daily-targets,
:root[data-theme="light"] .modal-card,
:root[data-theme="light"] .share-card-img,
:root[data-theme="light"] .live-kv,
:root[data-theme="light"] .live-warning{
  background-color:var(--lt-panel-soft) !important;
  border-color:var(--lt-border) !important;
  box-shadow:var(--lt-shadow) !important;
}
:root[data-theme="light"] .card.gradient::after{
  background:
    radial-gradient(900px circle at 18% 0%, rgba(255,135,2,.07), transparent 44%),
    radial-gradient(900px circle at 82% 8%, rgba(103,37,161,.05), transparent 46%),
    radial-gradient(900px circle at 50% 120%, rgba(7,115,79,.05), transparent 50%);
  opacity:.84;
}
:root[data-theme="light"] .card.gradient::before{
  background:
    radial-gradient(780px circle at 20% 24%, rgba(255,255,255,.24), transparent 62%),
    radial-gradient(780px circle at 82% 26%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%, rgba(15,23,42,.03));
  opacity:.52;
}
:root[data-theme="light"] .profile-hero,
:root[data-theme="light"] .dash-profile{
  background-image:
    radial-gradient(1100px 540px at 0% 0%, rgba(255,135,2,.08), transparent 58%),
    radial-gradient(900px 420px at 100% 0%, rgba(103,37,161,.07), transparent 58%),
    linear-gradient(145deg, #ffffff, #f8fafc) !important;
}
:root[data-theme="light"] .agenda,
:root[data-theme="light"] .latest-item,
:root[data-theme="light"] .mat-card,
:root[data-theme="light"] .row,
:root[data-theme="light"] .exam-item,
:root[data-theme="light"] .target-item{
  background:rgba(255,255,255,.64) !important;
}
:root[data-theme="light"] .agenda:hover,
:root[data-theme="light"] .latest-item:hover,
:root[data-theme="light"] .mat-card:hover,
:root[data-theme="light"] .row:hover{
  background-color:rgba(241,245,249,.92) !important;
  border-color:rgba(255,135,2,.18) !important;
}
:root[data-theme="light"] .pill:not(.grad):not(.grad-blue),
:root[data-theme="light"] .pill.ghost,
:root[data-theme="light"] .bbm-toggle,
:root[data-theme="light"] .bbm-load-more{
  background:var(--lt-ghost-bg) !important;
  color:var(--lt-text) !important;
  border-color:var(--lt-border) !important;
  box-shadow:var(--lt-shadow-soft);
}
:root[data-theme="light"] .pill:not(.grad):not(.grad-blue):hover,
:root[data-theme="light"] .pill.ghost:hover,
:root[data-theme="light"] .bbm-toggle:hover,
:root[data-theme="light"] .bbm-load-more:hover{
  background:var(--lt-ghost-bg-hover) !important;
  color:var(--lt-text) !important;
  border-color:rgba(255,135,2,.20) !important;
}
:root[data-theme="light"] .pill.grad,
:root[data-theme="light"] .pill.grad-blue,
:root[data-theme="light"] .chip.hero,
:root[data-theme="light"] [class*="bg-gradient-to-r"][class*="from-sima-"][class~="text-white"],
:root[data-theme="light"] [class*="bg-gradient-to-br"][class*="from-sima-"][class~="text-white"]{
  color:#fff !important;
  box-shadow:0 14px 30px rgba(0,0,0,.1);
  filter:saturate(.94);
}
:root[data-theme="light"] .theme-toggle{
  color:var(--lt-text) !important;
}
:root[data-theme="light"] .theme-toggle:hover{
  background:linear-gradient(180deg, #ffffff, #f8fafc) !important;
}
:root[data-theme="light"] .theme-toggle-mark{
  background:linear-gradient(135deg, rgba(255,211,139,.34), rgba(255,157,78,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}
:root[data-theme="light"] .theme-toggle-mark::before{
  background:linear-gradient(135deg, #ffe4ad, #ffb257);
  box-shadow:0 0 16px rgba(255,168,74,.20);
}
:root[data-theme="light"] .progress-ring svg .track{
  stroke:rgba(15,23,42,.1);
}
:root[data-theme="light"] #weeklyChart .axis{
  stroke:rgba(15,23,42,.1);
}
:root[data-theme="light"] #weeklyChart .line{
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.05)) drop-shadow(0 0 10px rgba(255,135,2,.10));
}
:root[data-theme="light"] #weeklyChart .dot{
  fill:#ffffff;
  stroke:rgba(255,135,2,.16);
  stroke-width:2;
}
:root[data-theme="light"] #weeklyArea stop:last-child{
  stop-color:#ffffff;
  stop-opacity:.02;
}
:root[data-theme="light"] .modal,
:root[data-theme="light"] #loadingOverlay{
  background:var(--lt-modal-overlay) !important;
}
:root[data-theme="light"] .modal-card{
  background:linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow:var(--lt-shadow-glow) !important;
}
:root[data-theme="light"] .modal-card::before{
  background:linear-gradient(135deg, rgba(255,135,2,.08), rgba(103,37,161,.05), rgba(7,115,79,.04));
  opacity:.68;
}
:root[data-theme="light"] .modal-card::after{
  background:
    radial-gradient(720px circle at 12% 0%, rgba(255,135,2,.10), transparent 44%),
    radial-gradient(840px circle at 86% 10%, rgba(103,37,161,.08), transparent 48%),
    radial-gradient(760px circle at 50% 120%, rgba(242,109,126,.06), transparent 55%);
  opacity:.34;
}
:root[data-theme="light"] .modal-head{
  background:rgba(255,255,255,.72) !important;
  border-bottom-color:var(--lt-border) !important;
}
:root[data-theme="light"] .modal-foot{
  border-top-color:var(--lt-border) !important;
}
:root[data-theme="light"] .modal-card .modal-body{
  scrollbar-color:rgba(15,23,42,.2) transparent;
}
:root[data-theme="light"] .modal-card .modal-body::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.2);
}

:root[data-theme="light"] .kpi.streak::after{
  opacity:.18;
}
:root[data-theme="light"] .live-warning{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,135,2,.12), transparent 52%),
    linear-gradient(180deg, #fffbeb, #ffedd5) !important;
  border-color:rgba(224,152,76,.22) !important;
  color:#8b6030 !important;
}
:root[data-theme="light"] .live-warning strong{
  color:#6a4824 !important;
}
:root[data-theme="light"] .live-kv .v,
:root[data-theme="light"] .live-kv .v a,
:root[data-theme="light"] .live-kv .v a:visited{
  color:var(--lt-text) !important;
}
:root[data-theme="light"] .live-kv .v a:hover{
  color:#0f1c2e !important;
}
:root[data-theme="light"] input[type="checkbox"]{
  background-color: #ffffff !important;
  border-color: rgba(15,23,42,.2) !important;
  color: #ff8702 !important; /* The checkmark color when checked via Tailwind forms */
}
:root[data-theme="light"] input[type="checkbox"]:checked{
  background-color: #ff8702 !important;
  border-color: #ff8702 !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}
:root[data-theme="light"] input[type="checkbox"]:focus{
  outline: 2px solid rgba(255,135,2,.4) !important;
  outline-offset: 2px !important;
}
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  background-color:rgba(255,255,255,.80) !important;
  color:var(--lt-text) !important;
  border-color:var(--lt-border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
  color:var(--lt-text-faint) !important;
}
:root[data-theme="light"] .loader-text{
  color:var(--lt-text) !important;
}
:root[data-theme="light"] #loadingOverlay .spinner{
  border-color:rgba(15,23,42,.1);
  border-top-color:#ff9b3f;
  border-right-color:#f08a97;
}