/* ============================================================
   DSPRX Panel — Design System (Final)
   One file. No legacy. No conflicts.
   ============================================================ */

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

:root {
  --bg0: #060810;   /* deepest background */
  --bg1: #0b0d1a;   /* sidebar / right panel */
  --bg2: #0f1222;   /* cards */
  --bg3: #131728;   /* card hover / inputs */
  --bg4: #181d30;   /* nested surfaces */

  --bd:  rgba(255,255,255,.07);
  --bd2: rgba(255,255,255,.04);
  --bdf: rgba(91,142,245,.5);

  --t1: rgba(232,244,255,.95);
  --t2: rgba(170,200,240,.68);
  --t3: rgba(110,150,210,.42);
  --t4: rgba(70,110,180,.26);

  --blue:   #5b8ef5;
  --cyan:   #22d3ee;
  --green:  #34d399;
  --yellow: #fbbf24;
  --red:    #f87171;
  --purple: #a78bfa;
  --orange: #fb923c;

  --r1: 14px; --r2: 10px; --r3: 7px; --r4: 5px;
  --ease: .15s cubic-bezier(.4,0,.2,1);
  --sh1: 0 2px 8px rgba(0,0,0,.4);
  --sh2: 0 4px 20px rgba(0,0,0,.55);
  --sh3: 0 8px 40px rgba(0,0,0,.7);
  /* ── Legacy variable aliases (for FP/billing templates) ── */
  --bg-body:        var(--bg0);
  --bg-base:        var(--bg1);
  --bg-card:        var(--bg2);
  --bg-card2:       var(--bg3);
  --bg-surface:     var(--bg3);
  --bg-input:       var(--bg3);
  --bg-hover:       rgba(255,255,255,.04);
  --border:         var(--bd);
  --border-light:   var(--bd2);
  --border-focus:   var(--bdf);
  --text-primary:   var(--t1);
  --text-secondary: var(--t2);
  --text-muted:     var(--t3);
  --accent-blue:    var(--blue);
  --accent-cyan:    var(--cyan);
  --accent-green:   var(--green);
  --accent-yellow:  var(--yellow);
  --accent-red:     var(--red);
  --accent-purple:  var(--purple);
  --accent-orange:  var(--orange);
  --glow-blue:      rgba(91,142,245,.15);
  --glow-cyan:      rgba(34,211,238,.15);
  --glow-green:     rgba(52,211,153,.12);
  --glow-purple:    rgba(167,139,250,.12);
  --radius:         var(--r1);
  --radius-sm:      var(--r2);
  --radius-xs:      var(--r3);
  --transition:     var(--ease);
  --transition-fast: .1s ease;
  --shadow-sm:      var(--sh1);
  --shadow:         var(--sh2);
  --shadow-lg:      var(--sh3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 14px; -webkit-text-size-adjust: 100% }
body { background: var(--bg0); color: var(--t1); min-height: 100vh; overflow-x: hidden; line-height: 1.55; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font-family: inherit; font-size: inherit }

/* ============================================================
   CLIENT LAYOUT
   ============================================================ */

.layout { display: flex; min-height: 100vh }

/* Sidebar */
.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--bg1); border-right: 1px solid var(--bd);
  position: fixed; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  z-index: 200; overflow-y: auto; overflow-x: hidden;
}

.sb-logo {
  height: 56px; box-sizing: border-box;
  padding: 0 16px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.sb-mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex; align-items: center; justify-content: center;
}
.sb-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em }

.sb-nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 1px }
.sb-sect { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); padding: 12px 10px 5px }
.sb-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r3);
  font-size: 12.5px; font-weight: 500; color: var(--t2);
  transition: all var(--ease); position: relative;
}
.sb-link:hover { background: rgba(255,255,255,.04); color: var(--t1) }
.sb-link.on { background: rgba(91,142,245,.1); color: var(--blue); font-weight: 600 }
.sb-link.on::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue) }
.sb-link svg { opacity: .5; flex-shrink: 0; transition: opacity var(--ease) }
.sb-link:hover svg, .sb-link.on svg { opacity: 1 }
.sb-num { margin-left: auto; font-size: 9.5px; font-weight: 700; background: var(--red); color: #fff; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center }

.sb-foot { padding: 8px; border-top: 1px solid var(--bd); flex-shrink: 0 }
.sb-card { display: flex; align-items: center; gap: 9px; padding: 9px 10px; background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r2); margin-bottom: 4px }
.sb-av { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff }
.sb-uname { font-size: 12px; font-weight: 700; line-height: 1.2 }
.sb-ubal { font-size: 10.5px; color: var(--cyan); font-weight: 600 }
.sb-online { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--green); box-shadow: 0 0 5px rgba(52,211,153,.5); margin-left: auto }
.sb-act { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r3); font-size: 12px; color: var(--t3); transition: color var(--ease) }
.sb-act:hover { color: var(--t1) }
.sb-act.logout:hover { color: var(--red) }

/* Main */
.main { margin-left: 230px; flex: 1; display: flex; flex-direction: column; min-width: 0 }

.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,8,16,.88); backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; height: 56px; flex-shrink: 0;
}
.tb-title { font-size: 14px; font-weight: 700; flex: 1; min-width: 0 }
.tb-bal {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 20px; font-size: 12.5px; font-weight: 700; transition: all var(--ease);
}
.tb-bal:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.tb-icon { width: 32px; height: 32px; border-radius: var(--r3); background: var(--bg2); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; color: var(--t2); transition: all var(--ease); flex-shrink: 0; position: relative }
.tb-icon:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.ndot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg0) }

.pg-body { padding: 20px; flex: 1 }

/* ============================================================
   ADMIN LAYOUT — 3-COLUMN (left sidebar + center + right)
   ============================================================ */

.adm-wrap { display: flex; min-height: 100vh }

.adm-sb {
  width: 220px; flex-shrink: 0;
  background: var(--bg1); border-right: 1px solid var(--bd);
  position: fixed; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  z-index: 200; overflow-y: auto;
}

.adm-center {
  margin-left: 220px;
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}

.adm-right { display: none }

/* Admin sidebar */
.adm-logo {
  height: 60px; box-sizing: border-box;
  padding: 0 16px; border-bottom: 1px solid var(--bd);
  display: flex; flex-direction: row; align-items: center; gap: 11px; flex-shrink: 0;
}
.adm-logo-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.adm-logo-title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--t1) }

.adm-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px }
.adm-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r2);
  font-size: 13px; font-weight: 500; color: var(--t2);
  transition: all var(--ease); position: relative;
}
.adm-link:hover { background: rgba(255,255,255,.04); color: var(--t1) }
.adm-link.on { background: rgba(91,142,245,.12); color: var(--blue); font-weight: 600 }
.adm-link.on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue) }
.adm-link svg { opacity: .55; flex-shrink: 0; transition: opacity var(--ease) }
.adm-link:hover svg, .adm-link.on svg { opacity: 1 }
.adm-num { margin-left: auto; font-size: 9.5px; font-weight: 700; background: var(--red); color: #fff; padding: 2px 7px; border-radius: 10px }

.adm-foot { padding: 12px 8px; border-top: 1px solid var(--bd) }
.adm-user { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r2); margin-bottom: 6px }
.adm-av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff }
.adm-uname { font-size: 12px; font-weight: 700 }
.adm-urole { font-size: 10.5px; color: var(--blue); font-weight: 600 }

/* Admin topbar */
.adm-tb {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,8,16,.9); backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px; height: 60px; flex-shrink: 0;
}
.adm-tb-time { font-size: 12px; color: var(--t2) }
.adm-search {
  flex: 1; max-width: 280px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 0 12px; height: 34px;
  transition: border-color var(--ease);
}
.adm-search:focus-within { border-color: rgba(91,142,245,.4) }
.adm-search input { border: none; background: none; color: var(--t1); font-size: 12.5px; width: 100%; outline: none }
.adm-search input::placeholder { color: var(--t3) }
.adm-tb-right { display: flex; align-items: center; gap: 8px; margin-left: auto }
.adm-tb-icon { width: 34px; height: 34px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; color: var(--t2); transition: all var(--ease); position: relative }
.adm-tb-icon:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.adm-tb-user { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 20px; transition: all var(--ease); cursor: pointer }
.adm-tb-user:hover { border-color: rgba(91,142,245,.3) }
.adm-tb-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff }

.adm-content { padding: 22px; flex: 1 }

/* Right panel */
.rp-head { padding: 18px 16px 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px }
.rp-title { font-size: 14px; font-weight: 700 }
.rp-grid-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; cursor: pointer }
.rp-body { padding: 0 10px 20px }
.rp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r2);
  background: var(--bg2); border: 1px solid var(--bd);
  font-size: 13px; font-weight: 500; color: var(--t2);
  transition: all var(--ease); margin-bottom: 6px;
}
.rp-item:hover { background: var(--bg3); border-color: rgba(91,142,245,.2); color: var(--t1) }
.rp-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rp-sec { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); padding: 14px 12px 8px }
.rp-btn { display: block; text-align: center; padding: 9px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--bd); font-size: 12.5px; font-weight: 600; color: var(--t2); margin-bottom: 6px; transition: all var(--ease) }
.rp-btn:hover { background: var(--bg3); border-color: rgba(91,142,245,.25); color: var(--blue) }

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */

.burger { display: none; width: 32px; height: 32px; border-radius: var(--r3); background: var(--bg2); border: 1px solid var(--bd); cursor: pointer; align-items: center; justify-content: center; color: var(--t2); flex-shrink: 0 }
.sb-ov  { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 199; background: rgba(0,0,0,.65) }
.sb-ov.open { display: block }
.adm-ov { display: none; position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.65) }
.adm-ov.open { display: block }

@media (max-width: 1280px) { .adm-right { display: none } .adm-center { margin-right: 0 } }
@media (max-width: 900px) {
  .adm-sb { transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1) }
  .adm-sb.open { transform: translateX(0); box-shadow: var(--sh3) }
  .adm-center { margin-left: 0 }
  .burger { display: flex }
  .adm-content { padding: 12px }
  /* Topbar compact */
  .adm-tb { padding: 0 12px; height: 52px }
  .adm-tb-title { font-size: 14px }
  /* Tables: scroll wrapper */
  .tw, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
  table { min-width: 540px }
  /* KPI grids */
  .fin-kpi { grid-template-columns: 1fr 1fr !important }
  .fin-grid { grid-template-columns: 1fr !important }
  /* Buttons shrink */
  .btn { padding: 6px 12px; font-size: 12px }
  /* Page header flex wrap */
  .f.jb { flex-wrap: wrap; gap: 10px }
  /* Hide some table columns on mobile via class */
  .hide-mob { display: none !important }
}
@media (max-width: 600px) {
  .adm-content { padding: 10px }
  .adm-tb { padding: 0 10px; height: 48px; gap: 8px }
  /* KPI single col on phones */
  .fin-kpi { grid-template-columns: 1fr !important }
  /* table min-width smaller */
  table { min-width: 400px }
  /* Card padding */
  .card { padding: 14px }
  /* Topbar: hide user text, keep avatar only */
  .adm-tb span[style*="font-size:12.5px"] { display: none }
  /* Settings form: full width inputs */
  .settings-row { flex-direction: column; align-items: flex-start !important }
  .settings-row input { width: 100% !important; max-width: 100% !important }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1) }
  .sidebar.open { transform: translateX(0); box-shadow: var(--sh3) }
  .main { margin-left: 0 }
  .burger { display: flex }
  .pg-body { padding: 14px }
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Cards */
.card { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r1); padding: 18px; position: relative; overflow: hidden }
.card-sm { border-radius: var(--r2); padding: 14px }
.ct { font-size: 13px; font-weight: 700 }
.cs { font-size: 12px; color: var(--t3); margin-top: 1px }

/* KPI stat cards (like reference) */
.kpi {
  background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r1);
  padding: 18px 20px; position: relative; overflow: hidden;
  display: block; color: inherit; transition: all var(--ease);
}
.kpi:hover { border-color: rgba(255,255,255,.12); transform: translateY(-1px); box-shadow: var(--sh2) }
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); margin-bottom: 8px }
.kpi-val { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px }
.kpi-delta { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px }
.kpi-delta.up { color: var(--green) }
.kpi-delta.down { color: var(--red) }
.kpi-delta.neutral { color: var(--t3) }
.kpi-spark { position: absolute; right: 12px; bottom: 14px; opacity: .8 }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: var(--r3); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all var(--ease); font-family: inherit; white-space: nowrap }
.bp { background: var(--blue); color: #fff; border-color: var(--blue) }
.bp:hover { background: #4a7de8; box-shadow: 0 4px 14px rgba(91,142,245,.4) }
.bs { background: var(--bg3); border-color: var(--bd); color: var(--t2) }
.bs:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.bd { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.2); color: var(--red) }
.bd:hover { background: rgba(248,113,113,.15) }
.bg { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.2); color: var(--green) }
.bg:hover { background: rgba(52,211,153,.15) }
.bsm { padding: 5px 10px; font-size: 12px }
.bxs { padding: 3px 8px; font-size: 11px; border-radius: var(--r4) }
.wf { width: 100%; justify-content: center }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; border: 1px solid }
.badge-active    { background: rgba(52,211,153,.1);  color: var(--green);  border-color: rgba(52,211,153,.2) }
.badge-pending   { background: rgba(251,191,36,.1);  color: var(--yellow); border-color: rgba(251,191,36,.2) }
.badge-submitted { background: rgba(251,191,36,.1);  color: var(--yellow); border-color: rgba(251,191,36,.2) }
.badge-confirmed { background: rgba(52,211,153,.1);  color: var(--green);  border-color: rgba(52,211,153,.2) }
.badge-expired   { background: rgba(248,113,113,.1); color: var(--red);    border-color: rgba(248,113,113,.2) }
.badge-cancelled { background: rgba(130,155,200,.1); color: var(--t3);     border-color: rgba(130,155,200,.2) }
.badge-inactive  { background: rgba(130,155,200,.1); color: var(--t3);     border-color: rgba(130,155,200,.2) }
.badge-admin     { background: rgba(167,139,250,.1); color: var(--purple); border-color: rgba(167,139,250,.2) }
.badge-user      { background: rgba(91,142,245,.1);  color: var(--blue);   border-color: rgba(91,142,245,.2) }
.b-g { background: rgba(52,211,153,.1);  color: var(--green);  border-color: rgba(52,211,153,.2) }
.b-y { background: rgba(251,191,36,.1);  color: var(--yellow); border-color: rgba(251,191,36,.2) }
.b-r { background: rgba(248,113,113,.1); color: var(--red);    border-color: rgba(248,113,113,.2) }
.b-b { background: rgba(91,142,245,.1);  color: var(--blue);   border-color: rgba(91,142,245,.2) }
.b-c { background: rgba(34,211,238,.1);  color: var(--cyan);   border-color: rgba(34,211,238,.2) }
.b-p { background: rgba(167,139,250,.1); color: var(--purple); border-color: rgba(167,139,250,.2) }

/* Forms */
.fg { margin-bottom: 14px }
.fl { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 5px }
.fc { display: block; width: 100%; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r3); padding: 8px 12px; color: var(--t1); font-size: 13px; font-family: inherit; transition: border-color var(--ease), box-shadow var(--ease); outline: none }
.fc:focus { border-color: var(--bdf); box-shadow: 0 0 0 3px rgba(91,142,245,.1) }
.fc::placeholder { color: var(--t4) }
.fcsm { padding: 6px 10px; font-size: 12px }
textarea.fc { resize: vertical; min-height: 80px }
select.fc { cursor: pointer }
.fh { font-size: 11.5px; color: var(--t3); margin-top: 3px }

/* Alerts */
.al { padding: 10px 14px; border-radius: var(--r3); font-size: 13px; margin-bottom: 12px; border: 1px solid }
.al-ok  { background: rgba(52,211,153,.07);  border-color: rgba(52,211,153,.2);  color: var(--green) }
.al-err { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.2); color: var(--red) }
.al-inf { background: rgba(91,142,245,.07);  border-color: rgba(91,142,245,.2);  color: var(--blue) }
.al-wrn { background: rgba(251,191,36,.07);  border-color: rgba(251,191,36,.2);  color: var(--yellow) }
/* legacy compat */
.alert { padding: 10px 14px; border-radius: var(--r3); font-size: 13px; margin-bottom: 12px; border: 1px solid }
.alert-success { background: rgba(52,211,153,.07);  border-color: rgba(52,211,153,.2);  color: var(--green) }
.alert-danger  { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.2); color: var(--red) }
.alert-info    { background: rgba(91,142,245,.07);  border-color: rgba(91,142,245,.2);  color: var(--blue) }
.alert-warning { background: rgba(251,191,36,.07);  border-color: rgba(251,191,36,.2);  color: var(--yellow) }

/* Tables */
.tw { overflow-x: auto }
table { width: 100%; border-collapse: collapse }
th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); padding: 8px 12px; border-bottom: 1px solid var(--bd); text-align: left; white-space: nowrap }
td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--bd2); color: var(--t2); vertical-align: middle }
tr:last-child td { border-bottom: none }
tr:hover td { background: rgba(255,255,255,.017) }

/* Progress */
.prog { height: 4px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden }
.pf   { height: 100%; border-radius: 3px; transition: width .6s ease }

/* Status dots */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block }
.dot-g { background: var(--green);  box-shadow: 0 0 5px rgba(52,211,153,.45) }
.dot-y { background: var(--yellow); box-shadow: 0 0 5px rgba(251,191,36,.4) }
.dot-r { background: var(--red);    box-shadow: 0 0 5px rgba(248,113,113,.4) }
.dot-b { background: var(--blue) }

/* Modal */
.mbg { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); align-items: center; justify-content: center }
.mbg.open { display: flex }
.mbox { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r1); padding: 22px; width: 100%; box-shadow: var(--sh3); max-height: 90vh; overflow-y: auto }
.mhd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px }

/* Auth */
.auth-pg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg0) }
.auth-pg::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 700px 500px at 20% 30%, rgba(91,142,245,.05) 0%, transparent 70%), radial-gradient(ellipse 500px 400px at 80% 70%, rgba(34,211,238,.04) 0%, transparent 70%) }
.auth-card { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r1); padding: 30px 28px; width: 100%; max-width: 376px; box-shadow: var(--sh3); position: relative; z-index: 1 }
.auth-logo { text-align: center; margin-bottom: 24px }
.auth-ico { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 10px; background: linear-gradient(135deg, var(--blue), var(--cyan)); display: flex; align-items: center; justify-content: center }
.auth-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 3px }
.auth-desc { font-size: 12px; color: var(--t3) }

/* Page header */
.ph { margin-bottom: 18px }
.pt { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px }
.ps { font-size: 12px; color: var(--t3) }

/* Compat */
.page-header { margin-bottom: 18px }
.page-title  { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px }
.page-subtitle { font-size: 12px; color: var(--t3) }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.card-title  { font-size: 13px; font-weight: 700 }
.card-subtitle { font-size: 12px; color: var(--t3); margin-top: 1px }
.card-glow-blue  { box-shadow: 0 0 30px rgba(91,142,245,.06) }
.card-glow-cyan  { box-shadow: 0 0 30px rgba(34,211,238,.06) }
.card-glow-green { box-shadow: 0 0 30px rgba(52,211,153,.06) }
.stat-card { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r1); padding: 16px 18px; position: relative; overflow: hidden; display: block; color: inherit; transition: all var(--ease) }
.stat-card[href]:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.11); box-shadow: var(--sh2) }
.stat-icon  { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px }
.stat-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); margin-bottom: 5px }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1 }
.stat-sub   { font-size: 11.5px; color: var(--t3); margin-top: 4px }
.btn-primary   { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: var(--r3); font-size: 13px; font-weight: 600; cursor: pointer; background: var(--blue); color: #fff; border: 1px solid var(--blue); transition: all var(--ease); font-family: inherit; white-space: nowrap }
.btn-primary:hover { background: #4a7de8; box-shadow: 0 4px 14px rgba(91,142,245,.4) }
.btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: var(--r3); font-size: 13px; font-weight: 600; cursor: pointer; background: var(--bg3); color: var(--t2); border: 1px solid var(--bd); transition: all var(--ease); font-family: inherit; white-space: nowrap }
.btn-secondary:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.btn-danger  { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: var(--r3); font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(248,113,113,.08); color: var(--red); border: 1px solid rgba(248,113,113,.2); transition: all var(--ease); font-family: inherit; white-space: nowrap }
.btn-success { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: var(--r3); font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(52,211,153,.08); color: var(--green); border: 1px solid rgba(52,211,153,.2); transition: all var(--ease); font-family: inherit; white-space: nowrap }
.btn-sm { padding: 5px 10px !important; font-size: 12px !important }
.btn-xs { padding: 3px 8px !important; font-size: 11px !important; border-radius: var(--r4) !important }
.form-group   { margin-bottom: 14px }
.form-label   { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 5px }
.form-control { display: block; width: 100%; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r3); padding: 8px 12px; color: var(--t1); font-size: 13px; font-family: inherit; transition: border-color var(--ease), box-shadow var(--ease); outline: none }
.form-control:focus { border-color: var(--bdf); box-shadow: 0 0 0 3px rgba(91,142,245,.1) }
.form-control::placeholder { color: var(--t4) }
.form-hint    { font-size: 11.5px; color: var(--t3); margin-top: 3px }
.table-wrap   { overflow-x: auto }
.font-bold    { font-weight: 700 }
.font-mono    { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px }
.rate-badge   { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.15); color: var(--cyan) }
.fp-2col      { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 230px; right: 0; bottom: 0; z-index: 199; background: rgba(0,0,0,.65) }
.sidebar-overlay.open { display: block }
.topbar-balance { display: flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 20px; font-size: 12.5px; font-weight: 700; transition: all var(--ease) }
.topbar-balance:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.topbar-icon-btn { width: 32px; height: 32px; border-radius: var(--r3); background: var(--bg2); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; color: var(--t2); transition: all var(--ease); flex-shrink: 0; position: relative }
.topbar-icon-btn:hover { border-color: rgba(91,142,245,.3); color: var(--blue) }
.hamburger { display: none; width: 32px; height: 32px; border-radius: var(--r3); background: var(--bg2); border: 1px solid var(--bd); align-items: center; justify-content: center; cursor: pointer; color: var(--t2); flex-shrink: 0 }
.sidebar-nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 1px }
.sidebar-section { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); padding: 12px 10px 5px }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r3); font-size: 12.5px; font-weight: 500; color: var(--t2); transition: all var(--ease); position: relative }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--t1) }
.nav-item.active { background: rgba(91,142,245,.1); color: var(--blue); font-weight: 600 }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue) }
.nav-badge { margin-left: auto; font-size: 9.5px; font-weight: 700; background: var(--red); color: #fff; padding: 1px 6px; border-radius: 10px }
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px; border-bottom: 1px solid var(--bd) }
.logo-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--cyan)); display: flex; align-items: center; justify-content: center }

/* Utilities */
.f  { display: flex }
.fc-col { flex-direction: column }
.aic { align-items: center }
.ais { align-items: flex-start }
.jb  { justify-content: space-between }
.jc  { justify-content: center }
.fw  { flex-wrap: wrap }
.f1  { flex: 1 }
.mw0 { min-width: 0 }
.fs  { flex-shrink: 0 }
.g1{gap:4px} .g2{gap:8px} .g3{gap:12px} .g4{gap:16px} .g5{gap:20px}
.mb1{margin-bottom:4px} .mb2{margin-bottom:8px} .mb3{margin-bottom:12px} .mb4{margin-bottom:16px} .mb5{margin-bottom:20px}
.mt1{margin-top:4px} .mt2{margin-top:8px} .mt3{margin-top:12px} .mt4{margin-top:16px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-5{margin-bottom:20px}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.g2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.g3x3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.g-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px }
.tc{text-align:center} .tr{text-align:right}
.t1{color:var(--t1)} .t2{color:var(--t2)} .t3{color:var(--t3)}
.bc{color:var(--blue)} .cc{color:var(--cyan)} .gc{color:var(--green)} .rc{color:var(--red)} .yc{color:var(--yellow)}
.fw6{font-weight:600} .fw7{font-weight:700} .fw8{font-weight:800}
.fs11{font-size:11px} .fs12{font-size:12px} .fs13{font-size:13px}
.mono{font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}

@media (max-width: 768px) {
  .g2x2,.g3x3,.g-auto{grid-template-columns:1fr}
  .fp-2col{grid-template-columns:1fr !important}
}

/* ── Flex utility aliases ── */
.flex { display: flex }
.inline-flex { display: inline-flex }
.flex-col { flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.items-center { align-items: center }
.items-start { align-items: flex-start }
.items-end { align-items: flex-end }
.justify-center { justify-content: center }
.justify-between { justify-content: space-between }
.justify-end { justify-content: flex-end }
.gap-1 { gap: 4px } .gap-2 { gap: 8px } .gap-3 { gap: 12px } .gap-4 { gap: 16px }
.flex-1 { flex: 1 } .min-w-0 { min-width: 0 } .flex-shrink-0 { flex-shrink: 0 }
.w-full { width: 100% } .h-full { height: 100% }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}
.text-sm{font-size:12px}.text-xs{font-size:11px}.font-mono{font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px}
.text-muted{color:var(--t3)}.text-secondary{color:var(--t2)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rounded{border-radius:var(--r3)}.rounded-lg{border-radius:var(--r1)}
.border{border:1px solid var(--bd)}.border-2{border:2px solid var(--bd)}

/* ── Modal (legacy class aliases for FP templates) ── */
.modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 16px;
}
.modal-backdrop.open { display: flex }
.modal-box {
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: var(--r1); padding: 24px; width: 100%;
  box-shadow: var(--sh3); max-height: 90vh; overflow-y: auto;
  animation: modalIn .18s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
  from { opacity:0; transform: translateY(-12px) scale(.97) }
  to   { opacity:1; transform: translateY(0) scale(1) }
}
.modal-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.modal-close {
  width: 30px; height: 30px; border-radius: var(--r3);
  background: var(--bg3); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  color: var(--t2); cursor: pointer; transition: all var(--ease);
  flex-shrink: 0;
}
.modal-close:hover { border-color: rgba(248,113,113,.3); color: var(--red) }

/* ── Stat grid for FP dashboard ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-grid .stat-card { border-radius: var(--r2) }

/* ── Trial banner ── */
.trial-banner {
  background: linear-gradient(135deg, rgba(91,142,245,.12), rgba(34,211,238,.08));
  border: 1px solid rgba(91,142,245,.3);
  border-radius: var(--r1); padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; position: relative; overflow: hidden;
}
.trial-banner::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,142,245,.15) 0%, transparent 70%);
  pointer-events: none;
}
.trial-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex; align-items: center; justify-content: center;
}

/* ── BV Chrome picker ── */
dialog.bv-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: min(780px, calc(100vw - 24px));
  width: 100%;
  border-radius: 0;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
dialog.bv-dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(8px); }

.bv-box {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid rgba(99,179,237,.18);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03);
  color: var(--text-primary);
}

.bv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bv-title { font-size: 15px; font-weight: 700; }
.bv-sub { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.bv-close {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 14px;
  transition: all var(--transition);
}
.bv-close:hover { background: rgba(248,113,113,.18); color: #fff; border-color: rgba(248,113,113,.3); }

.bv-toprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.bv-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 4px;
}
.bv-seg button {
  height: 34px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-muted); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: color .12s; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.bv-seg button.is-active { color: var(--text-primary); }
.bv-seg__ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 6px);
  border-radius: 8px;
  background: rgba(99,179,237,.1); border: 1px solid rgba(99,179,237,.25);
  box-shadow: 0 2px 8px rgba(56,189,248,.1);
  transition: transform .16s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.bv-seg[data-mode="manual"] .bv-seg__ind,
.bv-seg[data-plat="windows"] .bv-seg__ind { transform: translateX(calc(100% + 4px)); }
.bv-seg-plat { max-width: 300px; flex: 1; min-width: 200px; }

.bv-mixbox {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 11px;
  background: var(--bg-surface); border: 1px solid var(--border);
}
.bv-mixlabel { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.bv-mixval { min-width: 36px; font-size: 12px; font-weight: 700; color: var(--text-primary); }
#bv_mix, #adm_bv_mix { width: 100px; accent-color: var(--accent-cyan); }

.bv-panel { animation: bvFade .12s ease; }
@keyframes bvFade { from { opacity: 0; transform: translateY(3px); } }
.bv-note {
  margin: 8px 0 12px; font-size: 12px; color: var(--text-muted);
  line-height: 1.6; padding: 8px 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 8px;
}
.bv-note strong { color: var(--text-secondary); font-weight: 700; }

.bv-major-grid { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.bv-major-btn {
  min-width: 64px; height: 36px; border-radius: 9px;
  font-weight: 800; font-size: 13px;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; transition: all .12s;
}
.bv-major-btn:hover { border-color: rgba(99,179,237,.35); color: var(--text-primary); background: rgba(99,179,237,.06); }
.bv-major-btn.is-active {
  background: rgba(99,179,237,.12) !important;
  border-color: rgba(99,179,237,.4) !important;
  color: var(--accent-cyan) !important;
}

.bv-tools { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.bv-selected-row { margin-top: 10px; }
.bv-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 34px; }
.bv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 99px;
  background: rgba(99,179,237,.08); border: 1px solid rgba(99,179,237,.2);
  font-family: monospace; font-size: 11px; color: var(--accent-cyan);
}
.bv-chip__t { font-family: monospace; font-size: 11px; }
.bv-chip__x {
  width: 16px; height: 16px; border-radius: 99px; border: 0;
  background: rgba(255,255,255,.08); color: var(--text-secondary); cursor: pointer; font-size: 10px;
  transition: background .12s;
}
.bv-chip__x:hover { background: rgba(248,113,113,.4); color: #fff; }

.cd-list {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px; max-height: 260px; overflow: auto; padding: 2px; margin-top: 8px;
}
@media(max-width:560px) { .cd-list { grid-template-columns: 1fr; } }

.cd-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; height: 38px; border-radius: 9px;
  padding: 0 12px; border: 1px solid var(--border);
  background: var(--bg-surface); cursor: pointer; transition: all .12s;
}
.cd-item:hover { background: rgba(99,179,237,.07); border-color: rgba(99,179,237,.25); }
.cd-item.is-selected { background: rgba(99,179,237,.12); border-color: rgba(99,179,237,.4); outline: none; }
.cd-v { font-family: monospace; font-size: 12px; color: var(--text-primary); }
.cd-meta { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.bv-status { min-height: 18px; font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.bv-status.is-error { color: var(--accent-red); }
.bv-status.is-ok    { color: var(--accent-green); }

.bv-save-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── stat-card color variants ── */
.stat-card.cyan   { border-color: rgba(34,211,238,.2) }
.stat-card.blue   { border-color: rgba(91,142,245,.2) }
.stat-card.green  { border-color: rgba(52,211,153,.2) }
.stat-card.yellow { border-color: rgba(251,191,36,.2) }
.stat-card.red    { border-color: rgba(248,113,113,.2) }
.stat-card.purple { border-color: rgba(167,139,250,.2) }
.stat-card.cyan   .stat-value { color: var(--cyan) }
.stat-card.blue   .stat-value { color: var(--blue) }
.stat-card.green  .stat-value { color: var(--green) }
.stat-card.yellow .stat-value { color: var(--yellow) }
.stat-card.red    .stat-value { color: var(--red) }
.stat-card.purple .stat-value { color: var(--purple) }

/* ── CSS var aliases still missing ── */
:root {
  --accent-cyan:   var(--cyan);
  --accent-blue:   var(--blue);
  --accent-green:  var(--green);
  --accent-yellow: var(--yellow);
  --accent-red:    var(--red);
  --accent-purple: var(--purple);
  --accent-orange: var(--orange);
}

/* ══ Global mobile fixes ════════════════════════════════════════════ */

/* Topbar balance chip: hide label text on very small screens */
@media(max-width:360px){
  .topbar .tb-title{font-size:13px}
  .topbar a[href="/billing/topup"] span{display:none}
}

/* Page headers: always wrap on mobile */
@media(max-width:600px){
  .page-header.flex{flex-direction:column !important;align-items:flex-start !important;gap:10px}
  .page-header .flex{flex-wrap:wrap}
}

/* Admin content: tighter padding on very small phones */
@media(max-width:400px){
  .adm-content{padding:8px}
  .pg-body{padding:10px}
  .card{padding:12px}
}

/* Tables: always horizontally scrollable in cards */
.card .table-wrap,.card-table{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Forms: full-width inputs on mobile */
@media(max-width:480px){
  .form-control,.fc,.form-select{width:100%;box-sizing:border-box}
  .btn.wf{width:100%}
}

/* Modals: always full-width on mobile */
@media(max-width:500px){
  .modal-box,.modal-content{width:calc(100% - 24px) !important;margin:12px !important;padding:16px !important}
}

/* ── Topbar responsive: show username only on wider screens ── */
@media(min-width:500px){
  .tb-user-name{display:block !important}
}
@media(max-width:499px){
  .tb-user-name{display:none !important}
  .topbar{gap:5px}
  /* Shrink balance chip on small phones */
  .topbar a[href="/billing/topup"]{padding:5px 8px;font-size:12px}
}
@media(max-width:360px){
  /* On very small phones: hide balance text, keep icon */
  .topbar a[href="/billing/topup"]{padding:5px 7px;font-size:0}
  .topbar a[href="/billing/topup"] svg{width:13px;height:13px}
}

/* ══════════════════════════════════════════════════════════════════
   RWD TABLE → CARD SYSTEM
   Apply .rwd-card class to a <table>. On narrow screens every <tr>
   becomes a card and every <td> becomes a label/value row.
   Mark each <td> with data-label="Column name" — it shows as a
   tiny uppercase label before the value, driven purely by CSS ::before.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:680px){
  table.rwd-card,
  table.rwd-card thead,
  table.rwd-card tbody,
  table.rwd-card tr,
  table.rwd-card td,
  table.rwd-card th { display:block; width:auto }

  table.rwd-card{
    min-width:0 !important;
    border-collapse:separate;
    border-spacing:0;
  }
  table.rwd-card thead{
    position:absolute;left:-9999px;top:-9999px;
  }
  table.rwd-card tr{
    background:var(--bg2);
    border:1px solid var(--bd);
    border-radius:var(--r2,10px);
    padding:10px 12px;
    margin-bottom:10px;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
  }
  table.rwd-card td{
    border:none !important;
    padding:5px 0 !important;
    text-align:left !important;
    white-space:normal !important;
    min-height:0 !important;
    font-size:12.5px;
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:space-between;
  }
  table.rwd-card td[data-label]::before{
    content:attr(data-label);
    font-size:9.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--t3);
    flex-shrink:0;
    min-width:80px;
  }
  table.rwd-card td[data-label=""]::before,
  table.rwd-card td.rwd-span::before{ display:none }
  table.rwd-card td.rwd-span{
    padding-top:8px !important;
    margin-top:6px;
    border-top:1px solid var(--bd2) !important;
    justify-content:flex-start;
  }
  table.rwd-card .hide-mob{ display:none !important }
  /* Buttons inside action cells wrap cleanly */
  table.rwd-card td .act-btns,
  table.rwd-card td .link-actions{
    flex-wrap:wrap;
    gap:4px;
  }
  /* Inputs stretch */
  table.rwd-card td input[type="number"],
  table.rwd-card td input[type="text"],
  table.rwd-card td select{
    max-width:140px;
  }
}

/* ── Global flex/grid adaptive helpers ───────────────────────────── */
@media(max-width:700px){
  /* Any inline flex in admin content wraps */
  .adm-content .f.jb{ flex-wrap:wrap; gap:10px }
  /* Page title + actions stack */
  .ph{ width:100% }
  /* Two-column internal grids collapse */
  .fp-2col{ grid-template-columns:1fr !important }
  /* Dashboards: KPI grid to 1 column on phones */
  .fin-kpi{ grid-template-columns:1fr !important }
  .fin-kpi .fin-card{ padding:14px 16px }
  .fin-val{ font-size:20px !important }
  /* User detail: sidebar stacks above content */
  .ud-grid{ grid-template-columns:1fr !important }
  .ud-kpi{ grid-template-columns:1fr 1fr }
  /* Info-row label+value stack */
  .info-row{ flex-direction:column; gap:2px }
  .info-row .info-label{ width:auto !important }
  /* Tab bar horizontal scroll */
  .tab-bar{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch }
  .tab-bar .tb{ flex-shrink:0 }
  /* Sub-card buttons wrap under info */
  .sub-card > div{ flex-wrap:wrap }
  .sub-card form{ width:100% }
}

/* ── Finance charts shrink on mobile ─────────────────────────────── */
@media(max-width:600px){
  .fin-grid{ grid-template-columns:1fr !important }
  .fin-grid canvas{ max-height:180px }
  /* Topups filters wrap */
  .tu-head{ flex-direction:column; align-items:stretch !important }
  .tu-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch }
  .tu-filters .btn{ flex-shrink:0 }
}

/* ── Very small screens ──────────────────────────────────────────── */
@media(max-width:420px){
  .page-title{ font-size:17px }
  .ud-kpi{ grid-template-columns:1fr }
  .btn.btn-sm{ padding:5px 10px; font-size:11.5px }
  .card{ padding:12px !important }
  /* Avoid horizontal overflow from long emails / hashes */
  .trunc-mob{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
}