/* ─── Design Tokens — Falcon (Prium) palette ──────────
   Body / cards / borders use Falcon's exact greys.
   #2C7BE5 is Falcon's signature primary blue.
   Cyan is kept as a small water/info accent.
─────────────────────────────────────────────────────── */
:root {
  /* 60% — dominant dark background (Falcon dark mode) */
  --bg:          #0B1727;
  --bg2:         #121E2D;
  --bg3:         #1B2A3F;
  /* 30% — cards / panels / borders */
  --card:        #121E2D;
  --card-border: #232E3C;
  --card-hover:  #182539;
  --glass:       rgba(11,23,39,0.92);
  --glass-border:rgba(35,46,60,0.6);
  --surface:     rgba(11,23,39,0.97);
  --sidebar-bg:  #0E1B2D;
  --shadow:      rgba(0,0,0,0.32);
  /* 10% — Falcon's signature primary (royal blue) */
  --accent:      #2C7BE5;
  --accent-2:    #1E62C7;
  --accent-3:    #4E92EC;        /* hover/lighter */
  --accent-dim:  rgba(44,123,229,0.12);
  --accent-glow: rgba(44,123,229,0.30);
  --accent-ink:  #FFFFFF;
  /* Auth screen — vivid blue, animated */
  --auth-bg-1:   #2C7BE5;
  --auth-bg-2:   #1E62C7;
  --auth-bg-3:   #0F3A8B;
  --auth-glass:        rgba(255,255,255,0.10);
  --auth-glass-border: rgba(255,255,255,0.22);
  /* Informational + status colors */
  --cyan:        #27BCFD;          /* Falcon "info" */
  --cyan-dim:    rgba(39,188,253,0.10);
  --cyan-glow:   rgba(39,188,253,0.20);
  --gold:        #F5803E;          /* Falcon "warning" */
  --gold-dim:    rgba(245,128,62,0.10);
  --green:       #00D27A;          /* Falcon "success" */
  --green-dim:   rgba(0,210,122,0.10);
  --red:         #E63757;          /* Falcon "danger" */
  --red-dim:     rgba(230,55,87,0.10);
  /* Text — Falcon dark mode */
  --text:        #F9FAFD;          /* headings */
  --text-body:   #D8E2EF;          /* paragraph */
  --text-muted:  #9DA9BB;          /* labels */
  --text-dim:    #748194;          /* very muted */
  /* Layout */
  --sidebar-w:   220px;
  --topbar-h:    56px;
  --font-ui:     'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --radius:      8px;
  --radius-sm:   5px;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --transition:  0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%; background:var(--bg); color:var(--text-body);
  font-family:var(--font-ui);
  font-size:14px; line-height:1.5; font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:0;
}
h1,h2,h3,h4,h5,h6 { color:var(--text); font-weight:600; line-height:1.2; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

/* ─── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--card-border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ─── Page System ────────────────────────────────────── */
.app-page         { display:none; }
.app-page.active  { display:block; }
.page             { display:none; }
.page.active      { display:block; animation:pageIn 0.35s var(--ease, ease); }
.hidden           { display:none !important; }

@keyframes pageIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════
   AUTH PAGES — Glass card on a moving blue gradient
   with three floating blob shapes that orbit slowly.
═══════════════════════════════════════ */
.auth-shell {
  min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 800px at 20% 30%, rgba(96,165,250,0.55), transparent 65%),
    radial-gradient(950px 800px at 80% 75%, rgba(59,130,246,0.55), transparent 65%),
    linear-gradient(135deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 55%, var(--auth-bg-3) 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: auth-bg-pan 22s ease-in-out infinite;
}
@keyframes auth-bg-pan {
  0%,100% { background-position: 0% 0%, 100% 100%, 0% 0%; }
  50%     { background-position: 100% 50%, 0% 0%, 100% 50%; }
}
/* Three floating blobs — visible movement, no blur-heavy filter */
.auth-shell::before,
.auth-shell::after,
.auth-shell > .auth-blob-3 {
  content:''; position:absolute; pointer-events:none; z-index:0;
  filter:blur(40px); opacity:.75;
  border-radius:60% 40% 65% 35% / 55% 45% 55% 45%;
}
.auth-shell::before {
  width:520px; height:520px; left:-120px; top:32%;
  background:radial-gradient(circle at 30% 30%, rgba(191,219,254,.95), rgba(96,165,250,.55) 60%, transparent 80%);
  animation:auth-float-1 14s ease-in-out infinite;
}
.auth-shell::after {
  width:560px; height:560px; right:-150px; top:6%;
  background:radial-gradient(circle at 60% 40%, rgba(147,197,253,.85), rgba(59,130,246,.45) 60%, transparent 80%);
  animation:auth-float-2 17s ease-in-out infinite;
}
.auth-shell .auth-blob-3 {
  width:380px; height:380px; left:46%; bottom:-130px;
  background:radial-gradient(circle at 40% 50%, rgba(165,180,252,.7), rgba(99,102,241,.35) 65%, transparent 80%);
  animation:auth-float-3 19s ease-in-out infinite;
}
@keyframes auth-float-1 {
  0%   { transform:translate(0,0)        rotate(0deg)   scale(1);   border-radius:60% 40% 65% 35% / 55% 45% 55% 45%; }
  25%  { transform:translate(60px,40px)  rotate(40deg)  scale(1.08); border-radius:55% 45% 50% 50% / 60% 40% 60% 40%; }
  50%  { transform:translate(120px,80px) rotate(80deg)  scale(.95); border-radius:50% 50% 60% 40% / 55% 45% 50% 50%; }
  75%  { transform:translate(40px,140px) rotate(-30deg) scale(1.05); border-radius:45% 55% 55% 45% / 50% 60% 40% 50%; }
  100% { transform:translate(0,0)        rotate(0deg)   scale(1);   border-radius:60% 40% 65% 35% / 55% 45% 55% 45%; }
}
@keyframes auth-float-2 {
  0%   { transform:translate(0,0)         rotate(0deg)   scale(1);   }
  33%  { transform:translate(-80px,60px)  rotate(-25deg) scale(1.10); }
  66%  { transform:translate(-30px,140px) rotate(20deg)  scale(.92); }
  100% { transform:translate(0,0)         rotate(0deg)   scale(1);   }
}
@keyframes auth-float-3 {
  0%   { transform:translate(0,0)         rotate(0deg)   scale(1);   }
  50%  { transform:translate(-110px,-80px) rotate(45deg)  scale(1.12); }
  100% { transform:translate(0,0)         rotate(0deg)   scale(1);   }
}

.auth-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 36px; position:relative; z-index:5;
}
.auth-brand { display:flex; align-items:center; gap:10px; }
.auth-brand-name {
  font-family:var(--font-ui);
  font-size:18px; font-weight:700; color:#FFFFFF; letter-spacing:1.4px;
}
.auth-clock-badge {
  font-family:var(--font-mono); font-size:13px; font-weight:500; color:#FFFFFF;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25);
  padding:8px 14px; border-radius:8px; backdrop-filter:blur(10px);
}

.auth-center {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; position:relative; z-index:5;
}
.auth-card {
  /* True glassmorphism over a moving gradient */
  background:var(--auth-glass);
  border:1px solid var(--auth-glass-border);
  border-radius:24px; padding:46px 42px; width:100%; max-width:460px;
  box-shadow:0 30px 80px rgba(2, 20, 60, 0.35),
             inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  animation:fadeSlideUp .55s var(--ease, ease);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.auth-card:hover { box-shadow:0 36px 96px rgba(2, 20, 60, 0.42), inset 0 1px 0 rgba(255,255,255,0.25); }
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.auth-card .brand-eyebrow {
  font-family:var(--font-ui);
  font-size:13px; font-weight:500; color:rgba(255,255,255,0.82);
  letter-spacing:.3px; margin-bottom:2px;
}
.auth-card h2 {
  font-family:var(--font-ui);
  color:#FFFFFF; font-size:38px; font-weight:700; margin-bottom:8px;
  letter-spacing:-0.6px; line-height:1.1;
}
.auth-card .subtitle {
  font-family:var(--font-ui);
  color:rgba(255,255,255,0.80); font-size:14px; margin-bottom:26px;
  font-weight:400;
}

.auth-card label {
  font-family:var(--font-ui);
  font-size:13px; font-weight:500; color:#FFFFFF;
  text-transform:none; letter-spacing:.1px;
  display:block; margin-bottom:6px; margin-top:14px;
}
.auth-card input {
  display:block; width:100%; padding:13px 16px;
  font-family:var(--font-ui); font-weight:400;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.85); border-radius:10px;
  font-size:15px; color:#0B1727;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.auth-card input::placeholder { color:#9DA9BB; font-weight:400; }
.auth-card input:focus {
  border-color:#FFFFFF; outline:none;
  box-shadow:0 0 0 4px rgba(255,255,255,0.24);
  transform:translateY(-1px);
}

.auth-card .btn-primary {
  width:100%; padding:14px; margin-top:22px;
  background:#0B1F3A; color:#FFFFFF; border:none; border-radius:10px;
  font-family:var(--font-ui);
  font-size:15px; font-weight:600;
  cursor:pointer; transition:all .25s var(--ease); letter-spacing:.2px;
  box-shadow:0 8px 24px rgba(11,31,58,0.32);
}
.auth-card .btn-primary:hover {
  background:#102E5C;
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(11,31,58,0.45);
}
.auth-card .btn-primary:active { transform:translateY(0); }
.auth-card .btn-primary:disabled {
  background:rgba(11,31,58,0.5); cursor:not-allowed; transform:none; box-shadow:none;
}

.auth-card .auth-error {
  margin-top:14px; font-size:13px; color:#FECACA;
  background:rgba(220,38,38,0.20); padding:10px 14px; border-radius:8px;
  border-left:3px solid #EF4444; display:none;
}
.auth-card .auth-error.show { display:block; }

.auth-card .pending-notice {
  display:none; background:rgba(250,204,21,0.18); border:1px solid rgba(250,204,21,0.4);
  border-radius:10px; padding:14px; margin-top:12px; text-align:center;
}
.auth-card .pending-notice.show { display:block; }
.auth-card .pending-notice p { color:#FEF3C7; font-size:14px; }

.auth-card .link-btn,
.auth-card a {
  color:#DBEAFE; font-weight:500; text-decoration:none;
  cursor:pointer; transition:color .2s;
}
.auth-card .link-btn:hover,
.auth-card a:hover { color:#FFFFFF; text-decoration:underline; }

.auth-card .btn-outline {
  display:inline-block; padding:11px 26px;
  background:rgba(255,255,255,0.14); color:#FFFFFF;
  border:1.5px solid rgba(255,255,255,0.45); border-radius:10px;
  text-decoration:none; font-weight:600; font-size:14px; cursor:pointer;
  font-family:var(--font-ui);
  transition:all .25s var(--ease);
}
.auth-card .btn-outline:hover {
  background:rgba(255,255,255,0.24); border-color:rgba(255,255,255,0.65);
  transform:translateY(-1px);
}

.auth-card hr.auth-divider {
  border:none; border-top:1px solid rgba(255,255,255,0.22);
  margin:24px 0 18px;
}

.pw-wrapper { position:relative; }
.pw-wrapper input { padding-right:74px; }
.toggle-pw {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:rgba(11,23,39,0.06); border:none; color:#475569;
  font-family:var(--font-ui);
  font-size:12px; font-weight:600;
  cursor:pointer; line-height:1; padding:7px 12px; border-radius:6px;
  transition:all .2s; width:auto !important;
}
.toggle-pw:hover { background:rgba(11,23,39,0.14); color:#0B1727; }

.auth-card .spinner {
  display:none; justify-content:center; gap:6px; padding:14px 0;
}
.auth-card .spinner.show { display:flex; }
.auth-card .spinner div {
  width:8px; height:8px; border-radius:50%; background:#FFFFFF;
  animation:spinner-bounce 1.2s infinite ease-in-out;
}
.auth-card .spinner div:nth-child(2) { animation-delay:.2s; }
.auth-card .spinner div:nth-child(3) { animation-delay:.4s; }
@keyframes spinner-bounce {
  0%,80%,100% { opacity:.3; transform:scale(.85); }
  40%         { opacity:1;  transform:scale(1.0);  }
}

/* Default-state legacy auth bits used outside auth-card (kept minimal) */
.info-box {
  background:var(--gold-dim); border:1px solid rgba(245,128,62,0.25);
  border-radius:8px; padding:12px 14px; margin-bottom:18px;
  font-size:13px; color:var(--gold); text-align:center;
}
.auth-success { display:none; text-align:center; padding:20px; }
.auth-success.show { display:block; }
.success-title { color:#FFFFFF; font-size:22px; font-weight:700; margin-bottom:8px; }
.success-message { color:rgba(255,255,255,0.85); font-size:14px; line-height:1.7; margin-bottom:24px; }

/* ── Dashboard / Reports input + button defaults ────── */
label {
  font-family:var(--font-ui);
  font-size:12px; font-weight:600; color:var(--text-body);
  text-transform:none; letter-spacing:.2px;
  display:block; margin-bottom:6px; margin-top:14px;
}
input, select, textarea {
  display:block; width:100%; padding:10px 14px;
  background:var(--bg2); border:1px solid var(--card-border); border-radius:6px;
  font-size:14px; font-weight:400; color:var(--text);
  font-family:var(--font-ui);
  transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px var(--accent-dim);
}

/* ── ACCENT CTA — Falcon-style primary button ──────── */
.btn-primary {
  width:100%; padding:11px 18px; margin-top:16px;
  background:var(--accent); color:#FFFFFF; border:none; border-radius:6px;
  font-size:14px; font-weight:600; font-family:var(--font-ui);
  cursor:pointer; transition:all var(--transition); letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.btn-primary:hover  { background:var(--accent-3); transform:translateY(-1px); box-shadow:0 6px 16px var(--accent-glow); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { background:var(--card-border); color:var(--text-muted); cursor:not-allowed; transform:none; box-shadow:none; }

.auth-error {
  margin-top:14px; font-size:13px; color:var(--red);
  background:var(--red-dim); padding:10px 14px; border-radius:6px;
  border-left:3px solid var(--red); display:none;
}
.auth-error.show { display:block; }

.pending-notice {
  display:none; background:var(--gold-dim); border:1px solid rgba(245,128,62,0.25);
  border-radius:6px; padding:14px; margin-top:12px; text-align:center;
}
.pending-notice.show { display:block; }
.pending-notice p { color:var(--gold); font-size:13px; }

.auth-link-row { text-align:center; margin-top:20px; font-size:13px; color:var(--text-muted); }
.auth-link-row a { color:var(--accent); text-decoration:none; font-weight:600; }
.auth-link-row a:hover { text-decoration:underline; }

.btn-outline {
  display:inline-block; padding:10px 20px;
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); border-radius:6px;
  text-decoration:none; font-weight:600; font-size:13px; cursor:pointer;
  font-family:var(--font-ui);
  transition:all var(--transition);
}
.btn-outline:hover { background:var(--accent); color:#FFFFFF; }

.login-hint { text-align:center; font-size:12px; color:var(--text-muted); margin-top:16px; font-family:var(--font-mono); }
.auth-divider { border:none; border-top:1px solid var(--card-border); margin:22px 0; }

/* ═══════════════════════════════════════
   DASHBOARD SHELL — Falcon-style
═══════════════════════════════════════ */
.dash-shell {
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height:100vh;
  transition: grid-template-columns .26s var(--ease);
}
/* When collapsed, the GRID COLUMN itself shrinks so the content reflows
   into the reclaimed space (no empty gap). */
.dash-shell.sidebar-collapsed {
  grid-template-columns: 64px 1fr;
}

/* ─── Top Bar ──────────────────────── */
.dash-topbar {
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr auto 1fr;   /* left | centered clock | right */
  align-items:center;
  padding:0 20px; height:var(--topbar-h);
  background:var(--bg2); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--card-border);
  position:sticky; top:0; z-index:500;
  box-shadow:0 1px 3px rgba(0,0,0,.10);
}
.dash-topbar > .topbar-left   { display:flex; align-items:center; gap:12px; justify-self:start; }
.dash-topbar > .topbar-center { justify-self:center; }
.dash-topbar > .topbar-actions{ justify-self:end; }
.topbar-brand { display:flex; align-items:center; gap:10px; }
.topbar-brand-name {
  font-family:var(--font-ui);
  font-size:16px; font-weight:700; color:var(--text); letter-spacing:.8px;
}
.topbar-brand-sub  { font-size:11px; font-weight:500; color:var(--text-muted); letter-spacing:.3px; margin-top:2px; }

.topbar-center { display:flex; align-items:center; justify-content:center; gap:10px; }
.status-pill {
  display:flex; align-items:center; gap:6px;
  background:var(--accent-dim); border:1px solid rgba(44,123,229,0.30);
  border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600;
  color:var(--accent); letter-spacing:.3px;
}
.status-dot { display:inline-block; width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.topbar-time {
  font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--text-body);
  background:var(--bg); border:1px solid var(--card-border);
  padding:7px 14px; border-radius:6px;
  display:inline-flex; align-items:center; line-height:1;
}

.topbar-actions { display:flex; align-items:center; gap:8px; }
.btn-top {
  padding:8px 16px; font-size:13px; font-weight:600; border-radius:6px;
  cursor:pointer; transition:all var(--transition); white-space:nowrap; letter-spacing:.2px;
  width:auto !important; font-family:var(--font-ui);
}
.btn-top-ghost { background:transparent; color:var(--accent); border:1px solid var(--card-border); }
.btn-top-ghost:hover { border-color:var(--accent); background:var(--accent-dim); }
.btn-top-danger { background:transparent; color:var(--red); border:1px solid rgba(230,55,87,0.30); }
.btn-top-danger:hover { background:var(--red); color:#FFFFFF; border-color:var(--red); }

/* ─── Sidebar ──────────────────────── */
.dash-sidebar {
  background:var(--sidebar-bg); border-right:1px solid var(--card-border);
  padding:16px 12px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto;
  width:100%; transition:width .26s var(--ease);
}
.sidebar-section-label {
  font-family:var(--font-ui);
  font-size:10.5px; font-weight:600; color:var(--text-muted); letter-spacing:1px;
  text-transform:uppercase; padding:16px 12px 8px;
}
.sidebar-section-label:first-child { padding-top:4px; }
.nav-btn {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:6px;
  font-family:var(--font-ui);
  font-size:14px; font-weight:500;
  background:transparent; color:var(--text-body); border:none; width:100%;
  text-align:left; cursor:pointer; transition:all var(--transition);
}
.nav-btn:hover { background:var(--bg2); color:var(--text); }
.nav-btn.active {
  background:var(--accent-dim); color:var(--accent);
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-btn-icon { font-size:16px; width:18px; text-align:center; flex-shrink:0; }

.sidebar-submeter-card {
  background:var(--bg2); border:1px solid var(--card-border); border-radius:8px;
  padding:14px; margin:4px 4px 0;
}
.sidebar-submeter-label {
  font-family:var(--font-ui);
  font-size:11px; color:var(--text-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px;
}
.submeter-btns { display:flex; flex-direction:column; gap:6px; }
.submeter-btn {
  padding:9px 12px; border-radius:6px; font-size:13px; font-weight:500;
  border:1px solid var(--card-border); background:transparent; color:var(--text-body);
  cursor:pointer; transition:all var(--transition); text-align:left; width:100%;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-ui);
}
.submeter-btn:hover { border-color:var(--accent); color:var(--text); background:var(--accent-dim); }
.submeter-btn.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); font-weight:600; }
.submeter-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.submeter-btn.active .submeter-dot { background:var(--accent); }

/* "Add submeter" outline-dashed button */
.add-submeter-btn {
  margin-top:10px; padding:9px 12px; border-radius:6px;
  font-family:var(--font-ui);
  font-size:13px; font-weight:600;
  background:transparent; color:var(--accent); border:1px dashed rgba(44,123,229,0.45);
  cursor:pointer; transition:all var(--transition); width:100%; letter-spacing:.1px;
}
.add-submeter-btn:hover { background:var(--accent-dim); border-style:solid; }

/* ─── Main Content ─────────────────── */
.dash-content {
  background:var(--bg);
  overflow-y:auto; padding:24px;
}

/* ─── KPI Cards (Falcon-style) ─────── */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:12px; }
.kpi-card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:13px 16px; position:relative; overflow:hidden;
  transition:all var(--transition);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.kpi-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.25); border-color:var(--accent); }
.kpi-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.kpi-label {
  font-family:var(--font-ui);
  font-size:11px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.7px;
}
.kpi-value {
  font-family:var(--font-mono);
  font-size:23px; font-weight:700; color:var(--text); line-height:1.05; margin-bottom:0;
}
.kpi-sub { font-size:12px; color:var(--text-muted); font-family:var(--font-ui); font-weight:500; }
.kpi-card-blue  { --card-accent: var(--accent); }
.kpi-card-gold  { --card-accent: var(--gold); }
.kpi-card-green { --card-accent: var(--green); }

/* ─── Section Header ───────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-title {
  font-family:var(--font-ui);
  font-size:13px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1px;
  display:flex; align-items:center; gap:8px;
}
.section-title::before {
  content:''; display:block; width:3px; height:14px;
  background:var(--accent); border-radius:2px;
}

/* ─── Chart Cards (Falcon-style) ───── */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.chart-card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:18px 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.chart-card-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; flex-wrap:wrap; gap:6px;
  padding-bottom:12px; border-bottom:1px solid var(--card-border);
}
.chart-card-title {
  font-family:var(--font-ui);
  font-size:15px; font-weight:600; color:var(--text);
}
.chart-card-badge {
  font-size:11px; font-weight:600; font-family:var(--font-ui);
  background:var(--accent-dim); color:var(--accent); border:1px solid rgba(44,123,229,0.20);
  padding:4px 10px; border-radius:4px; letter-spacing:.3px;
}

/* ─── Alert Bar ────────────────────── */
.alert-bar {
  background:var(--red-dim); border:1px solid rgba(248,113,113,0.2);
  border-radius:10px; padding:14px 18px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  animation:alert-pulse 2s infinite;
}
@keyframes alert-pulse {
  0%,100%{ border-color:rgba(248,113,113,0.2); }
  50%{ border-color:rgba(248,113,113,0.5); }
}
.alert-bar-text { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--red); }
.btn-ai-recommend {
  padding:8px 16px; background:var(--red); color:#fff; border:none;
  border-radius:7px; font-size:12px; font-weight:800; cursor:pointer;
  transition:all .2s; white-space:nowrap; width:auto !important; animation:none !important;
  font-family:var(--font-ui);
}
.btn-ai-recommend:hover { background:#ef4444; transform:translateY(-1px); }

/* ─── Camera Cards ─────────────────── */
.cam-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.cam-card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:12px; padding:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.cam-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; gap:8px; flex-wrap:wrap;
}
.cam-title { font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.cam-status-pill {
  font-size:10px; font-weight:700; font-family:var(--font-mono);
  padding:3px 8px; border-radius:20px; display:flex; align-items:center; gap:5px;
}
.cam-status-offline { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.15); }
.cam-status-live    { background:var(--green-dim); color:var(--green); border:1px solid rgba(74,222,128,.15); }
.cam-status-connecting { background:var(--gold-dim); color:var(--gold); border:1px solid rgba(251,191,36,.15); }
.cam-body {
  background:#F0F4F8; border:1px solid var(--card-border); border-radius:8px;
  width:100%; height:240px;
  position:relative; overflow:hidden; flex-shrink:0;
}
.cam-body img {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:contain;
  display:none; border-radius:6px;
}
.cam-placeholder { 
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--text-muted); font-size:12px; text-align:center; 
  padding:20px; line-height:1.7; font-family:var(--font-mono);
  width:100%;
}
.cam-footer { margin-top:10px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.cam-ts { font-size:11px; font-family:var(--font-mono); color:var(--text-muted); }
.ocr-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--cyan-dim); border:1px solid rgba(56,189,248,.15);
  color:var(--cyan); border-radius:6px; font-size:11px; font-weight:700;
  font-family:var(--font-mono); padding:3px 9px;
}

/* Countdown Ring */
.countdown-ring { width:26px; height:26px; }
.countdown-ring svg { transform:rotate(-90deg); display:block; }
.countdown-ring circle { fill:none; stroke:var(--card-border); stroke-width:3; }
.countdown-ring .progress { stroke:var(--cyan); stroke-width:3; stroke-dasharray:75.4; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear; }

/* ─── Buttons shared ───────────────── */
.btn-sm {
  padding:6px 13px; font-size:11px; font-weight:700; border-radius:6px;
  cursor:pointer; transition:all .2s; white-space:nowrap; letter-spacing:.3px;
  width:auto !important; font-family:var(--font-ui);
}
.btn-sm-cyan   { background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(56,189,248,.2); }
.btn-sm-cyan:hover { background:var(--cyan); color:#fff; }
.btn-sm-green  { background:var(--green-dim); color:var(--green); border:1px solid rgba(74,222,128,.2); }
.btn-sm-green:hover { background:var(--green); color:#fff; }
.btn-sm-ghost  { background:var(--bg); color:var(--text-dim); border:1px solid var(--card-border); }
.btn-sm-ghost:hover { border-color:var(--cyan); color:var(--cyan); }
.btn-sm-danger { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.2); }
.btn-sm-danger:hover { background:var(--red); color:#fff; }
.btn-sm-gold   { background:var(--gold-dim); color:var(--gold); border:1px solid rgba(251,191,36,.2); }
.btn-sm-gold:hover { background:var(--gold); color:#fff; }

/* ─── Rate Settings Modal ─── */
.rate-modal-overlay {
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,0.3); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.rate-modal-overlay.show { display:flex; }
.rate-modal-box {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:16px; padding:30px; width:100%; max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,0.4);
  animation:fadeSlideUp .25s ease;
}
.rate-modal-box h3 { font-size:16px; font-weight:800; color:var(--text); margin-bottom:6px; }
.rate-modal-box p  { font-size:12px; color:var(--text-muted); margin-bottom:20px; line-height:1.6; }
.rate-input-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.rate-input-row label { font-size:12px; color:var(--text-dim); font-weight:700; white-space:nowrap; }
.rate-input-row input {
  flex:1; padding:10px 12px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--bg);
  color:var(--text); font-family:var(--font-mono); font-size:14px;
}
.rate-input-row input:focus { border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--gold-dim); }
.rate-preview {
  background:var(--bg); border:1px solid var(--card-border);
  border-radius:8px; padding:12px 14px; margin-bottom:18px;
  font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
  line-height:1.8;
}
.rate-preview span { color:var(--gold); font-weight:700; }

input[type="hidden"] { display:none !important; }

/* ─── History Section ──────────────── */
.history-panel {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:12px; padding:24px; max-width:800px; margin:0 auto;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.history-panel h2 { font-size:18px; font-weight:800; color:var(--text); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.history-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; margin-bottom:10px; background:var(--bg);
  border:1px solid var(--card-border); border-radius:10px;
  transition:all .2s; gap:12px; flex-wrap:wrap;
}
.history-item:hover { border-color:rgba(56,189,248,.2); background:var(--card-hover); }
.history-meta { display:flex; flex-direction:column; gap:4px; flex:1; }
.history-label { color:var(--text); font-weight:700; font-size:14px; }
.history-stats { color:var(--text-muted); font-size:12px; font-family:var(--font-mono); }
.live-badge {
  background:var(--green-dim); color:var(--green); border:1px solid rgba(74,222,128,.2);
  border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700;
}
.history-btn-group { display:flex; gap:8px; }

/* ─── Recommendations ──────────────── */
.reco-panel {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:12px; padding:28px; max-width:700px; margin:0 auto;
}
.reco-panel h2 { font-size:18px; font-weight:800; color:var(--cyan); margin-bottom:16px; }
.reco-panel ul { list-style:none; }
.reco-panel ul li {
  padding:10px 14px; margin-bottom:8px; background:var(--bg);
  border-left:3px solid var(--cyan); border-radius:0 8px 8px 0;
  font-size:13px; line-height:1.6; color:var(--text-dim);
  transition:all .2s;
}
.reco-panel ul li:hover { background:var(--card-hover); color:var(--text); }

/* ─── Modals ───────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.3); backdrop-filter:blur(6px);
  z-index:3000; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show { display:flex; }
.modal-box {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:16px; width:100%; max-width:560px; max-height:85vh;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
  animation:modal-pop .25s ease;
}
@keyframes modal-pop { from{transform:scale(.88);opacity:0} to{transform:scale(1);opacity:1} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--card-border); flex-shrink:0;
}
.modal-title { font-size:15px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.modal-body { overflow-y:auto; flex:1; padding:20px; }

/* PDF modal */
.pdf-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); z-index:9999; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.pdf-modal.show { display:flex; }
.pdf-modal-content {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:14px; width:100%; max-width:900px; height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.pdf-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--card-border);
  gap:12px; flex-wrap:wrap; flex-shrink:0;
}
.pdf-modal-title { font-size:14px; font-weight:800; color:var(--text); }
.pdf-modal-actions { display:flex; gap:8px; }

/* Logout modal */
.logout-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); z-index:3000; align-items:center; justify-content:center; }
.logout-modal-overlay.show { display:flex; }
.logout-modal {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:16px; padding:36px 32px 28px; width:100%; max-width:340px;
  text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.12); animation:modal-pop .25s ease;
}
.logout-modal-icon { font-size:40px; margin-bottom:14px; }
.logout-modal h2 { color:var(--text); font-size:18px; font-weight:800; margin-bottom:8px; }
.logout-modal p { color:var(--text-muted); font-size:13px; margin-bottom:26px; }
.logout-modal-btns { display:flex; gap:12px; }
.btn-logout-yes { flex:1; padding:12px; background:var(--cyan); color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:800; cursor:pointer; transition:all .2s; width:auto!important; font-family:var(--font-ui); }
.btn-logout-yes:hover { box-shadow:0 6px 20px rgba(56,189,248,.2); }
.btn-logout-no { flex:1; padding:12px; background:var(--bg); color:var(--text-dim); border:1px solid var(--card-border); border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; width:auto!important; font-family:var(--font-ui); }
.btn-logout-no:hover { border-color:var(--cyan); color:var(--cyan); }

/* AI modal content */
.ai-loading { display:flex; flex-direction:column; align-items:center; gap:14px; padding:30px 0; color:var(--text-muted); font-size:13px; }
.ai-spinner { width:36px; height:36px; border:3px solid var(--card-border); border-top:3px solid var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.ai-content { font-size:13px; line-height:1.8; color:var(--text-dim); }
.ai-content h3 { color:var(--cyan); font-size:13px; margin:14px 0 7px; border-left:3px solid var(--cyan); padding-left:10px; }
.ai-content ul { margin-left:18px; margin-bottom:10px; }
.ai-content ul li { margin-bottom:5px; }
.ai-error { color:var(--red); background:var(--red-dim); padding:12px 14px; border-radius:8px; border-left:3px solid var(--red); font-size:13px; }

/* Leak history */
.leak-history-item { background:var(--bg); border:1px solid var(--card-border); border-radius:10px; margin-bottom:10px; overflow:hidden; transition:border-color .2s; }
.leak-history-item:hover { border-color:rgba(56,189,248,.2); }
.leak-history-item-header { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; cursor:pointer; flex-wrap:wrap; gap:8px; }
.leak-history-meta { display:flex; flex-direction:column; gap:3px; }
.leak-history-date { color:var(--text); font-weight:700; font-size:13px; }
.leak-history-stats { color:var(--text-muted); font-size:11px; font-family:var(--font-mono); }
.leak-history-badge { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.2); border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.leak-history-item-body { display:none; padding:0 16px 16px; border-top:1px solid var(--card-border); }
.leak-history-item-body.open { display:block; }
.leak-ai-content { color:var(--text-dim); font-size:13px; line-height:1.7; margin-top:12px; }
.leak-ai-content h3 { color:var(--cyan); font-size:12px; margin:10px 0 5px; border-left:3px solid var(--cyan); padding-left:8px; }
.leak-ai-content ul { margin-left:16px; }
.leak-ai-content ul li { margin-bottom:4px; }
.btn-view-ai { margin-top:12px; padding:7px 14px; background:var(--bg); color:var(--cyan); border:1px solid rgba(56,189,248,.2); border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; transition:all .2s; width:auto!important; font-family:var(--font-ui); }
.btn-view-ai:hover { background:var(--cyan); color:#fff; }
.leak-ai-loading { display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:13px; margin-top:10px; }
.leak-ai-mini-spinner { width:16px; height:16px; border:2px solid var(--card-border); border-top:2px solid var(--cyan); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0; }

/* ─── Admin ────────────────────────── */
.admin-shell { min-height:100vh; background:var(--bg); }
.admin-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:48px; background:var(--card);
  border-bottom:1px solid var(--card-border); position:sticky; top:0; z-index:500;
  gap:12px;
}
.admin-topbar-left { display:flex; align-items:center; }
/* Absolutely centered clock — immune to unequal left/right widths */
.admin-topbar #adminClock {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0;
}
.admin-topbar .topbar-actions { display:flex; align-items:center; gap:8px; }
.admin-main { max-width:1100px; margin:0 auto; padding:28px 24px; }
.admin-header { margin-bottom:28px; }
.admin-header h2 { font-size:26px; font-weight:800; color:var(--text); }
.admin-header p { color:var(--text-muted); font-size:13px; margin-top:4px; }
.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.admin-stat-card { background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:20px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.admin-stat-card h3 { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.admin-stat-card .stat-value { font-size:36px; font-weight:800; font-family:var(--font-mono); color:var(--cyan); }
.admin-section { background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:16px 18px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.admin-section h3 { font-size:15px; font-weight:800; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.pending-badge-count { background:var(--red); color:#fff; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:800; }
.user-card { background:var(--bg); border:1px solid var(--card-border); border-radius:10px; padding:18px 20px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; transition:all .2s; gap:12px; flex-wrap:wrap; }
.user-card:hover { border-color:rgba(56,189,248,.2); }
.user-info h4 { color:var(--text); font-size:15px; font-weight:700; margin-bottom:4px; }
.user-info p { color:var(--text-muted); font-size:12px; font-family:var(--font-mono); }
.user-actions { display:flex; gap:8px; }
.btn-approve { background:var(--green-dim); color:var(--green); border:1px solid rgba(74,222,128,.2); padding:8px 14px; border-radius:6px; font-weight:700; font-size:12px; cursor:pointer; transition:all .2s; font-family:var(--font-ui); }
.btn-approve:hover { background:var(--green); color:#fff; }
.btn-reject { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.2); padding:8px 14px; border-radius:6px; font-weight:700; font-size:12px; cursor:pointer; transition:all .2s; font-family:var(--font-ui); }
.btn-reject:hover { background:var(--red); color:#fff; }
.btn-remove { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.2); padding:7px 13px; border-radius:6px; font-weight:700; font-size:12px; cursor:pointer; transition:all .2s; font-family:var(--font-ui); }
.btn-remove:hover { background:var(--red); color:#fff; }
.user-status { padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700; }
.status-approved { background:var(--green-dim); color:var(--green); border:1px solid rgba(74,222,128,.2); }
.empty-state { text-align:center; padding:32px; color:var(--text-muted); }
.empty-state-icon { font-size:40px; margin-bottom:12px; }
.admin-only-badge { background:linear-gradient(135deg,var(--gold),#ea580c); color:#fff; padding:5px 14px; border-radius:20px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.back-to-dashboard { background:var(--bg); color:var(--cyan); border:1px solid rgba(56,189,248,.2); padding:8px 16px; border-radius:7px; font-weight:700; font-size:12px; cursor:pointer; transition:all .2s; width:auto!important; font-family:var(--font-ui); }
.back-to-dashboard:hover { background:var(--cyan); color:#fff; }
.toast { position:fixed; top:72px; right:20px; background:var(--green-dim); color:var(--green); border:1px solid rgba(74,222,128,.2); padding:13px 22px; border-radius:8px; font-weight:700; font-size:13px; transform:translateX(420px); transition:transform .3s ease; z-index:4000; }
.toast.show { transform:translateX(0); }
.toast.error { background:var(--red-dim); color:var(--red); border-color:rgba(248,113,113,.2); }
.confirm-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:5000; opacity:0; pointer-events:none; transition:opacity .2s; }
.confirm-modal-overlay.show { opacity:1; pointer-events:all; }
.confirm-modal-box { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:30px 32px; max-width:360px; width:90%; box-shadow:0 24px 60px rgba(0,0,0,.12); transform:scale(.9); transition:transform .2s; text-align:center; }
.confirm-modal-overlay.show .confirm-modal-box { transform:scale(1); }
.confirm-modal-icon { font-size:38px; margin-bottom:14px; }
.confirm-modal-title { color:var(--text); font-size:17px; font-weight:800; margin-bottom:8px; }
.confirm-modal-message { color:var(--text-muted); font-size:13px; margin-bottom:24px; line-height:1.5; }
.confirm-modal-actions { display:flex; gap:12px; justify-content:center; }
.modal-btn-cancel { padding:10px 22px; background:var(--bg); color:var(--text-muted); border:1px solid var(--card-border); border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; font-family:var(--font-ui); }
.modal-btn-cancel:hover { color:var(--text); border-color:var(--text-muted); }
.modal-btn-confirm { padding:10px 22px; background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.2); border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; font-family:var(--font-ui); }
.modal-btn-confirm:hover { background:var(--red); color:#fff; }

/* ─── Responsive ───────────────────── */

/* Tablet — sidebar narrows, KPI grid goes 2-up */
@media (max-width:1100px) {
  :root { --sidebar-w: 200px; }
  .kpi-row.kpi-row-6 { grid-template-columns:repeat(2, 1fr); }
  .charts-grid { grid-template-columns:1fr; }
}

/* Mobile — sidebar becomes an off-canvas slide-over */
@media (max-width:900px) {
  .dash-shell { grid-template-columns:1fr; }     /* content takes full width */
  .dash-shell.sidebar-collapsed { grid-template-columns:1fr; }

  .dash-sidebar {
    position:fixed; top:var(--topbar-h); left:0;
    width:264px; max-width:84vw;
    height:calc(100vh - var(--topbar-h));
    transform:translateX(-100%);
    transition:transform .28s var(--ease);
    z-index:1200;
    box-shadow:6px 0 24px rgba(0,0,0,0.28);
  }
  /* On mobile we REUSE the .sidebar-collapsed flag to mean "drawer open" */
  .dash-shell.mobile-drawer-open .dash-sidebar { transform:translateX(0); }
  /* Dim backdrop behind the drawer */
  .mobile-drawer-backdrop {
    position:fixed; inset:0; top:var(--topbar-h);
    background:rgba(0,0,0,0.45); z-index:1100;
    opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
  }
  .dash-shell.mobile-drawer-open .mobile-drawer-backdrop { opacity:1; pointer-events:auto; }

  /* Never apply the icon-rail collapse styling on mobile — the drawer
     always shows full labels. */
  .dash-shell.sidebar-collapsed .dash-sidebar { width:264px; }
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-btn { font-size:14px; line-height:1.4; padding:10px 14px; justify-content:flex-start; gap:10px; }
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-brand-text,
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-section-label,
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-group-chevron,
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-group,
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-submeter-card,
  .dash-shell.sidebar-collapsed .dash-sidebar .add-submeter-btn,
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-active-bldg { display:block; }
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-btn::after { content:none; }

  .kpi-row.kpi-row-6 { grid-template-columns:1fr; }
  .admin-stats { grid-template-columns:1fr; }
  .dash-content { padding:16px; }
}

@media (max-width:600px) {
  .topbar-center { display:none; }
  .dash-topbar { grid-template-columns:auto 1fr; padding:0 12px; }
  .dash-topbar > .topbar-actions { gap:6px; }
  .auth-card { padding:28px 24px; }
  .kpi-value { font-size:22px; }
  .next-capture-heading .nc-time { font-size:42px; }
}

/* ─── Smooth Animations ────────────── */
.app-page { animation: fadeIn 0.4s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.rate-modal-overlay.show .rate-modal-box,
.confirm-modal-overlay.show .confirm-modal-box {
  animation: modalSlideIn 0.3s var(--ease);
}
@keyframes modalSlideIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Falcon (Prium) light palette
═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg:          #EDF2F9;          /* Falcon body bg */
  --bg2:         #FFFFFF;
  --bg3:         #F9FAFD;
  --card:        #FFFFFF;
  --card-border: #D8E2EF;
  --card-hover:  #F5F8FC;
  --glass:       rgba(255,255,255,0.88);
  --glass-border:rgba(216,226,239,0.85);
  --surface:     #FFFFFF;
  --sidebar-bg:  #FFFFFF;
  --shadow:      rgba(15,30,55,0.08);
  /* Falcon primary stays the same — AA-passes on white */
  --accent:      #2C7BE5;
  --accent-2:    #1E62C7;
  --accent-3:    #4E92EC;
  --accent-dim:  rgba(44,123,229,0.10);
  --accent-glow: rgba(44,123,229,0.18);
  --accent-ink:  #FFFFFF;
  --cyan:        #1A7BC7;
  --cyan-dim:    rgba(26,123,199,0.10);
  --cyan-glow:   rgba(26,123,199,0.16);
  --gold:        #B25F19;
  --gold-dim:    rgba(178,95,25,0.10);
  --green:       #008956;
  --green-dim:   rgba(0,137,86,0.10);
  --red:         #BC2C42;
  --red-dim:     rgba(188,44,66,0.08);
  --text:        #344050;          /* Falcon heading */
  --text-body:   #5E6E82;          /* Falcon body */
  --text-muted:  #748194;
  --text-dim:    #5E6E82;
}
html[data-theme="light"] body { background:var(--bg); color:var(--text-body); }
html[data-theme="light"] .dash-topbar { background:#FFFFFF; }
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .cam-card { box-shadow:0 1px 3px var(--shadow); }
html[data-theme="light"] ::-webkit-scrollbar-track { background:var(--bg3); }
html[data-theme="light"] .meter-ring-inner { background:#F3F6FB; }
html[data-theme="light"] .meter-badge {
  background:#FFFFFF !important;
  border-color:rgba(44,123,229,0.4) !important;
}
html[data-theme="light"] .meter-cap-ts { color:#344050 !important; background:rgba(255,255,255,.85) !important; }
html[data-theme="light"] .chart-nav-bar button {
  background:#FFFFFF !important;
  border-color:#D8E2EF !important;
  color:var(--text) !important;
}
html[data-theme="light"] #chartMonthMenu { background:#FFFFFF !important; border-color:#D8E2EF !important; color:var(--text) !important; }
html[data-theme="light"] .topbar-time { color:var(--text); }

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
═══════════════════════════════════════════════════════════════ */
.theme-toggle {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:6px;
  font-family:var(--font-ui);
  font-size:13px; font-weight:600;
  background:transparent; color:var(--text-body); border:1px solid var(--card-border);
  cursor:pointer; transition:all var(--transition); letter-spacing:.1px;
  white-space:nowrap;
}
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); transform:translateY(-1px); }
.theme-toggle .tt-dot {
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 35%, #FDE68A, #F59E0B);
  box-shadow:0 0 6px rgba(245,158,11,.6);
  transition:all .3s var(--ease);
}
html[data-theme="light"] .theme-toggle .tt-dot {
  background:radial-gradient(circle at 60% 35%, #93C5FD, #1E3A8A);
  box-shadow:0 0 6px rgba(30,58,138,.4);
}

/* Smooth interactive transitions everywhere */
.btn-primary, .btn-outline, .btn-top, .nav-btn, .link-btn,
.theme-toggle, .submeter-btn, .toggle-pw, .add-submeter-btn {
  transition:all .22s var(--ease);
}
.btn-outline:hover { transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   METER STAGE — Big "NEXT CAPTURE" heading centered above ring
═══════════════════════════════════════════════════════════════ */
.meter-stage {
  display:flex; flex-direction:column; align-items:center;
  padding:14px 0 10px;
}
.next-capture-heading {
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:16px; line-height:1;
}
.next-capture-heading .nc-label {
  font-family:var(--font-ui);
  font-size:11.5px; font-weight:600;
  color:var(--text-muted); letter-spacing:2.2px; text-transform:uppercase;
  margin-bottom:10px;
}
.next-capture-heading .nc-time {
  font-family:var(--font-mono);
  font-size:48px; font-weight:700;
  color:var(--accent); letter-spacing:.5px;
  text-shadow:0 4px 18px var(--accent-glow);
}
.next-capture-heading .nc-sub {
  font-family:var(--font-ui);
  font-size:13px; font-weight:400;
  color:var(--text-muted); margin-top:10px; letter-spacing:.2px;
}
@media(max-width:600px) {
  .next-capture-heading .nc-time { font-size:38px; }
}

/* Centered single-column meter hero (no right panel) */
.meter-hero.center-only {
  display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:8px 0;
}

/* Hide the legacy countdown chip — it duplicated the heading inside the ring */
.meter-cd { display:none !important; }
/* The big NEXT CAPTURE heading above the ring is the canonical place
   to show the next-capture time. The legacy floating chip inside the
   ring (#captureCountdown) duplicates that and visually escapes the
   circle, so suppress it absolutely regardless of inline overrides. */
#captureCountdown { display:none !important; }
#countdownNum    { display:none !important; }

/* ═══════════════════════════════════════════════════════════════
   FALCON-STYLE POLISH — KPI sparklines + horizontal chart scroll
═══════════════════════════════════════════════════════════════ */

/* KPI card — text + sparkline side by side */
.kpi-flex {
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.kpi-flex-text { flex:1; min-width:0; }
.kpi-spark {
  flex-shrink:0; width:120px; height:44px;
  display:flex; align-items:flex-end;
}
.kpi-spark canvas { width:100% !important; height:100% !important; display:block; }

@media (max-width: 540px) {
  .kpi-spark { width:80px; height:36px; }
}

/* Horizontally scrollable Chart.js canvas wrapper.
   Each daily bar gets at least 36 px (set inline by JS) so that an "all time"
   view spanning 90+ days stays readable and slides under the user's pointer. */
.chart-scroll {
  width:100%; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--card-border) transparent;
  /* Canvas inside has no aspect-ratio, so the wrapper sets the height */
  height: 320px;
}
.chart-scroll::-webkit-scrollbar      { height:8px; }
.chart-scroll::-webkit-scrollbar-track { background:transparent; }
.chart-scroll::-webkit-scrollbar-thumb {
  background:var(--card-border); border-radius:4px;
}
.chart-scroll::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.chart-scroll canvas {
  display:block;
  /* min-width is set programmatically by _chartRefreshView() */
}

/* Subtle hint that more data exists off-screen */
.chart-card { position:relative; }
.chart-card::after {
  content:''; position:absolute; right:16px; top:54px; bottom:24px;
  width:24px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--card) 90%);
  opacity:0; transition:opacity .2s;
}
.chart-card.has-overflow::after { opacity:.85; }

/* Professional polish: compact cards, refined hover states */
.kpi-card { padding:13px 16px; }
.kpi-card .kpi-value { font-size:23px; font-weight:700; letter-spacing:-0.3px; }
.kpi-card .kpi-label { font-size:11px; font-weight:600; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR (Falcon-style) — brand block, expandable nav groups,
   sub-item links, clean icons.
═══════════════════════════════════════════════════════════════ */
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 12px;
  text-decoration:none; color:inherit;
  border-bottom:1px solid var(--card-border);
  margin:-16px -12px 8px;          /* bleed into the sidebar padding */
}
.sidebar-brand-mark {
  width:42px; height:42px; flex-shrink:0;
  display:block;
}
.sidebar-brand-text { line-height:1.1; min-width:0; }
.sidebar-brand-name {
  font-family:var(--font-ui);
  font-size:15px; font-weight:800; color:var(--text);
  letter-spacing:.6px;
}
.sidebar-brand-sub {
  font-size:11px; font-weight:500; color:var(--text-muted);
  letter-spacing:.3px; margin-top:2px;
}

/* Expandable navigation group */
.nav-group-toggle {
  position:relative;
  justify-content:flex-start;
}
.nav-group-chevron {
  margin-left:auto; opacity:0.55;
  transition:transform .25s var(--ease);
}
.nav-group-chevron.open { transform:rotate(90deg); opacity:0.9; }

.nav-group {
  max-height:0; overflow:hidden;
  transition:max-height .3s var(--ease);
  padding-left:8px;
}
.nav-group.open { max-height:480px; }     /* enough for ~10 children */

.nav-sub-list { display:flex; flex-direction:column; gap:2px; }

/* Sub-items inside a nav group */
.nav-sub {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px 8px 36px;
  border-radius:6px;
  font-family:var(--font-ui);
  font-size:13px; font-weight:500;
  background:transparent; color:var(--text-body); border:none;
  width:100%; text-align:left; cursor:pointer;
  transition:all var(--transition);
}
.nav-sub:hover { background:var(--bg2); color:var(--accent); }
.nav-sub.active {
  color:var(--accent); font-weight:600;
}
.nav-sub.active::before {
  content:''; display:inline-block; width:4px; height:4px;
  border-radius:50%; background:var(--accent);
  margin-left:-12px; margin-right:8px;
}
.nav-sub .submeter-dot {
  width:6px; height:6px; border-radius:50%; background:var(--text-muted);
  flex-shrink:0;
}
.nav-sub.active .submeter-dot { background:var(--accent); }

/* Active submeter label below the submeter list */
.sidebar-active-bldg {
  font-family:var(--font-mono);
  font-size:11px; color:var(--text-muted);
  margin:8px 14px 0; line-height:1.4;
}

/* Add Submeter dashed button — keep visible inside the open group */
.nav-group .add-submeter-btn {
  margin:10px 8px 4px;
  width:calc(100% - 16px);
}

/* ═══════════════════════════════════════════════════════════════
   6-CARD KPI GRID
═══════════════════════════════════════════════════════════════ */
.kpi-row.kpi-row-6 {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px; margin-bottom:18px;
}
@media (max-width: 1100px) { .kpi-row.kpi-row-6 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px)  { .kpi-row.kpi-row-6 { grid-template-columns:1fr; } }

/* Additional KPI accent colors used by cards 3 and 6 */
.kpi-card-cyan   { --card-accent: var(--cyan); }
.kpi-card-purple { --card-accent: #A78BFA; }
.kpi-card-red    { --card-accent: var(--red); }

/* Icon-style spark (used when a card has no data series) */
.kpi-spark-icon {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}
.kpi-spark-icon svg { width:100%; height:100%; }
.kpi-spark-ring {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}

/* Sidebar toggle button in topbar (Falcon-style hamburger) */
.topbar-menu-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:transparent; border:1px solid var(--card-border);
  color:var(--text-body); cursor:pointer;
  transition:all var(--transition);
}
.topbar-menu-btn:hover { background:var(--bg2); color:var(--accent); border-color:var(--accent); }

/* ─── Collapsed sidebar — squish to icons-only ─────────────────
   The label text inside .nav-btn is a bare text node (not an
   element), so display:none can't reach it via a child selector.
   Zero the font-size on the button, then restore it on the icon
   span so the SVG keeps its size. */
/* Desktop-only icon-rail collapse. Wrapped in min-width so it can never
   override the mobile drawer rules (which live in a max-width:900px block). */
@media (min-width:901px) {
  .dash-shell.sidebar-collapsed .dash-sidebar { width:64px; }
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-brand-text,
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-section-label,
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-group-chevron,
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-group,
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-submeter-card,
  .dash-shell.sidebar-collapsed .dash-sidebar .add-submeter-btn,
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-active-bldg {
    display:none !important;
  }

  /* Hide nav-btn text by zeroing font + line-height; keep the icon visible */
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-btn {
    font-size:0; line-height:0; padding:11px 0;
    justify-content:center; gap:0; overflow:hidden;
    position:relative;
  }
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-btn > .nav-btn-icon {
    font-size:16px; line-height:1; width:auto;
  }
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-btn > .nav-btn-icon svg {
    display:block;
  }

  /* Center the brand row's icon now that the wordmark is hidden */
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-brand {
    justify-content:center; padding:14px 0 12px;
  }
  .dash-shell.sidebar-collapsed .dash-sidebar .sidebar-brand-mark {
    margin:0;
  }

  /* Tooltips on hover: show the label as a small floating bubble to the right
     so the collapsed sidebar stays discoverable. */
  .dash-shell.sidebar-collapsed .dash-sidebar .nav-btn::after {
    content: attr(data-tip);
    position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%) translateX(-6px);
    background:var(--card); color:var(--text);
    border:1px solid var(--card-border); border-radius:6px;
    padding:6px 10px; font-size:12px; font-weight:600; white-space:nowrap;
    box-shadow:0 6px 16px rgba(0,0,0,0.18);
    opacity:0; pointer-events:none; transition:all .15s var(--ease);
    z-index:5000;
  }
}
.dash-shell.sidebar-collapsed .dash-sidebar .nav-btn:hover::after {
  opacity:1; transform:translateY(-50%) translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL POLISH — smooth hovers + consistency between auth & dash
═══════════════════════════════════════════════════════════════ */

/* Auth-brand mark sized for the topbar (login/register/etc.) */
.auth-brand-mark {
  width:38px; height:38px;
  border-radius:8px;
  background:rgba(255,255,255,0.95);
  padding:3px; box-sizing:border-box;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.auth-brand:hover .auth-brand-mark {
  transform:translateY(-1px) rotate(-3deg);
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
}
.auth-brand { gap:10px; }
.auth-brand-sub {
  font-size:11px; color:rgba(255,255,255,0.78);
  font-weight:500; letter-spacing:.5px;
  margin-top:1px;
}

/* Unified smooth-hover layer — every interactive element gets the same
   easing/duration so the dashboard feels like one product. */
button, a, .nav-btn, .nav-sub, .submeter-btn,
.theme-toggle, .btn-top, .btn-primary, .btn-outline,
.toggle-pw, .add-submeter-btn, .kpi-card, .chart-card,
.topbar-menu-btn, .auth-brand-mark {
  transition: background-color .2s var(--ease),
              color .2s var(--ease),
              border-color .2s var(--ease),
              transform .18s var(--ease),
              box-shadow .25s var(--ease),
              opacity .18s var(--ease);
}

/* Hover lifts for content surfaces (skip while in light mode where shadows
   are subtler — let the existing box-shadow handle it). */
.kpi-card:hover {
  transform:translateY(-2px);
  border-color:var(--card-border);
  box-shadow:0 8px 26px rgba(0,0,0,0.28);
}
html[data-theme="light"] .kpi-card:hover {
  border-color:#C8D4E5;
  box-shadow:0 8px 22px rgba(15,30,55,0.10);
}

/* Subtle press feedback on every clickable */
button:not(:disabled):active,
.nav-btn:not(:disabled):active,
.nav-sub:not(:disabled):active,
.submeter-btn:not(:disabled):active {
  transform:translateY(0) scale(0.985);
}

/* Focus ring — Falcon-style halo on tab navigation */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-btn:focus-visible,
.nav-sub:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px var(--accent-glow);
}

/* Modal — click-outside-to-close visual: the overlay highlights subtly */
[data-modal-overlay] { cursor:pointer; }
[data-modal-overlay] > * { cursor:default; }

/* The Sleeping (auto) status pill below the ring — use color tokens so
   it reads sensibly in both themes. */
.capture-tag { transition:all .25s var(--ease); }
.capture-tag:hover { transform:translateY(-1px); border-color:var(--accent); }

/* Submeter button polish — slightly nicer hover */
.nav-sub:hover { padding-left:38px; }
.nav-sub.active:hover { padding-left:38px; }

/* Theme toggle dot glow follows the theme */
.theme-toggle:hover .tt-dot { transform:scale(1.15); }

/* Add Submeter dashed button — gentle motion on hover */
.add-submeter-btn:hover { transform:translateY(-1px); letter-spacing:.6px; }

/* Loading state — disabled button shows a pulsing dot */
button.is-loading {
  position:relative; pointer-events:none; opacity:.7;
}
button.is-loading::after {
  content:''; display:inline-block; width:6px; height:6px; margin-left:8px;
  border-radius:50%; background:currentColor;
  animation:btn-loading-pulse .9s infinite ease-in-out;
}
@keyframes btn-loading-pulse {
  0%, 100% { opacity:.3; transform:scale(.85); }
  50%      { opacity:1;  transform:scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════
   THEME PICKER (Falcon-style) — Light / Dark / Auto dropdown.
   Sun icon shows in light mode, moon icon in dark mode.
═══════════════════════════════════════════════════════════════ */
.theme-picker { position:relative; display:inline-block; }

.theme-picker-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--text-body);
  border:1px solid var(--card-border);
  font-family:var(--font-ui);
  transition:all var(--transition);
}
.theme-picker-btn:hover {
  background:var(--bg2); color:var(--accent); border-color:var(--accent);
  transform:translateY(-1px);
}
.theme-picker-btn .tp-icon { display:none; }
/* Default (dark theme) shows the moon */
.theme-picker-btn .tp-icon-dark { display:block; color:#9DA9BB; }
/* When light theme is active, swap to the sun */
html[data-theme="light"] .theme-picker-btn .tp-icon-dark  { display:none; }
html[data-theme="light"] .theme-picker-btn .tp-icon-light { display:block; color:#F5803E; }
.theme-picker-btn .tp-chevron { opacity:.55; transition:transform .2s var(--ease); }
.theme-picker.is-open .theme-picker-btn .tp-chevron { transform:rotate(180deg); opacity:1; }

/* On the auth gradient — glass-styled button */
.theme-picker.theme-picker-on-glass .theme-picker-btn {
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.30);
  color:#fff;
  backdrop-filter:blur(10px);
}
.theme-picker.theme-picker-on-glass .theme-picker-btn .tp-icon-dark  { color:#fff; }
.theme-picker.theme-picker-on-glass .theme-picker-btn .tp-icon-light { color:#FBBF24; }
.theme-picker.theme-picker-on-glass .theme-picker-btn:hover {
  background:rgba(255,255,255,0.24); border-color:rgba(255,255,255,0.55);
}

/* Dropdown menu — Falcon-style card with three rows */
.theme-picker-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:170px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:6px;
  box-shadow:0 14px 36px rgba(0,0,0,0.30);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
  z-index:7000;
}
.theme-picker.is-open .theme-picker-menu {
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s 0s;
}

.theme-picker-menu button {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px; border-radius:7px;
  background:transparent; border:none; cursor:pointer;
  color:var(--text); font-family:var(--font-ui);
  font-size:14px; font-weight:500; text-align:left;
  transition:background-color .12s var(--ease), color .12s var(--ease);
}
.theme-picker-menu button:hover {
  background:var(--bg2); color:var(--accent);
}
.theme-picker-menu button svg:first-child { color:var(--text-muted); flex-shrink:0; }
.theme-picker-menu button:hover svg:first-child { color:var(--accent); }
.theme-picker-menu button span { flex:1; }
.theme-picker-menu .tp-check {
  color:var(--accent); opacity:0; flex-shrink:0;
}
.theme-picker-menu button.is-active .tp-check { opacity:1; }
.theme-picker-menu button.is-active { color:var(--accent); font-weight:600; }
.theme-picker-menu button.is-active svg:first-child { color:var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION BELL + PANEL (Falcon-style)
═══════════════════════════════════════════════════════════════ */
.notif-wrap { position:relative; display:inline-block; }
.notif-btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:transparent; color:var(--text-body);
  border:1px solid var(--card-border); cursor:pointer;
  transition:all var(--transition);
}
.notif-btn:hover { background:var(--bg2); color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.notif-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:800; line-height:17px; text-align:center;
  border-radius:9px; border:2px solid var(--bg2);
  font-family:var(--font-ui);
}
.notif-btn.has-unread { color:var(--accent); border-color:var(--accent); }

/* Panel */
.notif-panel {
  position:absolute; top:calc(100% + 8px); right:0;
  width:340px; max-width:90vw;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,0.32);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
  z-index:7000; overflow:hidden;
}
.notif-wrap.is-open .notif-panel {
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s 0s;
}
.notif-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--card-border);
}
.notif-panel-title { font-family:var(--font-ui); font-size:14px; font-weight:700; color:var(--text); }
.notif-markall {
  background:none; border:none; cursor:pointer;
  color:var(--accent); font-size:12px; font-weight:600; font-family:var(--font-ui);
  transition:opacity .15s;
}
.notif-markall:hover { opacity:.7; }

.notif-list { max-height:380px; overflow-y:auto; }
.notif-item {
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 16px; border-bottom:1px solid var(--card-border);
  cursor:default; transition:background-color .15s;
  position:relative;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--bg2); }
.notif-item.is-unread { background:var(--accent-dim); }
.notif-item.is-unread:hover { background:var(--accent-dim); }
.notif-item.is-unread::before {
  content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.notif-ico {
  flex-shrink:0; width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.notif-ico.error   { background:var(--red-dim);    color:var(--red); }
.notif-ico.warning { background:var(--gold-dim);   color:var(--gold); }
.notif-ico.info    { background:var(--accent-dim); color:var(--accent); }
.notif-body { flex:1; min-width:0; }
.notif-title { font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.notif-msg   { font-size:12.5px; color:var(--text-muted); line-height:1.45; word-wrap:break-word; }
.notif-time  { font-size:11px; color:var(--text-muted); margin-top:4px; font-family:var(--font-mono); }

.notif-empty {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:36px 16px; color:var(--text-muted);
}
.notif-empty p { font-size:13px; font-family:var(--font-ui); }

.notif-panel-foot {
  padding:10px 16px; border-top:1px solid var(--card-border);
  text-align:center;
}
.notif-viewall {
  background:none; border:none; cursor:pointer;
  color:var(--accent); font-size:13px; font-weight:600; font-family:var(--font-ui);
}
.notif-viewall:hover { text-decoration:underline; }

@media (max-width:600px) {
  .notif-panel { position:fixed; top:var(--topbar-h); right:6px; left:6px; width:auto; }
}

/* ════════════════════════════════════════════════════════════════
   LOGIN v2 — Modern split-screen SaaS layout
   Colors pulled from the logo: navy #0E2A47, teal #2A8C96 / #3FB6B2,
   sky #27BCFD, bronze accent #C49A6C.
════════════════════════════════════════════════════════════════ */
:root {
  --l2-navy:   #0E2A47;
  --l2-navy-2: #143a5e;
  --l2-teal:   #2A8C96;
  --l2-teal-2: #3FB6B2;
  --l2-sky:    #27BCFD;
  --l2-bronze: #C49A6C;
}

.login2 {
  position:relative;
  min-height:100vh; width:100%;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  overflow:hidden;
  font-family:'Poppins','Inter','Montserrat',sans-serif;
  isolation:isolate;
}

/* ── Animated background ── */
.login2-bg {
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 700px at 16% 22%, rgba(63,182,178,0.30), transparent 60%),
    radial-gradient(900px 800px at 88% 80%, rgba(39,188,253,0.26), transparent 60%),
    linear-gradient(135deg, #0A2138 0%, #0E2A47 45%, #103A5A 100%);
}
.l2-orb {
  position:absolute; border-radius:50%; filter:blur(50px); opacity:.5;
  pointer-events:none;
}
.l2-orb-1 { width:420px; height:420px; left:-90px; top:24%;
  background:radial-gradient(circle at 35% 35%, rgba(95,227,222,0.8), transparent 70%);
  animation:l2-float-a 19s ease-in-out infinite; }
.l2-orb-2 { width:480px; height:480px; right:-120px; top:6%;
  background:radial-gradient(circle at 60% 40%, rgba(39,188,253,0.7), transparent 70%);
  animation:l2-float-b 23s ease-in-out infinite; }
.l2-orb-3 { width:360px; height:360px; left:42%; bottom:-120px;
  background:radial-gradient(circle at 50% 50%, rgba(42,140,150,0.65), transparent 70%);
  animation:l2-float-a 27s ease-in-out infinite; }
@keyframes l2-float-a {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(40px,-30px) scale(1.08); }
}
@keyframes l2-float-b {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(-50px,40px) scale(1.1); }
}

/* Floating particles */
.l2-particle {
  position:absolute; bottom:-12px; left:var(--px);
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.6);
  box-shadow:0 0 8px rgba(120,220,255,0.8);
  animation:l2-rise var(--d) linear infinite; animation-delay:var(--delay);
  opacity:0;
}
@keyframes l2-rise {
  0%   { transform:translateY(0) scale(.6);   opacity:0; }
  10%  { opacity:.7; }
  90%  { opacity:.7; }
  100% { transform:translateY(-104vh) scale(1.1); opacity:0; }
}

/* Bottom waves */
.l2-waves {
  position:absolute; left:0; right:0; bottom:0; width:100%; height:34vh; min-height:200px;
  z-index:-1;
}
.l2-wave { transform-origin:center; }
.l2-wave-a { fill:rgba(42,140,150,0.30); animation:l2-wave-shift 14s ease-in-out infinite alternate; }
.l2-wave-b { fill:rgba(39,188,253,0.22); animation:l2-wave-shift 18s ease-in-out infinite alternate-reverse; }
@keyframes l2-wave-shift {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-60px); }
}

/* ── Top bar ── */
.login2-topbar {
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:18px 26px;
}

/* ── LEFT branding panel ── */
.login2-brand {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:48px 56px;
}
.login2-brand-inner { max-width:460px; width:100%; }
.login2-logo {
  width:118px; height:118px; display:block; margin-bottom:26px;
  border-radius:50%;
  background:rgba(255,255,255,0.96);
  box-shadow:0 16px 40px rgba(0,0,0,0.30);
  animation:l2-logo-in .7s var(--ease, ease) both;
}
@keyframes l2-logo-in { from{opacity:0;transform:translateY(14px) scale(.95);} to{opacity:1;transform:none;} }
.login2-title {
  font-size:42px; font-weight:800; line-height:1.1; color:#fff;
  letter-spacing:-0.5px; margin-bottom:16px;
  text-shadow:0 4px 24px rgba(0,0,0,0.25);
}
.login2-desc {
  font-size:15.5px; line-height:1.7; color:rgba(255,255,255,0.82);
  margin-bottom:30px; max-width:440px;
}

/* Live gauge + sample analytics */
.login2-preview { display:flex; flex-direction:column; gap:18px; }
.l2-gauge {
  position:relative; width:130px; height:130px; flex-shrink:0;
}
.l2-gauge svg { width:100%; height:100%; }
.l2-gauge-arc {
  stroke-dasharray:314; stroke-dashoffset:314;
  animation:l2-gauge-fill 2.4s var(--ease, cubic-bezier(.4,0,.2,1)) .4s forwards;
}
@keyframes l2-gauge-fill { to { stroke-dashoffset:96; } }   /* ~70% */
.l2-gauge-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1;
}
.l2-gauge-val { font-size:30px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.l2-gauge-unit { font-size:11px; color:rgba(255,255,255,0.7); margin-top:3px; letter-spacing:.5px; }

.l2-stats { display:flex; gap:12px; flex-wrap:wrap; }
.l2-stat {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px; padding:10px 14px;
  backdrop-filter:blur(8px); flex:1; min-width:120px;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.l2-stat:hover { transform:translateY(-2px); background:rgba(255,255,255,0.13); }
.l2-stat-ico {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(95,227,222,0.3), rgba(39,188,253,0.3));
  color:#bff3ff;
}
.l2-stat-val { font-size:16px; font-weight:800; color:#fff; line-height:1.1; }
.l2-stat-lbl { font-size:11px; color:rgba(255,255,255,0.72); margin-top:2px; }

.l2-spark {
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px; padding:14px 16px 10px; backdrop-filter:blur(8px);
}
.l2-spark svg { width:100%; height:54px; display:block; }
.l2-spark-line { fill:none; stroke:#5FE3DE; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:l2-draw 2.6s var(--ease, ease) .6s forwards; }
@keyframes l2-draw { to { stroke-dashoffset:0; } }
.l2-spark-fill { fill:url(#l2GaugeGrad); opacity:0; animation:l2-fadein 1s ease 2.4s forwards; }
@keyframes l2-fadein { to { opacity:0.16; } }
.l2-spark-cap { display:block; margin-top:6px; font-size:11px; color:rgba(255,255,255,0.6); letter-spacing:.3px; }

/* ── RIGHT form panel ── */
.login2-form {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:48px 56px;
}
.login2-card {
  width:100%; max-width:440px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:24px;
  padding:42px 40px;
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 80px rgba(3,18,45,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
  animation:l2-card-in .6s var(--ease, ease) both;
}
@keyframes l2-card-in { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
.login2-card-head { margin-bottom:26px; }
.login2-hello {
  display:inline-block; font-size:13px; font-weight:600; letter-spacing:.4px;
  color:#bff3ff; background:rgba(95,227,222,0.16);
  border:1px solid rgba(95,227,222,0.28);
  padding:5px 12px; border-radius:20px; margin-bottom:14px;
}
.login2-card-title { font-size:27px; font-weight:800; color:#fff; line-height:1.2; letter-spacing:-0.3px; }
.login2-card-sub { font-size:14px; color:rgba(255,255,255,0.74); margin-top:8px; }

.l2-label {
  display:block; font-size:13px; font-weight:600; color:#fff;
  margin:16px 0 7px; letter-spacing:.2px;
}
.l2-input-wrap { position:relative; display:flex; align-items:center; }
.l2-input-ico {
  position:absolute; left:15px; color:#5B6B82; pointer-events:none;
  transition:color .2s var(--ease); z-index:2; opacity:1;
}
.l2-input-wrap input {
  width:100%; padding:15px 16px 15px 46px;
  background:#FFFFFF;
  border:1.5px solid rgba(0,0,0,0.10); border-radius:12px;
  font-size:15px; color:#0B1726; font-family:inherit; font-weight:500;
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.l2-input-wrap input::placeholder { color:#94A3B8; font-weight:400; }
.l2-input-wrap input:focus {
  outline:none; border-color:var(--l2-sky);
  box-shadow:0 0 0 4px rgba(39,188,253,0.25);
  transform:translateY(-1px);
}
.l2-input-wrap input:focus ~ .l2-input-ico,
.l2-input-wrap:focus-within .l2-input-ico { color:var(--l2-navy, #1E5FB8); }
.l2-eye {
  position:absolute; right:8px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:#5B6B82; border-radius:8px; transition:all .2s var(--ease);
}
.l2-eye:hover { background:rgba(11,31,58,0.07); color:var(--l2-navy); }

.l2-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:16px; gap:10px; flex-wrap:wrap;
}
.l2-check { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.l2-check input { position:absolute; opacity:0; width:0; height:0; }
.l2-check-box {
  width:19px; height:19px; border-radius:6px; flex-shrink:0;
  background:rgba(255,255,255,0.9); border:1.5px solid rgba(255,255,255,0.5);
  position:relative; transition:all .2s var(--ease);
}
.l2-check input:checked + .l2-check-box {
  background:var(--l2-sky); border-color:var(--l2-sky);
}
.l2-check input:checked + .l2-check-box::after {
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.l2-check input:focus-visible + .l2-check-box { box-shadow:0 0 0 3px rgba(39,188,253,0.4); }
.l2-check-lbl { font-size:13.5px; color:rgba(255,255,255,0.86); }
.l2-forgot {
  background:none; border:none; cursor:pointer;
  font-size:13.5px; font-weight:600; color:#9fe6ff; font-family:inherit;
  transition:color .2s var(--ease);
}
.l2-forgot:hover { color:#fff; text-decoration:underline; }

.l2-submit {
  width:100%; margin-top:24px; padding:15px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--l2-sky) 0%, var(--l2-teal-2) 100%);
  color:#04263a; border:none; border-radius:12px;
  font-size:16px; font-weight:800; font-family:inherit; letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(39,188,253,0.35);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.l2-submit svg { transition:transform .22s var(--ease); }
.l2-submit:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(39,188,253,0.5); filter:brightness(1.05); }
.l2-submit:hover svg { transform:translateX(4px); }
.l2-submit:active { transform:translateY(0); }

.login2-foot {
  margin-top:24px; padding-top:20px; text-align:center;
  border-top:1px solid rgba(255,255,255,0.18);
  font-size:14px; color:rgba(255,255,255,0.78);
}
.l2-register {
  background:none; border:none; cursor:pointer; margin-left:6px;
  font-size:14px; font-weight:700; color:#9fe6ff; font-family:inherit;
  transition:color .2s var(--ease);
}
.l2-register:hover { color:#fff; text-decoration:underline; }

/* Login v2 reuses .auth-error / .pending-notice / .spinner — keep them light-on-glass */
.login2-card .auth-error {
  margin-top:14px; font-size:13px; color:#FECACA;
  background:rgba(220,38,38,0.22); padding:11px 15px; border-radius:10px;
  border-left:3px solid #EF4444; display:none;
}
.login2-card .auth-error.show { display:block; }
.login2-card .pending-notice {
  display:none; background:rgba(250,204,21,0.18); border:1px solid rgba(250,204,21,0.4);
  border-radius:10px; padding:14px; margin-top:12px; text-align:center;
}
.login2-card .pending-notice.show { display:block; }
.login2-card .pending-notice p { color:#FEF3C7; font-size:13.5px; }
.login2-card .spinner { display:none; justify-content:center; gap:6px; padding:14px 0; }
.login2-card .spinner.show { display:flex; }
.login2-card .spinner div { width:8px; height:8px; border-radius:50%; background:#fff; animation:spinner-bounce 1.2s infinite ease-in-out; }
.login2-card .spinner div:nth-child(2) { animation-delay:.2s; }
.login2-card .spinner div:nth-child(3) { animation-delay:.4s; }

/* ── Light theme tuning for login v2 ── */
html[data-theme="light"] .login2-bg {
  background:
    radial-gradient(1100px 700px at 16% 22%, rgba(63,182,178,0.30), transparent 60%),
    radial-gradient(900px 800px at 88% 80%, rgba(39,188,253,0.24), transparent 60%),
    linear-gradient(135deg, #14507a 0%, #0E2A47 55%, #103A5A 100%);
}
/* The branding panel + card stay on the dark gradient in both themes for
   contrast, so no further light overrides are needed. */

/* ── Responsive ── */
@media (max-width:1024px) {
  .login2 { grid-template-columns:1fr; }
  .login2-brand { padding:80px 32px 24px; }
  .login2-brand-inner { max-width:560px; text-align:center; margin:0 auto; }
  .login2-logo { margin-left:auto; margin-right:auto; }
  .login2-title { font-size:36px; }
  .login2-preview { align-items:center; }
  .l2-gauge { margin:0 auto; }
  .l2-stats { justify-content:center; }
  .login2-form { padding:8px 32px 56px; }
}
@media (max-width:560px) {
  .login2-topbar { padding:14px 16px; }
  .login2-brand { padding:72px 20px 16px; }
  .login2-title { font-size:30px; }
  .login2-desc { font-size:14px; }
  .login2-card { padding:32px 24px; border-radius:20px; }
  .login2-card-title { font-size:23px; }
  .l2-stats { flex-direction:column; }
  .l2-stat { min-width:0; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TOAST NOTIFICATIONS — stacked top-right, severity-coloured.
   Works on every page (login + dashboard). Auto-dismiss + manual close.
═══════════════════════════════════════════════════════════════ */
.toast-host {
  position:fixed; top:16px; right:16px; z-index:99999;
  display:flex; flex-direction:column; gap:10px;
  max-width:360px; width:calc(100% - 32px);
  pointer-events:none;
}
.wm-toast {
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:12px;
  background:var(--card, #16213A);
  border:1px solid var(--card-border, #24345A);
  border-left:4px solid var(--accent, #2C7BE5);
  border-radius:10px; padding:13px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.30);
  transform:translateX(120%); opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  font-family:var(--font-ui, sans-serif);
}
.wm-toast.show { transform:translateX(0); opacity:1; }
.wm-toast.success { border-left-color:var(--green, #00D27A); }
.wm-toast.error   { border-left-color:var(--red, #E63757); }
.wm-toast.warning { border-left-color:var(--gold, #F5803E); }
.wm-toast.info    { border-left-color:var(--accent, #2C7BE5); }
.wm-toast-ico {
  flex-shrink:0; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.wm-toast.success .wm-toast-ico { background:var(--green-dim, rgba(0,210,122,.12)); color:var(--green, #00D27A); }
.wm-toast.error   .wm-toast-ico { background:var(--red-dim, rgba(230,55,87,.12));  color:var(--red, #E63757); }
.wm-toast.warning .wm-toast-ico { background:var(--gold-dim, rgba(245,128,62,.12)); color:var(--gold, #F5803E); }
.wm-toast.info    .wm-toast-ico { background:var(--accent-dim, rgba(44,123,229,.12)); color:var(--accent, #2C7BE5); }
.wm-toast-body { flex:1; min-width:0; }
.wm-toast-title { font-size:13.5px; font-weight:700; color:var(--text, #F9FAFD); line-height:1.3; }
.wm-toast-msg   { font-size:12.5px; color:var(--text-muted, #9DA9BB); margin-top:2px; line-height:1.45; word-wrap:break-word; }
.wm-toast-close {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:var(--text-muted, #9DA9BB); padding:2px; line-height:0;
  border-radius:5px; transition:color .15s, background .15s;
}
.wm-toast-close:hover { color:var(--text, #F9FAFD); background:var(--bg2, rgba(255,255,255,.06)); }
/* progress bar that ticks down to auto-dismiss */
.wm-toast-bar {
  position:absolute; left:0; bottom:0; height:3px;
  background:currentColor; opacity:.4; border-bottom-left-radius:10px;
  animation:wm-toast-tick linear forwards;
}
@keyframes wm-toast-tick { from { width:100%; } to { width:0%; } }

@media (max-width:600px) {
  .toast-host { top:auto; bottom:12px; right:12px; left:12px; max-width:none; }
  .wm-toast { transform:translateY(140%); }
  .wm-toast.show { transform:translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN — Centered single-card variant (left branding panel removed)
═══════════════════════════════════════════════════════════════ */
.login2.login2-centered {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login2-form.login2-form-centered {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Logo inside the card header */
.login2-card-logo {
  display:block;
  width:74px; height:74px;
  margin:0 auto 16px;
  filter:drop-shadow(0 8px 22px rgba(39,188,253,0.35));
  animation:l2-logo-float 5s ease-in-out infinite;
}
@keyframes l2-logo-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}
/* Center the head text in the centered layout */
.login2-centered .login2-card-head { text-align:center; }
.login2-centered .login2-card { max-width:420px; }

/* ═══════════════════════════════════════════════════════════════
   REPORTS — segmented "Report Type" control (replaces the dropdown)
═══════════════════════════════════════════════════════════════ */
.rpg-seg {
  display:inline-flex; gap:4px; padding:4px;
  background:var(--bg); border:1px solid var(--card-border);
  border-radius:10px;
}
.rpg-seg-btn {
  padding:9px 18px; border:none; background:transparent;
  color:var(--text-muted); font-family:var(--font-ui); font-size:14px; font-weight:600;
  border-radius:7px; cursor:pointer; transition:all .18s var(--ease);
}
.rpg-seg-btn:hover { color:var(--text); background:var(--card-hover); }
.rpg-seg-btn.active {
  background:var(--accent); color:#fff;
  box-shadow:0 4px 12px var(--accent-glow);
}

/* Submeter button with a location sub-line */
.nav-sub .nav-sub-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.nav-sub .nav-sub-loc {
  font-size:10.5px; font-weight:500; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;
}
.nav-sub.active .nav-sub-loc { color:var(--accent); opacity:.8; }

/* Active-submeter badge shown in chart/section titles so it's always clear
   which submeter the consumption data belongs to. */
.chart-submeter-badge {
  display:inline-block; margin-left:10px;
  padding:3px 12px; border-radius:20px;
  font-family:var(--font-ui); font-size:12px; font-weight:700;
  letter-spacing:.3px; vertical-align:middle;
  background:var(--accent-dim); color:var(--accent);
  border:1px solid rgba(44,123,229,0.30);
}
html[data-theme="light"] .chart-submeter-badge {
  background:rgba(44,123,229,0.10); color:#1E5FB8; border-color:rgba(44,123,229,0.25);
}