/* ──────────────────────────────────────────────────────────────
   ZHEREX ADMIN — v2 (mobile-first, on-brand)
   Aligned with the public zherex.com aesthetic:
     gradient #667eea → #764ba2, slate→indigo background, glass surfaces
   ────────────────────────────────────────────────────────────── */

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

:root{
  /* Brand */
  --grad:        linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --grad-soft:   linear-gradient(135deg,rgba(102,126,234,.18) 0%,rgba(118,75,162,.18) 100%);
  --brand-1:     #667eea;
  --brand-2:     #764ba2;
  --brand-glow:  rgba(102,126,234,.45);

  /* Surfaces */
  --bg-1:        #020617;  /* slate-950 */
  --bg-2:        #0f172a;  /* slate-900 */
  --bg-3:        #1e1b4b;  /* indigo-950 */
  --surface:     rgba(255,255,255,.04);
  --surface-2:   rgba(255,255,255,.06);
  --surface-3:   rgba(255,255,255,.08);
  --border:      rgba(255,255,255,.08);
  --border-2:    rgba(255,255,255,.14);

  /* Text */
  --text:        #f8fafc;
  --text-muted:  #94a3b8;
  --text-mute2:  #64748b;

  /* States */
  --green:       #22c55e;
  --green-soft:  rgba(34,197,94,.16);
  --yellow:      #eab308;
  --yellow-soft: rgba(234,179,8,.16);
  --red:         #ef4444;
  --red-soft:    rgba(239,68,68,.16);
  --blue:        #3b82f6;
  --blue-soft:   rgba(59,130,246,.16);

  /* Radii / shadows / sizing */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-glow:  0 8px 32px -8px rgba(102,126,234,.35), 0 0 0 1px rgba(102,126,234,.08);
  --shadow-card:  0 4px 24px -6px rgba(0,0,0,.5);
  --topbar-h:     60px;
  --sidebar-w:    256px;
  --font:         'Inter','-apple-system','BlinkMacSystemFont','Segoe UI',system-ui,sans-serif;
  --mono:         'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--text); line-height:1.5; font-size:14px;
  background:radial-gradient(ellipse at top left, var(--bg-3) 0%, transparent 50%),
             radial-gradient(ellipse at bottom right, #4c1d95 0%, transparent 50%),
             linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 50%,var(--bg-3) 100%);
  background-attachment: fixed;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  /* subtle grain so flat colours feel less plastic */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.025) 1px, transparent 0);
  background-size: 24px 24px;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit}
input,select,textarea{font-family:inherit}

/* ── Floating background orbs ───────────────────────────────── */
.bg-orbs{position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden}
.orb{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.45;
  animation: float 18s ease-in-out infinite;
}
.orb-1{width:520px; height:520px; top:-15%; left:-10%; background:#667eea}
.orb-2{width:420px; height:420px; bottom:-10%; right:-8%; background:#764ba2; animation-delay:-6s}
.orb-3{width:340px; height:340px; top:55%; left:55%; background:#a855f7; animation-delay:-12s; opacity:.28}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%   {transform:translate3d(2%,3%,0) scale(1.05)}
  66%   {transform:translate3d(-3%,-2%,0) scale(.95)}
}
@media (prefers-reduced-motion: reduce){ .orb{animation:none} }

/* ── Login ──────────────────────────────────────────────────── */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:420px; padding:40px 32px;
  background:var(--surface); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card), var(--shadow-glow);
  position:relative;
}
.login-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; pointer-events:none;
}
.login-card .logo{
  width:56px; height:56px; border-radius:14px; margin:0 auto 20px;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#fff;
  box-shadow:0 8px 24px -8px var(--brand-glow);
}
.login-card h1{font-size:22px; font-weight:700; text-align:center; margin-bottom:6px; letter-spacing:-.3px}
.login-card .sub{text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:28px}

.form-group{margin-bottom:14px}
.form-label{
  display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); margin-bottom:6px;
}
.form-input,.form-select,.form-textarea{
  width:100%; padding:12px 14px; font-size:14px;
  background:rgba(0,0,0,.25); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color .15s, box-shadow .15s;
  outline:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--brand-1); box-shadow:0 0 0 3px rgba(102,126,234,.18);
}
.form-textarea{resize:vertical; min-height:80px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; min-height:44px; font-size:14px; font-weight:600;
  border-radius:var(--r-md); border:1px solid transparent;
  transition:transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--grad); color:#fff;
  box-shadow:0 4px 16px -4px var(--brand-glow);
}
.btn-primary:hover{filter:brightness(1.07); box-shadow:0 6px 20px -4px var(--brand-glow)}
.btn-secondary{background:var(--surface-2); color:var(--text); border-color:var(--border-2)}
.btn-secondary:hover{background:var(--surface-3); border-color:var(--brand-1)}
.btn-sm{padding:7px 12px; min-height:36px; font-size:12.5px; border-radius:var(--r-sm)}
.btn-full{width:100%}
.btn.danger{color:var(--red); border-color:rgba(239,68,68,.4); background:var(--red-soft)}
.btn.danger:hover{background:rgba(239,68,68,.25)}

.error-msg{
  margin-top:14px; padding:10px 12px; font-size:13px; color:#fecaca;
  background:var(--red-soft); border:1px solid rgba(239,68,68,.3); border-radius:var(--r-sm);
  display:none;
}
.error-msg.show{display:block}

/* ── Layout: top-pill nav + bottom-bar nav (mobile-first) ─── */

/* Top nav — mobile shows brand only, desktop shows pills */
.topnav{
  position:sticky; top:0; z-index:30;
  background:rgba(2,6,23,.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.topnav-inner{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; max-width:1500px; margin:0 auto;
}
.topnav-brand{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.brand-mark{
  width:32px; height:32px; border-radius:9px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; box-shadow:0 4px 12px -2px var(--brand-glow);
}
.brand-text{font-weight:800; font-size:15px; letter-spacing:.06em}
.brand-dot{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-tag{
  display:none; font-family:var(--mono); font-size:10.5px; color:var(--text-mute2);
  text-transform:uppercase; letter-spacing:.12em; padding-left:6px;
  border-left:1px solid var(--border-2); margin-left:6px;
}
.topnav-pills{display:none; flex:1; gap:4px; align-items:center; justify-content:center}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--text-muted);
  border:1px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.pill svg{width:15px; height:15px; opacity:.85}
.pill:hover{background:var(--surface-2); color:var(--text)}
.pill.active{
  background:var(--grad-soft); color:var(--text);
  border-color:rgba(102,126,234,.35);
  box-shadow:0 0 0 1px rgba(102,126,234,.15), 0 4px 16px -6px var(--brand-glow);
}
.pill.active svg{opacity:1}

.topnav-user{display:none; align-items:center; gap:10px; flex-shrink:0}
.user-pill{
  display:flex; align-items:center; gap:10px;
  padding:5px 11px 5px 5px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
}
.user-pill .avatar{
  width:28px; height:28px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:13px; flex-shrink:0;
}
.user-pill .user-meta .name{font-size:12.5px; font-weight:600; line-height:1}
.user-pill .user-meta .role{font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em}
.signoff-btn{
  font-size:11.5px; padding:7px 12px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--text-muted);
  font-weight:600;
}
.signoff-btn:hover{color:var(--red); border-color:rgba(239,68,68,.5); background:var(--red-soft)}

/* Bottom nav — mobile only */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:25;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  padding:8px 4px max(8px, env(safe-area-inset-bottom));
  background:rgba(2,6,23,.85); backdrop-filter:blur(20px);
  border-top:1px solid var(--border-2);
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 4px; min-height:48px;
  color:var(--text-mute2); font-size:10.5px; font-weight:500;
  border-radius:8px;
  transition:color .12s, background .12s;
  -webkit-tap-highlight-color:transparent;
}
.bn-item svg{width:20px; height:20px}
.bn-item:active{background:var(--surface-2)}
.bn-item.active{color:var(--text); position:relative}
.bn-item.active::after{
  content:''; position:absolute; top:-1px; left:30%; right:30%; height:2px;
  background:var(--grad); border-radius:2px;
  box-shadow:0 0 8px var(--brand-glow);
}
.bn-item.active svg{filter:drop-shadow(0 0 6px rgba(102,126,234,.5))}

.layout{display:block; min-height:100vh}
/* Reserve space for bottom-nav on mobile so content isn't hidden behind it */
.main{min-height:calc(100vh - 60px); padding-bottom:90px}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 0; gap:12px; flex-wrap:wrap;
}
.topbar h1{font-size:22px; font-weight:700; letter-spacing:-.3px}
.topbar h1 .grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.topbar .actions{display:flex; gap:10px; flex-wrap:wrap}
.content{padding:18px 20px 80px}

/* ── Mission Control hero ───────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  margin:14px 14px 22px;
  padding:28px 22px;
  background:
    radial-gradient(ellipse at top right, rgba(118,75,162,.25) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left,  rgba(102,126,234,.18) 0%, transparent 55%),
    var(--surface);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card), 0 0 0 1px rgba(102,126,234,.1), 0 12px 48px -12px var(--brand-glow);
}
.hero::before{
  /* gradient corner glyph */
  content:''; position:absolute; top:-30%; right:-15%; width:380px; height:380px;
  background:radial-gradient(circle, rgba(102,126,234,.4) 0%, transparent 60%);
  filter:blur(40px); pointer-events:none;
}
.hero-grid{
  position:absolute; inset:0; opacity:.18; pointer-events:none;
  background-image:
    linear-gradient(rgba(102,126,234,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,126,234,.18) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero-scan{
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background:repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fff 3px, #fff 4px);
  animation:scanmove 6s linear infinite;
  mask-image:linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
}
@keyframes scanmove{ from{background-position-y:0} to{background-position-y:200px} }
@media (prefers-reduced-motion: reduce){ .hero-scan{animation:none} }

.hero-meta{
  position:relative; z-index:1; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text-mute2);
  text-transform:uppercase; margin-bottom:14px;
}
.hero-tag{color:var(--brand-1); opacity:.9}
.hero-stat{position:relative; z-index:1; margin-bottom:18px}
.hero-num{
  font-size:clamp(40px, 9vw, 72px); font-weight:900; letter-spacing:-2px; line-height:1;
  font-variant-numeric:tabular-nums; font-family:var(--font);
}
.hero-label{margin-top:8px; font-size:13.5px; color:var(--text-muted); max-width:560px}
.hero-label b{color:var(--text); font-weight:700}
.hero-row{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px;
}
.hero-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  font-size:12px; color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border);
  white-space:nowrap;
}
.hero-pill b{color:var(--text); font-weight:700; font-variant-numeric:tabular-nums}

/* Section heading */
.section-h{
  margin:8px 16px 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mute2);
}
.section-h::before{
  content:'// '; color:var(--brand-1); font-family:var(--mono);
}

/* ── Mission cards (one per op-type) ───────────────────────── */
.mission-grid{
  display:grid; gap:12px; grid-template-columns:1fr;
  padding:0 14px; margin-bottom:24px;
}
.mission-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:18px;
  background:var(--surface); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:var(--r-lg);
  text-decoration:none; color:inherit;
  transition:transform .15s, border-color .2s, box-shadow .2s;
  overflow:hidden;
}
.mission-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:.6; transition:opacity .2s, height .2s;
}
.mission-card:hover{
  transform:translateY(-2px); border-color:rgba(102,126,234,.35);
  box-shadow:var(--shadow-card), 0 8px 32px -8px var(--brand-glow);
}
.mission-card:hover::before{opacity:1; height:3px}

.mc-head{display:flex; align-items:center; gap:12px}
.mc-icon{
  width:42px; height:42px; border-radius:12px;
  background:var(--grad-soft); border:1px solid rgba(102,126,234,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.mc-title{flex:1; min-width:0}
.mc-label{font-size:14px; font-weight:700; color:var(--text)}
.mc-tag{font-size:11.5px; color:var(--text-muted); margin-top:1px}

.mc-num{
  font-family:var(--font);
  font-size:42px; font-weight:900; line-height:1; letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;
}
.mc-sub{display:flex; gap:6px; flex-wrap:wrap}
.status-chip{
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--text-muted);
  border:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.status-chip.ok  {color:#86efac; background:var(--green-soft);  border-color:rgba(34,197,94,.3)}
.status-chip.warn{color:#fde047; background:var(--yellow-soft); border-color:rgba(234,179,8,.3)}
.status-chip.done{color:#93c5fd; background:var(--blue-soft);   border-color:rgba(59,130,246,.3)}

.mc-metrics{
  display:grid; gap:6px;
  padding-top:12px; border-top:1px dashed var(--border);
}
.m-row{display:flex; justify-content:space-between; align-items:baseline}
.m-lbl{font-size:11px; color:var(--text-mute2); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.m-val{font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--text)}
.m-val.pos{color:#86efac}
.m-val.neg{color:#fca5a5}

.mc-spend{
  font-size:11.5px; color:var(--text-mute2);
  font-family:var(--mono); padding-top:6px;
}
.mc-spend b{color:var(--text); font-weight:700}

/* ── LED status dots ───────────────────────────────────────── */
.led{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:var(--text-mute2); box-shadow:0 0 0 0 transparent;
}
.led-active{background:var(--green); box-shadow:0 0 8px rgba(34,197,94,.6); animation:pulse 2s ease-in-out infinite}
.led-warn  {background:var(--yellow); box-shadow:0 0 8px rgba(234,179,8,.6)}
.led-error {background:var(--red);    box-shadow:0 0 8px rgba(239,68,68,.6)}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  50%    {box-shadow:0 0 0 6px rgba(34,197,94,0)}
}
@media (prefers-reduced-motion: reduce){ .led-active{animation:none} }

/* ── Panel (Top operatives, Recent activity) ───────────────── */
.dual-grid{display:grid; gap:12px; grid-template-columns:1fr; padding:0 14px}
.panel{
  background:var(--surface); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:var(--r-lg);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.panel-head h3{font-size:14px; font-weight:700}
.panel-tag{
  font-size:11px; font-family:var(--mono); color:var(--text-mute2);
  text-transform:uppercase; letter-spacing:.06em;
}
.panel-body{padding:6px 0}

.op-row{
  display:grid; gap:8px; align-items:center;
  grid-template-columns:auto 1fr auto auto;
  padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.04);
  font-size:13.5px;
}
.op-row:last-child{border-bottom:none}
.op-rank{
  font-family:var(--mono); font-size:11px; color:var(--text-mute2);
  background:var(--surface-2); padding:3px 7px; border-radius:5px;
  letter-spacing:.04em;
}
.op-name{font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.op-meta{font-size:11.5px; color:var(--text-muted)}
.op-meta .mono{color:var(--text); font-weight:600}
.op-spend{font-weight:700; color:var(--text); font-size:13px}

.act-row{
  display:flex; gap:10px; align-items:center;
  padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.04);
}
.act-row:last-child{border-bottom:none}
.act-icon{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.act-body{flex:1; min-width:0}
.act-title{font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.act-sub{font-size:11.5px; color:var(--text-mute2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.act-time{font-size:11px; color:var(--text-mute2); flex-shrink:0}

/* mono utility */
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── Glass card primitive ───────────────────────────────────── */
.gcard{
  background:var(--surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:border-color .2s, transform .12s, box-shadow .2s;
}
.gcard:hover{border-color:var(--border-2)}
.gcard.glow:hover{
  box-shadow:var(--shadow-card),0 0 0 1px rgba(102,126,234,.35),0 8px 28px -8px var(--brand-glow);
}

/* ── Stats grid ─────────────────────────────────────────────── */
.stats-grid{
  display:grid; gap:12px; grid-template-columns:1fr 1fr;
  margin-bottom:22px;
}
.stat-card{
  padding:18px;
  background:var(--surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  position:relative; overflow:hidden;
}
.stat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:.6;
}
.stat-card .label{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  color:var(--text-muted); margin-bottom:8px;
}
.stat-card .value{
  font-size:28px; font-weight:800; letter-spacing:-1px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-card .delta{
  margin-top:10px; font-size:12px; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
}
.stat-card .delta.positive{color:var(--green)}
.stat-card .delta.negative{color:var(--red)}

/* ── Tables — horizontal scroll on mobile, full layout on desktop ── */
.tbl-wrap,
.content > table,
.detail-card > table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
table{
  width:100%; min-width:560px; border-collapse:collapse;
}
thead th{
  padding:12px 16px; text-align:left;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); white-space:nowrap;
  border-bottom:1px solid var(--border-2);
  background:rgba(0,0,0,.2);
  position:sticky; top:0; z-index:1;
}
tbody td{
  padding:13px 16px; font-size:13.5px; vertical-align:middle;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.02)}
tbody td:first-child{font-weight:600}
.actions-cell{
  display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;
}

/* Tools / filters row above tables */
.tools{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.tools input[type=text],.tools input[type=search],.tools select{
  padding:9px 12px; min-height:40px; min-width:160px; flex:1; max-width:320px;
  background:rgba(0,0,0,.25); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-md); font-size:13.5px; outline:none;
}
.tools input:focus,.tools select:focus{
  border-color:var(--brand-1); box-shadow:0 0 0 3px rgba(102,126,234,.15);
}

/* Badges & chips */
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  font-size:11px; font-weight:600; border-radius:999px;
  background:var(--surface-3); color:var(--text);
  border:1px solid var(--border);
  text-transform:capitalize; letter-spacing:.02em;
}
.badge-active,.badge-positive,.badge-online,.badge-completed{background:var(--green-soft); color:#86efac; border-color:rgba(34,197,94,.3)}
.badge-paused,.badge-medium,.badge-warning{background:var(--yellow-soft); color:#fde047; border-color:rgba(234,179,8,.3)}
.badge-lead,.badge-high,.badge-error,.badge-failed,.badge-negative,.badge-draft{background:var(--red-soft); color:#fca5a5; border-color:rgba(239,68,68,.3)}
.badge-commercial,.badge-transactional,.badge-navigational{background:var(--blue-soft); color:#93c5fd; border-color:rgba(59,130,246,.3)}

/* ── Modal (bottom-sheet on mobile) ─────────────────────────── */
.modal-backdrop{
  position:fixed; inset:0; z-index:40; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(2,6,23,.7); backdrop-filter:blur(4px);
}
.modal-backdrop.show{display:flex}
.modal{
  width:100%; max-width:560px; max-height:92vh;
  background:rgba(2,6,23,.95); backdrop-filter:blur(20px);
  border:1px solid var(--border-2); border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex; flex-direction:column;
  animation:slideUp .25s ease;
}
@keyframes slideUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-header h2{font-size:17px; font-weight:700}
.modal-close{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--text-muted);
}
.modal-close:hover{background:var(--surface-2); color:var(--text)}
.modal-body{padding:20px; overflow-y:auto; flex:1}
.modal-footer{
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end; flex-shrink:0;
}

.form-row{display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:12px}

/* ── Detail view ────────────────────────────────────────────── */
.detail-grid{display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:18px}
.detail-card{
  padding:16px;
  background:var(--surface); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:var(--r-lg);
}
.detail-card h3{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px}
.detail-row{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px;
}
.detail-row:last-child{border-bottom:none}
.detail-row .lbl{color:var(--text-muted); font-size:12.5px}
.detail-row .val{font-weight:600; text-align:right; word-break:break-word}

/* ── Uploads ────────────────────────────────────────────────── */
.uploads-grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:12px}
.upload-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden; position:relative;
}
.upload-card img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.upload-card .meta{padding:8px 10px; font-size:11.5px; color:var(--text-muted)}
.upload-card .name{color:var(--text); font-weight:500; font-size:12.5px; word-break:break-word; margin-bottom:2px}
.upload-card .del{
  position:absolute; top:6px; right:6px; width:28px; height:28px;
  background:rgba(0,0,0,.6); border-radius:6px; color:#fca5a5;
  display:flex; align-items:center; justify-content:center;
}
.upload-card .del:hover{background:rgba(239,68,68,.7); color:#fff}

/* ── Ads / metrics blocks ───────────────────────────────────── */
.ads-dashboard{display:grid; gap:12px}
.ads-summary{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
.ads-metric{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px;
}
.ads-metric-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:6px}
.ads-metric-val{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}

.ads-header{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.ads-date-range{
  font-family:var(--mono); font-size:12px; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border);
  padding:5px 10px; border-radius:6px;
}
.ads-table{margin-top:8px; overflow-x:auto}

/* Bars (e.g. SEO difficulty) */
.bar-wrap,.difficulty-wrap{
  width:100%; max-width:120px; height:6px; border-radius:3px;
  background:var(--surface-3); overflow:hidden;
}
.bar-fill,.difficulty-bar{height:100%; background:var(--grad); transition:width .3s}

/* Empty state */
.empty{
  padding:40px 20px; text-align:center; color:var(--text-muted); font-size:14px;
}

/* ── Tablet (≥ 640px) — wider mission grid ──────────────────── */
@media (min-width: 640px){
  .mission-grid{grid-template-columns:repeat(2, 1fr)}
}

/* ── Tablet (≥ 768px) ───────────────────────────────────────── */
@media (min-width: 768px){
  body{font-size:14px}
  .brand-tag{display:inline}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .form-row{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr 1fr}
  .ads-summary{grid-template-columns:repeat(4,1fr)}
  .uploads-grid{grid-template-columns:repeat(3,1fr)}
  .dual-grid{grid-template-columns:1fr 1fr}
  .hero-num{font-size:clamp(54px, 7vw, 84px)}

  /* Modal: centered card instead of bottom-sheet */
  .modal-backdrop{align-items:center}
  .modal{
    border-radius:var(--r-xl);
    margin:24px; width:auto; min-width:500px;
    animation:fadeIn .2s ease;
  }
  @keyframes fadeIn{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
}

/* ── Desktop (≥ 1024px) — top pills appear, bottom nav hides ── */
@media (min-width: 1024px){
  .topnav-pills{display:flex}
  .topnav-user{display:flex}
  .bottomnav{display:none}
  .main{padding-bottom:60px}

  .hero{margin:24px 24px 28px; padding:36px 32px}
  .mission-grid{grid-template-columns:repeat(4, 1fr); padding:0 24px}
  .dual-grid{padding:0 24px}
  .section-h{margin:8px 24px 14px}

  .topbar{padding:24px 28px 0}
  .topbar h1{font-size:26px}
  .content{padding:24px 28px 60px}
  .uploads-grid{grid-template-columns:repeat(4,1fr)}

  /* Tables can breathe on desktop */
  table{min-width:0}
  thead th,tbody td{padding:14px 18px}
  tbody td{white-space:normal}
}

/* ── XL Desktop (≥ 1280px) ──────────────────────────────────── */
@media (min-width: 1280px){
  .content{padding:28px 36px 80px; max-width:1500px; margin:0 auto}
  .topbar{padding:28px 36px 0; max-width:1500px; margin:0 auto}
  .hero{max-width:1500px; margin-left:auto; margin-right:auto}
  .mission-grid{max-width:1500px; margin-left:auto; margin-right:auto}
  .dual-grid{max-width:1500px; margin-left:auto; margin-right:auto}
}

/* ── Misc utility ───────────────────────────────────────────── */
.muted{color:var(--text-muted)}
.tiny{font-size:11.5px}
.center{text-align:center}
.flex{display:flex; align-items:center; gap:8px}
.flex-1{flex:1}
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* No-data + loading */
.spinner{
  width:18px; height:18px; border:2px solid var(--border-2);
  border-top-color:var(--brand-1); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Scrollbar */
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:6px; border:2px solid transparent; background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--border-2); background-clip:padding-box}