/* ═══════════════════════════════════════════════════════════
   100million  ·  Liquid Glass Design System
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Custom Properties ─────────────────────────────────── */
:root {
  --bg:           #07071a;
  --bg2:          #0d0d2e;
  --glass:        rgba(255,255,255,0.055);
  --glass-mid:    rgba(255,255,255,0.095);
  --glass-high:   rgba(255,255,255,0.14);
  --border:       rgba(255,255,255,0.11);
  --border-hi:    rgba(255,255,255,0.22);

  --primary:      #818cf8;
  --primary-dk:   #6366f1;
  --primary-glow: rgba(99,102,241,0.28);
  --violet:       #c084fc;

  --success:      #34d399;
  --success-bg:   rgba(52,211,153,0.14);
  --danger:       #f87171;
  --danger-bg:    rgba(248,113,113,0.14);
  --warning:      #fbbf24;
  --warn-bg:      rgba(251,191,36,0.14);

  --text:         #f1f5f9;
  --text-dim:     #94a3b8;
  --text-muted:   #4e5d6e;

  --nav-h:        70px;
  --sidebar-w:    256px;
  --radius:       22px;
  --radius-sm:    14px;
  --radius-xs:    8px;

  --blur:         blur(24px) saturate(200%);
  --shadow:       0 24px 64px rgba(0,0,0,0.55);
  --shadow-sm:    0 8px 24px rgba(0,0,0,0.35);

  --spring:       cubic-bezier(0.34,1.56,0.64,1);
  --ease:         cubic-bezier(0.4,0,0.2,1);
}

/* ── Light mode variables ───────────────────────────────── */
[data-theme="light"] {
  --bg:           #eef2ff;
  --bg2:          #e0e7ff;
  --glass:        rgba(255,255,255,0.65);
  --glass-mid:    rgba(255,255,255,0.80);
  --glass-high:   rgba(255,255,255,0.95);
  --border:       rgba(99,102,241,0.15);
  --border-hi:    rgba(99,102,241,0.30);

  --primary:      #6366f1;
  --primary-dk:   #4f46e5;
  --primary-glow: rgba(99,102,241,0.18);

  --success:      #059669;
  --success-bg:   rgba(5,150,105,0.12);
  --danger:       #dc2626;
  --danger-bg:    rgba(220,38,38,0.10);
  --warning:      #d97706;
  --warn-bg:      rgba(217,119,6,0.12);

  --text:         #1e1b4b;
  --text-dim:     #4338ca;
  --text-muted:   #818cf8;

  --shadow:       0 24px 64px rgba(99,102,241,0.18);
  --shadow-sm:    0 8px 24px rgba(99,102,241,0.12);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  min-height:100vh; overflow-x:hidden;
  transition: background .3s, color .3s;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
img { display:block; }

/* ── Animated Mesh Background ──────────────────────────── */
.bg-mesh {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 8% 15%,  rgba(99,102,241,.13) 0%,transparent 70%),
    radial-gradient(ellipse 55% 65% at 92% 85%, rgba(192,132,252,.10) 0%,transparent 70%),
    radial-gradient(ellipse 45% 45% at 50% 50%, rgba(59,130,246,.06) 0%,transparent 70%),
    var(--bg);
  animation:bgFloat 12s ease-in-out infinite alternate;
}
@keyframes bgFloat {
  0%   { opacity:1;   transform:scale(1); }
  100% { opacity:.88; transform:scale(1.03); }
}

/* ── App Shell ─────────────────────────────────────────── */
.app-shell { position:relative; z-index:1; min-height:100vh; }

@media (min-width:768px) {
  .app-shell { display:flex; }
  .sidebar { display:flex; }
  .bottom-nav { display:none !important; }
  .main-content { flex:1; min-width:0; padding:36px 40px; max-width:1000px; }
}
@media (max-width:767px) {
  .sidebar { display:none !important; }
  .main-content { padding:24px 16px calc(var(--nav-h) + 24px); }
  .bottom-nav { display:flex; }
}

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); height:100vh; position:sticky; top:0;
  flex-direction:column; flex-shrink:0;
  padding:28px 16px 24px;
  background:rgba(7,7,26,.8); backdrop-filter:var(--blur);
  border-right:1px solid var(--border); z-index:100; overflow:hidden;
}
.sidebar-logo {
  display:flex; align-items:center; gap:12px;
  padding:0 8px 24px; border-bottom:1px solid var(--border); margin-bottom:20px;
}
.logo-icon {
  width:42px; height:42px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-dk),var(--violet));
  border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 8px 24px rgba(99,102,241,.4);
}
.logo-text { font-size:15px; font-weight:800; color:var(--text); }
.logo-sub  { font-size:11px; color:var(--text-muted); margin-top:1px; }

.sidebar-nav { flex:1; display:flex; flex-direction:column; gap:4px; }

.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  color:var(--text-dim); font-size:14px; font-weight:500;
  cursor:pointer; border:none; background:transparent; width:100%;
  transition:all .2s var(--ease);
}
.nav-item:hover { background:var(--glass-mid); color:var(--text); }
.nav-item.active {
  background:var(--primary-glow);
  color:var(--primary);
  border:1px solid rgba(99,102,241,.28);
}
.nav-icon { width:20px; height:20px; flex-shrink:0; opacity:.7; }
.nav-item.active .nav-icon { opacity:1; }

.sidebar-footer {
  padding-top:16px; border-top:1px solid var(--border); margin-top:auto;
}
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:12px;
  background:var(--glass); border:1px solid var(--border);
}
.s-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-dk),var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}
.s-user-info { flex:1; min-width:0; }
.s-user-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-user-status { font-size:11px; color:var(--text-muted); }
.logout-side { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:6px; border-radius:8px; transition:color .2s; }
.logout-side:hover { color:var(--danger); }

/* ── Bottom Nav ────────────────────────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; height:var(--nav-h);
  background:rgba(7,7,26,.9); backdrop-filter:var(--blur);
  border-top:1px solid var(--border);
  align-items:center; justify-content:space-around;
  padding:0 8px; padding-bottom:env(safe-area-inset-bottom); z-index:200;
}
.bnav-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 8px; color:var(--text-muted); font-size:10px; font-weight:600;
  border-radius:12px; cursor:pointer; border:none; background:none; flex:1;
  transition:all .2s var(--ease); min-width:0;
}
.bnav-item svg { width:22px; height:22px; }
.bnav-item.active { color:var(--primary); }
.bnav-item.active svg { filter:drop-shadow(0 0 6px rgba(129,140,248,.6)); }

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  transition:all .3s var(--ease);
}
.card:hover { background:var(--glass-mid); }
.card-sm { border-radius:var(--radius-sm); padding:16px; }

/* ── Stat Cards ─────────────────────────────────────────── */
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px;
}
.stat-card {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px 10px; text-align:center; position:relative; overflow:hidden;
  transition:transform .25s var(--spring);
}
.stat-card:hover { transform:translateY(-2px); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--g,linear-gradient(90deg,var(--primary),var(--violet)));
}
.stat-card-a { --g:linear-gradient(90deg,#818cf8,#c084fc); }
.stat-card-b { --g:linear-gradient(90deg,#34d399,#059669); }
.stat-card-c { --g:linear-gradient(90deg,#fbbf24,#f59e0b); }
.stat-value { font-size:22px; font-weight:900; color:var(--text); line-height:1.1; margin-bottom:4px; }
.stat-label { font-size:10px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

@media (max-width:380px) { .stat-value { font-size:18px; } }

/* ── Greeting ───────────────────────────────────────────── */
.dash-greeting { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dash-hello    { font-size:22px; font-weight:900; color:var(--text); }
.dash-date     { font-size:13px; color:var(--text-muted); margin-top:2px; }
.dash-refresh  { width:38px; height:38px; border-radius:12px; background:var(--glass); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim); transition:.2s; flex-shrink:0; }
.dash-refresh:hover { background:var(--glass-mid); color:var(--text); }

/* ── Plan Card ──────────────────────────────────────────── */
.plan-card {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px 18px; margin-bottom:20px;
  position:relative; overflow:hidden;
}
.plan-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.10) 0%, transparent 70%);
}
.plan-card-title   { font-size:15px; font-weight:800; color:var(--text); margin-bottom:2px; }
.plan-card-subtitle{ font-size:12px; color:var(--text-muted); margin-bottom:20px; }

/* Rings layout */
.plan-rings   { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:16px; }
.plan-divider { width:1px; height:110px; background:var(--border); margin:0 20px; flex-shrink:0; }

.plan-ring-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
.ring-svg {
  width:120px; height:120px;
  transform:rotate(-90deg);
  overflow:visible;
}
.ring-track {
  fill:none; stroke:rgba(255,255,255,.07);
  stroke-width:10; stroke-linecap:round;
}
.ring-fill {
  fill:none; stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), stroke .4s;
}
.ring-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% - 8px));
  text-align:center; pointer-events:none;
}
.ring-val   { font-size:20px; font-weight:900; color:var(--text); line-height:1; }
.ring-total { font-size:11px; color:var(--text-muted); margin-top:1px; }
.ring-ico   { font-size:14px; margin-top:3px; }
.ring-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:-4px; }
.ring-pct-badge {
  font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px;
  transition:.4s;
}

/* Plan bars */
.plan-bar-row   { }
.plan-bar-lbl   { display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.plan-bar-track { background:rgba(255,255,255,.07); border-radius:999px; height:8px; overflow:hidden; }
.plan-bar-fill  { height:100%; border-radius:999px; transition:width 1s cubic-bezier(.4,0,.2,1), background .4s; }

/* Status row */
.plan-status-row { display:flex; align-items:center; background:rgba(255,255,255,.04); border-radius:14px; padding:12px 16px; margin-top:14px; }
.plan-status-item{ flex:1; text-align:center; }
.plan-status-sep { width:1px; height:30px; background:var(--border); }
.pstat-val { font-size:16px; font-weight:800; color:var(--text); }
.pstat-lbl { font-size:10px; color:var(--text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.4px; }

/* No target state */
.plan-no-target { opacity:.75; }

/* chart pill */
.chart-pct-pill { font-size:12px; font-weight:700; background:rgba(255,255,255,.07); border:1px solid var(--border); padding:4px 10px; border-radius:20px; color:var(--text-dim); }

/* ── Chart Section ──────────────────────────────────────── */
.chart-wrap {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:24px;
}
.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.section-title { font-size:16px; font-weight:800; color:var(--text); }
.section-date  { font-size:12px; color:var(--text-muted); }

.donut-wrap { position:relative; max-width:180px; margin:0 auto 20px; }
.donut-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
}
.donut-pct   { font-size:30px; font-weight:900; color:var(--text); line-height:1; }
.donut-sub   { font-size:11px; color:var(--text-muted); }

.chart-legend { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.leg-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }

/* Target progress */
.target-bar-wrap  { margin:16px 0 12px; }
.target-bar-track { background:rgba(255,255,255,.08); border-radius:999px; height:10px; overflow:hidden; }
.target-bar-fill  { height:100%; border-radius:999px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.target-bar-labels{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-top:6px; }
.target-stats     { display:flex; gap:12px; margin-top:4px; }
.target-stat      { flex:1; background:rgba(255,255,255,.04); border-radius:12px; padding:10px 14px; text-align:center; }
.target-stat-val  { font-size:18px; font-weight:800; color:var(--text); }
.target-stat-lbl  { font-size:11px; color:var(--text-muted); margin-top:2px; }
.target-badge     { font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge-done       { background:rgba(52,211,153,.18); color:#34d399; }
.badge-mid        { background:rgba(251,191,36,.18); color:#fbbf24; }
.badge-low        { background:rgba(96,165,250,.18); color:#60a5fa; }
.leg-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Payment List ───────────────────────────────────────── */
.list-section { margin-bottom:24px; }
.list-title { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; }

.pay-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.045);
}
.pay-item:last-child { border-bottom:none; }
.pay-dot {
  width:40px; height:40px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pay-dot.paid     { background:var(--success-bg); }
.pay-dot.checking { background:var(--warn-bg); }
.pay-dot.unpaid   { background:rgba(255,255,255,.05); }
.pay-info { flex:1; min-width:0; }
.pay-acc  { font-size:14px; font-weight:600; color:var(--text); }
.pay-time { font-size:11px; color:var(--text-muted); margin-top:2px; }
.pay-amount { font-size:15px; font-weight:800; color:var(--success); }
.pay-amount.muted { font-size:12px; color:var(--text-muted); font-weight:400; }

.check-now-btn {
  background:var(--glass-mid); border:1px solid var(--border);
  border-radius:8px; padding:5px 10px;
  font-size:11px; font-weight:600; color:var(--primary); cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.check-now-btn:hover { background:var(--primary-glow); }

/* ── Search Page ────────────────────────────────────────── */
.search-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px;
}
.stype-btn {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:18px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; color:var(--text-dim); font-size:11px; font-weight:600;
  text-align:center; transition:all .25s var(--spring);
}
.stype-btn:hover, .stype-btn.active {
  background:var(--primary-glow); border-color:rgba(129,140,248,.4); color:var(--primary);
  transform:translateY(-3px);
}
.stype-icon { font-size:26px; line-height:1; }

.search-input-area { display:none; animation:slideDown .3s var(--spring); }
.search-input-area.visible { display:block; }
@keyframes slideDown {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}

.result-card {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px;
  margin-bottom:8px; cursor:pointer; transition:all .2s var(--ease);
  display:flex; align-items:center; gap:12px;
}
.result-card:hover {
  background:var(--glass-mid); border-color:var(--border-hi); transform:translateX(4px);
}
.res-avatar {
  width:50px; height:50px; border-radius:15px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-dk),var(--violet));
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.res-info { flex:1; min-width:0; }
.res-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-addr { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-acc  { font-size:11px; color:var(--primary); font-weight:700; margin-top:2px; }
.res-arrow { color:var(--text-muted); flex-shrink:0; }

/* ── Subscriber Page ────────────────────────────────────── */
.sub-header {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  padding-bottom:20px; border-bottom:1px solid var(--border);
}
.back-btn {
  width:42px; height:42px; border-radius:13px;
  background:var(--glass); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); transition:all .2s var(--ease); flex-shrink:0;
}
.back-btn:hover { background:var(--glass-mid); }
.sub-title-wrap { flex:1; min-width:0; }
.sub-name { font-size:18px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-acc  { font-size:12px; color:var(--text-muted); margin-top:2px; }

.debt-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:100px; font-size:14px; font-weight:800;
  margin-bottom:20px;
}
.debt-badge.in-debt {
  background:var(--danger-bg); color:var(--danger);
  border:1px solid rgba(248,113,113,.3);
  animation:debtPulse 2.5s ease-in-out infinite;
}
.debt-badge.ok {
  background:var(--success-bg); color:var(--success);
  border:1px solid rgba(52,211,153,.3);
}
@keyframes debtPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(248,113,113,0); }
  50%      { box-shadow:0 0 0 5px rgba(248,113,113,.15); }
}

/* Action buttons */
.actions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:24px; }
.act-btn {
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:pointer; color:var(--text-dim); font-size:11px; font-weight:600;
  text-align:center; transition:all .25s var(--spring);
}
.act-btn:hover { transform:translateY(-3px); }
.act-btn.blue:hover  { background:var(--primary-glow); border-color:rgba(99,102,241,.35); color:var(--primary); }
.act-btn.green:hover { background:var(--success-bg);   border-color:rgba(52,211,153,.3);  color:var(--success); }
.act-btn.red:hover   { background:var(--danger-bg);    border-color:rgba(248,113,113,.3); color:var(--danger); }
.act-icon { font-size:24px; }

/* Tabs */
.tabs {
  display:flex; gap:3px; background:rgba(0,0,0,.35);
  padding:4px; border-radius:var(--radius-sm); margin-bottom:20px;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  flex:1; min-width:70px; padding:10px 12px; border:none; background:none;
  border-radius:10px; color:var(--text-muted); font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s var(--ease); white-space:nowrap;
}
.tab-btn.active { background:var(--glass-mid); color:var(--text); }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fadeUp .3s var(--ease); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Info rows */
.info-block { border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; }
.info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 14px; background:var(--glass); font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.info-row:last-child { border-bottom:none; }
.inf-label { color:var(--text-muted); font-weight:500; flex-shrink:0; padding-right:12px; }
.inf-val   { color:var(--text); font-weight:600; text-align:right; word-break:break-word; max-width:60%; }
.inf-val.red   { color:var(--danger); }
.inf-val.green { color:var(--success); }

/* Highlighted top section */
.highlight-block {
  background: linear-gradient(135deg, var(--primary-glow), var(--glass-high));
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.highlight-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.highlight-row:last-child { margin-bottom: 0; }
.highlight-label {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.highlight-val {
  color: var(--text);
  font-weight: 800;
  font-size: 18px;
  text-align: right;
}
.highlight-val.red { color: var(--danger); }
.highlight-val.green { color: var(--success); }

/* History items */
.hist-item {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:8px;
}
.hist-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.hist-val  { font-size:20px; font-weight:900; color:var(--text); }
.hist-date { font-size:12px; color:var(--text-muted); }
.hist-tags { display:flex; gap:6px; flex-wrap:wrap; }
.hist-tag {
  display:inline-flex; padding:3px 9px; border-radius:100px;
  font-size:10px; font-weight:700; background:var(--glass-mid); color:var(--text-dim);
}
.hist-tag.green { background:var(--success-bg); color:var(--success); }
.hist-tag.blue  { background:var(--primary-glow); color:var(--primary); }
.hist-tag.red   { background:var(--danger-bg); color:var(--danger); }

/* ── Forms & Inputs ─────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:11px; font-weight:700; color:var(--text-dim);
  margin-bottom:7px; text-transform:uppercase; letter-spacing:.6px;
}
.form-input {
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 16px;
  color:var(--text); font-size:15px; font-family:'Inter',sans-serif;
  outline:none; transition:all .2s var(--ease); -webkit-appearance:none;
}
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus {
  border-color:var(--primary); background:rgba(99,102,241,.08);
  box-shadow:0 0 0 3px rgba(99,102,241,.2);
}
.form-input.big {
  font-size:32px; font-weight:900; text-align:center; padding:22px;
  letter-spacing:2px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 24px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:700; cursor:pointer; border:none;
  transition:all .2s var(--spring); font-family:'Inter',sans-serif; width:100%;
  position:relative; overflow:hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:#fff; opacity:0; transition:opacity .1s; }
.btn:active::after { opacity:.08; }
.btn:active { transform:scale(.98); }

.btn-primary {
  background:linear-gradient(135deg,var(--primary-dk),var(--violet));
  color:#fff; box-shadow:0 10px 28px rgba(99,102,241,.38);
}
.btn-primary:hover { box-shadow:0 14px 35px rgba(99,102,241,.5); transform:translateY(-2px); }
.btn-glass {
  background:var(--glass-mid); color:var(--text);
  border:1px solid var(--border); backdrop-filter:var(--blur);
}
.btn-glass:hover { background:var(--glass-high); }
.btn-danger { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; box-shadow:0 8px 22px rgba(239,68,68,.3); }
.btn-sm   { padding:10px 18px; font-size:13px; width:auto; }
.btn-icon { padding:12px; width:auto; border-radius:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-row { display:flex; gap:10px; margin-top:16px; }
.btn-row .btn { flex:1; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  z-index:500; display:flex; align-items:flex-end;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-sheet {
  background:linear-gradient(180deg,rgba(18,18,42,.98),rgba(10,10,28,.98));
  backdrop-filter:var(--blur); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:0 0 env(safe-area-inset-bottom);
  width:100%; max-height:calc(100vh - var(--nav-h) - 20px); overflow-y:auto;
  transform:translateY(100%); transition:transform .4s var(--spring);
}
.modal-overlay.open .modal-sheet { transform:translateY(0); }
.modal-inner { padding:16px 20px 24px; }
@media (max-width:767px) {
  .modal-inner { padding-bottom: calc(var(--nav-h) + 20px); }
}

@media (min-width:768px) {
  .modal-overlay { align-items:center; justify-content:center; padding:20px; }
  .modal-sheet   { max-width:460px; border-radius:var(--radius); transform:scale(.94) translateY(20px); max-height:88vh; }
  .modal-overlay.open .modal-sheet { transform:scale(1) translateY(0); }
}
.modal-handle {
  width:40px; height:4px; background:rgba(255,255,255,.18); border-radius:2px;
  margin:14px auto 0;
}
@media (min-width:768px) { .modal-handle { display:none; } }
.modal-title    { font-size:19px; font-weight:800; color:var(--text); margin-bottom:4px; }
.modal-subtitle { font-size:13px; color:var(--text-muted); margin-bottom:20px; }

/* Steps */
.steps { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.step-pip {
  height:5px; border-radius:3px; background:var(--border);
  transition:all .35s var(--spring); flex:1;
}
.step-pip.done   { background:var(--success); }
.step-pip.active { background:var(--primary); }

/* Meter select items */
.meter-opt {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:8px;
  cursor:pointer; transition:all .2s var(--spring);
  display:flex; align-items:center; gap:12px;
}
.meter-opt:hover, .meter-opt.sel {
  background:var(--primary-glow); border-color:rgba(99,102,241,.38);
}
.meter-opt-icon { width:44px; height:44px; border-radius:13px; background:rgba(99,102,241,.14); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.meter-opt-name  { font-size:14px; font-weight:700; color:var(--text); }
.meter-opt-val   { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* Map */
#mapbox-map { height:250px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); margin-bottom:12px; position:relative; }
.map-tip {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.78); backdrop-filter:blur(10px);
  color:#fff; padding:6px 16px; border-radius:100px;
  font-size:12px; font-weight:600; white-space:nowrap; z-index:10;
  border:1px solid rgba(255,255,255,.14); pointer-events:none;
}
.map-coords {
  text-align:center; font-size:11px; color:var(--text-muted); margin-bottom:12px;
}

/* Photo preview */
.photo-preview {
  width:100%; height:200px; border-radius:var(--radius-sm);
  object-fit:cover; border:1px solid var(--border); display:none; margin-bottom:12px;
}
.photo-preview.visible { display:block; }

/* ── Toast ──────────────────────────────────────────────── */
.toast-box {
  position:fixed; top:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  background:rgba(18,18,42,.96); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 18px; font-size:13px; font-weight:500; color:var(--text);
  min-width:240px; max-width:340px; display:flex; align-items:center; gap:10px;
  pointer-events:all; box-shadow:var(--shadow-sm);
  animation:toastIn .4s var(--spring);
}
.toast.out   { animation:toastOut .3s var(--ease) forwards; }
.toast.green { border-left:3px solid var(--success); }
.toast.red   { border-left:3px solid var(--danger); }
.toast.blue  { border-left:3px solid var(--primary); }
@keyframes toastIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateX(20px); } }

/* ── Skeleton ───────────────────────────────────────────── */
.skel {
  background:linear-gradient(90deg,var(--glass) 25%,var(--glass-mid) 50%,var(--glass) 75%);
  background-size:200% 100%; animation:shimmer 1.6s infinite; border-radius:var(--radius-xs);
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ── Spinner ────────────────────────────────────────────── */
.spin {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.2);
  border-top-color:#fff; border-radius:50%; animation:rotate .65s linear infinite; display:inline-block;
}
@keyframes rotate { to { transform:rotate(360deg); } }

/* ── Empty State ────────────────────────────────────────── */
.empty { text-align:center; padding:44px 20px; color:var(--text-muted); }
.empty-ico { font-size:52px; margin-bottom:12px; opacity:.45; }
.empty-txt { font-size:14px; }

/* ── Login Page ─────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; }
.login-card {
  width:100%; max-width:380px; position:relative; z-index:1;
  background:rgba(255,255,255,.058); backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:44px 32px;
}
.login-logo { text-align:center; margin-bottom:36px; }
.login-logo-ico {
  width:76px; height:76px; border-radius:26px; margin:0 auto 18px;
  background:linear-gradient(135deg,var(--primary-dk),var(--violet));
  display:flex; align-items:center; justify-content:center; font-size:38px;
  box-shadow:0 20px 44px rgba(99,102,241,.45);
}
.login-ttl  { font-size:28px; font-weight:900; color:var(--text); margin-bottom:4px; }
.login-sub  { font-size:13px; color:var(--text-muted); }
.login-err  {
  background:var(--danger-bg); border:1px solid rgba(248,113,113,.28);
  border-radius:var(--radius-xs); padding:10px 14px; font-size:13px; color:var(--danger);
  margin-bottom:16px; display:none;
}
.login-err.on { display:block; animation:fadeUp .3s var(--ease); }

/* Page header */
.page-hd { margin-bottom:24px; }
.page-ttl { font-size:24px; font-weight:900; color:var(--text); margin-bottom:4px; }
.page-sub { font-size:13px; color:var(--text-muted); }

/* Canvas bg (login) */
#particles { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ── Utility ────────────────────────────────────────────── */
.hidden { display:none !important; }
.mb-2  { margin-bottom:8px; }
.mb-3  { margin-bottom:12px; }
.mb-4  { margin-bottom:16px; }
.mb-6  { margin-bottom:24px; }
.mt-4  { margin-top:16px; }
.mt-6  { margin-top:24px; }
.w-full { width:100%; }
.text-center { text-align:center; }
.text-green { color:var(--success); }
.text-red   { color:var(--danger); }
.text-dim   { color:var(--text-dim); }
.text-muted { color:var(--text-muted); }
.font-bold  { font-weight:700; }
.text-sm    { font-size:13px; }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:2px; }

@media (max-width:767px) {
  .main-content { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); }
}

/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════ */

/* 4-column stats grid override */
.stats-grid-4 { grid-template-columns: repeat(2,1fr); }
@media (min-width:600px) { .stats-grid-4 { grid-template-columns: repeat(4,1fr); } }

/* Tabs */
.admin-tabs { display:flex; gap:6px; margin:20px 0 16px; background:var(--glass); border:1px solid var(--border); border-radius:14px; padding:5px; }
.admin-tab  { flex:1; padding:9px 4px; border:none; background:transparent; border-radius:10px; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; transition:.2s; }
.admin-tab.active { background:var(--glass-high); color:var(--text); }

.admin-pane { }
.admin-pane.hidden { display:none; }

/* Period buttons */
.period-btns { display:flex; gap:6px; }
.period-btn  { padding:7px 16px; border:1px solid var(--border); background:var(--glass); border-radius:20px; color:var(--text-dim); font-size:12px; font-weight:600; cursor:pointer; transition:.2s; }
.period-btn.active { background:var(--primary-glow); border-color:var(--primary); color:var(--primary); }

/* Leaderboard rows */
.lb-row { display:flex; align-items:center; gap:12px; background:var(--glass); border:1px solid var(--border); border-radius:16px; padding:12px 16px; margin-bottom:8px; transition:.2s; }
.lb-row:hover { background:var(--glass-mid); }
.lb-top       { border-color:rgba(251,191,36,.25); background:rgba(251,191,36,.05); }
.lb-medal     { font-size:22px; min-width:32px; text-align:center; line-height:1; }
.rank-num     { font-size:16px; font-weight:800; color:var(--text-muted); }
.lb-info      { flex:1; min-width:0; }
.lb-name      { font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lb-meta      { font-size:11px; color:var(--text-muted); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lb-amount    { font-size:15px; font-weight:800; color:var(--success); white-space:nowrap; }
.lb-bar-track { display:inline-block; width:60px; height:4px; background:rgba(255,255,255,.08); border-radius:2px; vertical-align:middle; overflow:hidden; }
.lb-bar-fill  { height:100%; border-radius:2px; transition:width .6s; }

/* Role badges */
.role-badge            { font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.4px; }
.role-inspector        { background:rgba(96,165,250,.15); color:#60a5fa; }
.role-admin            { background:rgba(168,85,247,.18); color:#c084fc; }
.role-superadmin       { background:rgba(251,191,36,.18); color:#fbbf24; }
.role-subscriber       { background:rgba(255,255,255,.08); color:var(--text-dim); }

/* Active dot */
.active-dot       { display:inline-block; width:7px; height:7px; border-radius:50%; }
.active-dot.green { background:#34d399; box-shadow:0 0 6px #34d399; }
.active-dot.red   { background:#f87171; }

/* Toolbar */
.admin-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.admin-search-wrap { flex:1; position:relative; }
.search-ico    { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; }
.admin-search  { width:100%; padding:10px 12px 10px 38px; background:var(--glass); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:14px; outline:none; transition:.2s; }
.admin-search:focus { border-color:var(--primary); background:var(--glass-mid); }

.role-filter  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.role-chip    { padding:5px 12px; border:1px solid var(--border); background:var(--glass); border-radius:20px; color:var(--text-dim); font-size:12px; font-weight:600; cursor:pointer; transition:.2s; }
.role-chip.active { background:var(--primary-glow); border-color:var(--primary); color:var(--primary); }

/* User cards */
.user-card    { display:flex; align-items:center; gap:12px; background:var(--glass); border:1px solid var(--border); border-radius:16px; padding:12px 14px; margin-bottom:8px; }
.user-avatar  { width:42px; height:42px; min-width:42px; border-radius:12px; background:var(--primary-glow); border:1px solid var(--primary); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--primary); text-transform:uppercase; }
.user-info    { flex:1; min-width:0; }
.user-fullname{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.user-meta    { font-size:11px; color:var(--text-muted); margin-top:3px; }
.user-actions { display:flex; gap:6px; }
.btn-icon     { width:34px; height:34px; border:1px solid var(--border); background:var(--glass); border-radius:10px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.15s; }
.btn-icon:hover { background:var(--glass-high); }
.btn-icon.btn-ghost-danger  { border-color:rgba(248,113,113,.3); }
.btn-icon.btn-ghost-success { border-color:rgba(52,211,153,.3); }

/* Pagination */
.pagination-wrap { display:flex; gap:6px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.page-btn        { width:34px; height:34px; border:1px solid var(--border); background:var(--glass); border-radius:10px; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.page-btn.active { background:var(--primary-glow); border-color:var(--primary); color:var(--primary); }

/* Complaint cards */
.complaint-card    { background:var(--glass); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:10px; }
.complaint-head    { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.complaint-status  { font-size:12px; font-weight:700; }
.complaint-date    { font-size:11px; color:var(--text-muted); }
.complaint-text    { font-size:13px; color:var(--text-dim); line-height:1.5; margin-bottom:10px; }
.complaint-photo   { width:100%; max-height:200px; object-fit:cover; border-radius:10px; margin-bottom:10px; }
.complaint-actions { display:flex; gap:8px; }

/* Form helpers */
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-group  { margin-bottom:14px; }
.form-label  { display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.form-input,.form-select { width:100%; padding:11px 14px; background:var(--glass); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:14px; outline:none; transition:.2s; font-family:inherit; box-sizing:border-box; }
.form-input:focus,.form-select:focus { border-color:var(--primary); background:var(--glass-mid); }
.form-select option { background:#1a1a3e; }
.form-hint   { font-size:11px; color:var(--text-muted); margin-top:4px; }
.toggle-row  { display:flex; align-items:center; justify-content:space-between; background:var(--glass); border:1px solid var(--border); border-radius:12px; padding:11px 14px; }
.toggle-lbl  { font-size:14px; color:var(--text); }
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-knob { position:absolute; inset:0; background:rgba(255,255,255,.12); border-radius:12px; cursor:pointer; transition:.25s; }
.toggle-switch input:checked + .toggle-knob { background:var(--primary-dk); }
.toggle-knob::before { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.25s; }
.toggle-switch input:checked + .toggle-knob::before { transform:translateX(20px); }
.modal-actions { display:flex; gap:10px; margin-top:8px; }
.btn-primary   { flex:1; padding:13px; background:var(--primary-dk); border:none; border-radius:12px; color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; }
.btn-primary:hover { background:var(--primary); }
.btn-ghost     { flex:1; padding:13px; background:var(--glass); border:1px solid var(--border); border-radius:12px; color:var(--text-dim); font-size:15px; font-weight:600; cursor:pointer; transition:.2s; }
.btn-ghost-danger  { padding:9px 14px; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); border-radius:10px; color:var(--danger); font-size:13px; font-weight:600; cursor:pointer; transition:.2s; }
.btn-ghost-success { padding:9px 14px; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); border-radius:10px; color:var(--success); font-size:13px; font-weight:600; cursor:pointer; transition:.2s; }
.add-user-btn  { padding:10px 18px; font-size:13px; display:flex; align-items:center; gap:6px; white-space:nowrap; border-radius:12px; flex:none; }

/* ── Staff Stats Cards ───────────────────────────────── */
.staff-dates      { display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-bottom:12px; padding:0 2px; }
.staff-today-lbl  { color:var(--success); font-weight:600; }
.staff-yday-lbl   { color:var(--text-muted); }

.staff-card  { display:flex; align-items:flex-start; gap:12px; background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:14px; margin-bottom:10px; }
.staff-rank  { font-size:22px; min-width:32px; text-align:center; line-height:1; padding-top:2px; }
.rank-num    { font-size:14px; font-weight:800; color:var(--text-muted); }
.staff-info  { flex:1; min-width:0; }
.staff-name  { font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }

.staff-days   { display:grid; grid-template-columns:1fr auto 1fr auto; gap:8px; align-items:center; }
.staff-day    { }
.sday-label   { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.sday-ind     { font-size:12px; color:var(--text-dim); }
.sday-sum     { font-size:16px; font-weight:800; color:var(--text); margin-top:2px; }
.today-col .sday-sum { color:var(--success); }
.staff-sep    { width:1px; height:40px; background:var(--border); }
.staff-diff   { display:flex; align-items:center; justify-content:flex-end; }

.diff-up   { color:var(--success); font-size:13px; font-weight:700; }
.diff-down { color:var(--danger);  font-size:13px; font-weight:700; }
.diff-flat { color:var(--text-muted); font-size:13px; font-weight:600; }

/* ── Dashboard Seal Section ──────────────────────────── */
.seal-alert-section { border:1px solid rgba(251,191,36,.25); background:rgba(251,191,36,.06); border-radius:var(--radius); padding:14px; margin-bottom:16px; }
.seal-title   { display:flex; align-items:center; gap:10px; color:var(--warning); font-weight:700; font-size:15px; margin-bottom:14px; }
.seal-badge   { background:var(--warning); color:#000; font-size:11px; font-weight:900; padding:2px 8px; border-radius:20px; min-width:22px; text-align:center; }

.seal-card    { display:flex; align-items:center; gap:12px; background:var(--glass); border:1px solid rgba(251,191,36,.2); border-radius:16px; padding:12px; margin-bottom:8px; cursor:pointer; transition:.15s; }
.seal-card:hover { background:var(--glass-mid); }
.seal-card-urgent { border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.05); }

.seal-photo-wrap { position:relative; flex-shrink:0; }
.seal-photo   { width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--glass-mid); }
.seal-days-badge { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); background:var(--warning); color:#000; font-size:10px; font-weight:900; padding:1px 7px; border-radius:20px; white-space:nowrap; }
.seal-days-badge.urgent { background:var(--danger); color:#fff; }

.seal-info    { flex:1; min-width:0; }
.seal-acc     { font-size:15px; font-weight:800; color:var(--text); }
.seal-meta    { font-size:11px; color:var(--text-muted); margin-top:2px; }
.seal-debt    { font-size:13px; font-weight:700; color:var(--warning); margin-top:4px; }

.seal-done-btn { padding:8px 14px; background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.4); border-radius:10px; color:var(--warning); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:.15s; flex-shrink:0; }
.seal-done-btn:hover { background:rgba(251,191,36,.25); }

/* ── Admin Complaints / Seal Tab ─────────────────────── */
.admin-seal-head    { margin-bottom:14px; }
.admin-seal-info    { font-size:12px; color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
.seal-filter-row    { display:flex; gap:6px; }
.seal-filter-btn    { padding:7px 14px; background:var(--glass); border:1px solid var(--border); border-radius:20px; color:var(--text-dim); font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.seal-filter-btn.active { background:rgba(251,191,36,.15); border-color:rgba(251,191,36,.4); color:var(--warning); }

.admin-complaint-card { display:flex; align-items:flex-start; gap:12px; background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:12px; margin-bottom:10px; cursor:pointer; transition:.15s; }
.admin-complaint-card:hover { background:var(--glass-mid); }
.acomp-left  { flex-shrink:0; }
.acomp-photo { width:72px; height:72px; border-radius:12px; object-fit:cover; background:var(--glass-mid); display:block; }
.acomp-nophoto { width:72px; height:72px; border-radius:12px; background:var(--glass-mid); display:flex; align-items:center; justify-content:center; font-size:22px; }
.acomp-body  { flex:1; min-width:0; }
.acomp-top   { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.acomp-acc   { font-size:15px; font-weight:800; color:var(--text); }
.acomp-insp  { font-size:12px; color:var(--text-dim); margin-bottom:2px; }
.acomp-meta  { font-size:11px; color:var(--text-muted); }
.acomp-note  { font-size:12px; color:var(--text-dim); margin-top:4px; font-style:italic; }
.acomp-action { flex-shrink:0; display:flex; align-items:center; }
.admin-seal-btn { padding:8px 12px; background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.4); border-radius:10px; color:var(--warning); font-size:12px; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; }
.admin-seal-btn:hover { background:rgba(251,191,36,.28); }

/* Badges */
.badge-warn    { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:rgba(251,191,36,.15); color:var(--warning); }
.badge-success { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--success-bg); color:var(--success); }
.badge-danger  { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--danger-bg); color:var(--danger); }
.badge-info    { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:rgba(129,140,248,.15); color:var(--primary); }

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle-btn { display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px; background:var(--glass); border:1px solid var(--border); border-radius:12px; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; transition:.2s; margin-bottom:10px; }
.theme-toggle-btn:hover { background:var(--glass-mid); color:var(--text); }

/* Show/hide icons based on current theme */
[data-theme="dark"]  .theme-ico-light,
[data-theme="dark"]  .theme-lbl-light { display:none; }
[data-theme="light"] .theme-ico-dark,
[data-theme="light"] .theme-lbl-dark  { display:none; }

/* Mobile bottom nav theme btn */
#theme-toggle-mob { flex-direction:column; justify-content:center; gap:0; padding:6px 0; background:none; border:none; flex:1; font-size:22px; }

/* Light mode overrides for structural elements */
[data-theme="light"] .bg-mesh { opacity:.4; filter:hue-rotate(200deg) saturate(0.5); }
[data-theme="light"] .sidebar  { background:rgba(224,231,255,.85); border-color:var(--border); }
[data-theme="light"] .bottom-nav { background:rgba(224,231,255,.92); border-color:var(--border); }
[data-theme="light"] .modal-sheet { background:rgba(240,244,255,.97); }
[data-theme="light"] .stat-card { box-shadow:0 4px 20px rgba(99,102,241,.12); }
[data-theme="light"] .skel { background:rgba(99,102,241,.10); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { color:var(--text); }
[data-theme="light"] .form-select option { background:#e0e7ff; color:var(--text); }

/* Subscriber page — seal warning */
.seal-warn-banner { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.35); border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; color:var(--warning); margin-bottom:10px; }
.text-yellow { color:var(--warning) !important; }