/* ============================================================
   MediAd View — Enterprise Light Theme
   Inspired by Stripe, Salesforce, QuickBooks, Linear, Notion
   ============================================================ */

:root {
  /* Brand — corporate blue */
  --brand:#2563eb;
  --brand-l:#3b82f6;
  --brand-d:#1d4ed8;
  --brand-dd:#1e40af;
  --brand-ll:#dbeafe;
  --brand-tint:#eff6ff;

  /* Accents */
  --green:#059669;
  --green-l:#10b981;
  --green-tint:#d1fae5;
  --amber:#d97706;
  --amber-l:#f59e0b;
  --amber-tint:#fef3c7;
  --red:#dc2626;
  --red-l:#ef4444;
  --red-tint:#fee2e2;
  --violet:#7c3aed;
  --violet-l:#8b5cf6;
  --violet-tint:#ede9fe;
  --cyan:#0891b2;
  --cyan-l:#06b6d4;
  --cyan-tint:#cffafe;

  /* Surfaces */
  --bg:#f8fafc;
  --bg-1:#f1f5f9;
  --bg-2:#e2e8f0;
  --bg-card:#ffffff;
  --bg-hover:#f8fafc;
  --bg-sidebar:#0f172a;
  --bg-sidebar-2:#1e293b;
  --bg-topbar:#ffffff;

  /* Text — dark on light */
  --t-1:#0f172a;
  --t-2:#1e293b;
  --t-3:#475569;
  --t-4:#64748b;
  --t-5:#94a3b8;

  /* Sidebar text (light on dark) */
  --st-1:#f1f5f9;
  --st-2:#cbd5e1;
  --st-3:#94a3b8;
  --st-4:#64748b;

  /* Borders */
  --border:#e2e8f0;
  --border-l:#f1f5f9;
  --border-s:#cbd5e1;

  /* Radius */
  --r:10px;
  --rs:8px;
  --rxs:6px;
  --rl:14px;

  /* Shadows — soft enterprise feel */
  --sh-xs:0 1px 2px rgba(15,23,42,.04);
  --sh-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh:0 2px 4px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.06);
  --sh-md:0 4px 8px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.08);
  --sh-lg:0 10px 32px rgba(15,23,42,.12),0 4px 8px rgba(15,23,42,.04);
  --sh-focus:0 0 0 3px rgba(37,99,235,.15);

  --sb-w:248px;
  --tb-h:60px;
}

* { margin:0; padding:0; box-sizing:border-box }
*:focus-visible { outline:none; box-shadow:var(--sh-focus) }

html, body { height:100% }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--t-1);
  line-height:1.5;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','cv11','ss01';
}

::selection { background:var(--brand-ll); color:var(--brand-dd) }
::-webkit-scrollbar { width:8px; height:8px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--bg-2); border-radius:4px }
::-webkit-scrollbar-thumb:hover { background:var(--border-s) }

a { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:inherit; border:none; background:none; color:inherit }
input, select, textarea { font-family:inherit; color:var(--t-1) }
code { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:.85em }

/* ===== Buttons ===== */
.btn-p {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px;
  background:var(--brand);
  color:#fff; font-weight:600; font-size:13px;
  border-radius:var(--rs);
  transition:all .15s ease;
  box-shadow:var(--sh-xs);
  white-space:nowrap;
  border:1px solid var(--brand);
}
.btn-p:hover { background:var(--brand-d); border-color:var(--brand-d); box-shadow:var(--sh-sm) }
.btn-p:active { transform:translateY(.5px) }
.btn-p:disabled { opacity:.45; cursor:not-allowed }

.btn-s {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px;
  background:#fff;
  color:var(--t-2); font-weight:600; font-size:12.5px;
  border-radius:var(--rs);
  border:1px solid var(--border);
  transition:all .15s ease;
  white-space:nowrap;
  box-shadow:var(--sh-xs);
}
.btn-s:hover { background:var(--bg-1); border-color:var(--border-s); color:var(--t-1) }

.btn-g {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px;
  background:var(--green);
  color:#fff; font-weight:600; font-size:13px;
  border-radius:var(--rs);
  transition:all .15s;
  box-shadow:var(--sh-xs);
}
.btn-g:hover { background:#047857 }

.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  color:var(--t-3); font-weight:600; font-size:12.5px;
  border-radius:var(--rs);
  transition:all .15s;
}
.btn-ghost:hover { background:var(--bg-1); color:var(--t-1) }

.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px;
  border-radius:var(--rs);
  color:var(--t-3);
  transition:background .15s, color .15s, border-color .15s;
  border:1px solid transparent;
}
.btn-icon:hover { background:var(--bg-1); color:var(--t-1); border-color:var(--border) }

/* ===== Inputs ===== */
.inp {
  width:100%;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--rs);
  color:var(--t-1);
  font-size:13.5px;
  transition:all .15s;
  box-shadow:var(--sh-xs);
}
.inp:hover { border-color:var(--border-s) }
.inp:focus { border-color:var(--brand); box-shadow:var(--sh-focus); outline:none }
.inp::placeholder { color:var(--t-5) }
select.inp { cursor:pointer; appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>") no-repeat right 12px center; padding-right:36px }

.inp-label,.lbl {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--t-2);
  margin-bottom:6px;
}
.inp-label .req { color:var(--red); margin-left:2px }

/* ===== Cards ===== */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  transition:all .15s ease;
  position:relative;
  box-shadow:var(--sh-xs);
}
.card-i { cursor:pointer }
.card-i:hover {
  border-color:var(--border-s);
  box-shadow:var(--sh);
  transform:translateY(-1px);
}

/* ===== Badges ===== */
.bdg {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:99px;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  border:1px solid transparent;
}
.bdg::before {
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85;
}
.bdg-active { background:var(--green-tint); color:#047857; border-color:#a7f3d0 }
.bdg-pending { background:var(--amber-tint); color:#92400e; border-color:#fde68a }
.bdg-approved { background:var(--brand-ll); color:var(--brand-dd); border-color:#bfdbfe }
.bdg-rejected,.bdg-overdue { background:var(--red-tint); color:#991b1b; border-color:#fecaca }
.bdg-draft { background:var(--bg-1); color:var(--t-3); border-color:var(--border) }
.bdg-completed,.bdg-paid { background:var(--green-tint); color:#047857; border-color:#a7f3d0 }
.bdg-published { background:var(--green-tint); color:#047857; border-color:#a7f3d0 }
.bdg-cancelled { background:var(--bg-1); color:var(--t-4); border-color:var(--border) }

/* ===== Login View ===== */
#view-login {
  display:flex; min-height:100vh;
  align-items:center; justify-content:center;
  padding:24px; position:relative;
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 50%,#f1f5f9 100%);
}
#view-login .orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none; opacity:.5;
}
.login-card {
  width:100%; max-width:420px;
  position:relative; z-index:1;
}
.login-logo { text-align:center; margin-bottom:28px }
.glass {
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--sh-lg);
}

#view-app { display:none; min-height:100vh; position:relative; z-index:1 }
#view-app.on { display:flex }
#view-login.off { display:none }

/* ============================================================
   SIDEBAR — Dark navy enterprise
   ============================================================ */
.sb {
  width:var(--sb-w);
  background:var(--bg-sidebar);
  display:flex; flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:30;
  color:var(--st-2);
}

.sb-brand {
  display:flex; align-items:center; justify-content:center;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height:var(--tb-h);
}
.sb-brand img { filter:none }

.sb nav {
  flex:1;
  padding:14px 12px;
  overflow-y:auto;
  scrollbar-width:thin;
}

.sb-section {
  font-size:10.5px;
  font-weight:700;
  color:var(--st-4);
  text-transform:uppercase;
  letter-spacing:1.2px;
  padding:14px 12px 6px;
}

.ni {
  display:flex; align-items:center; gap:11px;
  padding:8px 11px;
  border-radius:var(--rxs);
  font-size:13px; font-weight:500;
  color:var(--st-2);
  transition:all .12s ease;
  cursor:pointer;
  margin-bottom:1px;
  position:relative;
}
.ni svg { width:17px; height:17px; flex-shrink:0; stroke-width:2; opacity:.9 }
.ni:hover { background:rgba(255,255,255,.05); color:var(--st-1) }
.ni.on {
  background:rgba(59,130,246,.15);
  color:#fff;
  font-weight:600;
}
.ni.on svg { opacity:1; color:#93c5fd }
.ni.on::before {
  content:'';
  position:absolute; left:-12px; top:7px; bottom:7px;
  width:3px;
  background:var(--brand-l);
  border-radius:0 3px 3px 0;
}
.ni .count {
  margin-left:auto;
  font-size:10px; font-weight:700;
  padding:1px 6px;
  background:rgba(59,130,246,.2);
  color:#93c5fd;
  border-radius:99px;
}

.sep { height:1px; background:rgba(255,255,255,.06); margin:10px 12px }

.sb-ft {
  padding:12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sb-user {
  display:flex; align-items:center; gap:10px;
  padding:9px;
  border-radius:var(--rxs);
  transition:background .12s;
  cursor:pointer;
}
.sb-user:hover { background:rgba(255,255,255,.05) }
.sb-ft .av {
  width:34px; height:34px;
  border-radius:9px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(37,99,235,.4);
}
.sb-user > div { color:var(--st-1) }
.sb-user #sb-email { color:var(--st-4) }

/* ============================================================
   TOPBAR — Clean white
   ============================================================ */
.main {
  flex:1;
  margin-left:var(--sb-w);
  min-height:100vh;
  display:flex; flex-direction:column;
}

.tb {
  position:sticky; top:0;
  height:var(--tb-h);
  background:var(--bg-topbar);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px;
  padding:0 28px;
  z-index:20;
  box-shadow:var(--sh-xs);
}
.tb-search {
  flex:1; max-width:480px;
  position:relative;
}
.tb-search input {
  width:100%;
  padding:8px 12px 8px 36px;
  background:var(--bg-1);
  border:1px solid transparent;
  border-radius:var(--rs);
  color:var(--t-1);
  font-size:13px;
}
.tb-search input:focus { border-color:var(--brand); background:#fff; box-shadow:var(--sh-focus); outline:none }
.tb-search input::placeholder { color:var(--t-5) }
.tb-search svg {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--t-4); pointer-events:none;
}
.tb-search .kbd {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:10px; padding:2px 6px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--t-4);
  pointer-events:none;
  font-weight:600;
}
.tb-actions { display:flex; align-items:center; gap:6px; margin-left:auto }

.tb-cta {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:var(--brand);
  color:#fff;
  font-weight:600; font-size:12.5px;
  border-radius:var(--rs);
  transition:all .15s;
  box-shadow:var(--sh-xs);
}
.tb-cta:hover { background:var(--brand-d) }
.tb-cta svg { width:14px; height:14px }

/* Page wrapper */
.pg {
  display:none;
  padding:24px 28px 60px;
  flex:1;
  max-width:1480px;
  width:100%;
}
.pg.on { display:block }

/* ============================================================
   PAGE HEADER (.ph)
   ============================================================ */
.ph {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.ph h1 {
  font-size:22px;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--t-1);
}
.ph p { color:var(--t-4); font-size:13px; margin-top:3px }

/* Welcome banner — clean enterprise */
.welcome-banner {
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dd) 100%);
  border-radius:var(--r);
  padding:24px 28px;
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
  color:#fff;
  box-shadow:var(--sh-sm);
}
.welcome-banner::after {
  content:'';
  position:absolute;
  right:-80px; top:-80px;
  width:280px; height:280px;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%);
  pointer-events:none;
}
.welcome-banner::before {
  content:'';
  position:absolute;
  left:-40px; bottom:-40px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 65%);
  pointer-events:none;
}
.welcome-banner h1 {
  font-size:24px;
  font-weight:700;
  letter-spacing:-.4px;
  color:#fff;
}
.welcome-banner .greeting {
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:8px;
}
.welcome-banner p {
  color:rgba(255,255,255,.85);
  font-size:13.5px;
  margin-top:6px;
}

/* ============================================================
   STAT CARDS (KPIs)
   ============================================================ */
.st-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px;
}
.st-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 20px;
  transition:all .15s ease;
  position:relative;
  overflow:hidden;
  box-shadow:var(--sh-xs);
}
.st-card:hover {
  border-color:var(--border-s);
  box-shadow:var(--sh);
}
.st-card .st-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:14px;
}
.st-card .st-label {
  font-size:12px;
  font-weight:600;
  color:var(--t-4);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.st-ico {
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.st-ico svg { width:19px; height:19px }
.st-val {
  font-size:28px;
  font-weight:700;
  letter-spacing:-.6px;
  color:var(--t-1);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.st-sub {
  font-size:12px;
  color:var(--t-4);
  margin-top:8px;
  display:flex; align-items:center; gap:7px;
}
.st-trend {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:6px;
}
.st-trend.up { background:var(--green-tint); color:#047857 }
.st-trend.down { background:var(--red-tint); color:#991b1b }
.st-trend.flat { background:var(--bg-1); color:var(--t-4) }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sh {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.sh h2 {
  font-size:15px;
  font-weight:700;
  color:var(--t-1);
  letter-spacing:-.1px;
}
.sh a, .sh-link {
  font-size:12.5px;
  color:var(--brand);
  cursor:pointer;
  font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
  transition:color .12s;
}
.sh a:hover, .sh-link:hover { color:var(--brand-d) }

/* ============================================================
   LIST ROWS
   ============================================================ */
.lr {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  transition:background .12s;
  cursor:pointer;
}
.lr:hover { background:var(--bg-hover) }
.lr + .lr { border-top:1px solid var(--border-l) }

.dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 3px currentColor;
  opacity:.95;
}

/* ============================================================
   SCREEN CARDS (marketplace)
   ============================================================ */
.sc {
  border-radius:var(--r);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  transition:all .18s;
  cursor:pointer;
  box-shadow:var(--sh-xs);
}
.sc:hover {
  box-shadow:var(--sh-md);
  border-color:var(--border-s);
  transform:translateY(-2px);
}
.sc .hd {
  height:130px;
  display:flex; align-items:flex-end;
  padding:12px;
  position:relative;
}
.sc .ct { padding:16px }
.sc .nm { font-size:14px; font-weight:700; margin-bottom:3px; color:var(--t-1) }
.sc .ad { font-size:11.5px; color:var(--t-4); margin-bottom:12px }
.sc .pr { font-size:18px; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums }
.sc .pr span { font-size:10px; color:var(--t-4); font-weight:400 }
.city {
  padding:4px 10px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
}

/* ============================================================
   WIZARD STEPS
   ============================================================ */
.wz-steps { display:flex; align-items:center; gap:8px; margin-bottom:24px; flex-wrap:wrap }
.wz-s {
  display:flex; align-items:center; gap:9px;
  padding:9px 15px;
  border-radius:99px;
  font-size:12.5px; font-weight:600;
  color:var(--t-4);
  background:#fff;
  border:1px solid var(--border);
  transition:all .18s;
}
.wz-s.on { background:var(--brand-tint); color:var(--brand-dd); border-color:#bfdbfe }
.wz-s.ok { background:var(--green-tint); color:#047857; border-color:#a7f3d0 }
.wz-s .n {
  width:22px; height:22px;
  border-radius:50%;
  background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  color:var(--t-3);
}
.wz-s.on .n { background:var(--brand); color:#fff }
.wz-s.ok .n { background:var(--green); color:#fff }
.wz-c { flex:0 0 18px; height:2px; background:var(--bg-2); border-radius:1px }
.wz-c.ok { background:var(--green) }

.sel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.sel-opt {
  padding:14px;
  border-radius:var(--rs);
  border:2px solid var(--border);
  cursor:pointer;
  transition:all .15s;
  background:#fff;
}
.sel-opt:hover { border-color:var(--brand-l) }
.sel-opt.on, .sel-opt.selected { border-color:var(--brand); background:var(--brand-tint) }
.sel-thumb { width:44px; height:44px; border-radius:10px; flex-shrink:0 }
.sel-nm { font-size:13.5px; font-weight:600; color:var(--t-1) }
.sel-sub { font-size:11.5px; color:var(--t-4) }

/* ============================================================
   CHARTS
   ============================================================ */
.bar-r { display:flex; align-items:center; gap:12px; margin-bottom:10px }
.bar-l { width:42px; font-size:11.5px; color:var(--t-3); text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums }
.bar-t { flex:1; height:32px; background:var(--bg-1); border-radius:6px; overflow:hidden }
.bar-f {
  height:100%; border-radius:6px;
  display:flex; align-items:center; padding-left:12px;
  font-size:11px; font-weight:700; color:#fff;
  transition:width .8s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-l) 100%);
}
.met-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--border-l);
}
.met-row:last-child { border:none }

/* ============================================================
   TABLES
   ============================================================ */
.tbl-h {
  display:grid;
  padding:11px 16px;
  font-size:10.5px; font-weight:700;
  color:var(--t-4);
  text-transform:uppercase;
  letter-spacing:.8px;
  border-bottom:1px solid var(--border);
  background:var(--bg-1);
}
.tbl-r {
  display:grid;
  padding:13px 16px;
  align-items:center;
  border-bottom:1px solid var(--border-l);
  transition:background .1s;
  font-size:13px;
  color:var(--t-2);
}
.tbl-r:hover { background:var(--bg-hover) }
.tbl-r:last-child { border:none }

.tag-on {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:var(--green);
}
.tag-on::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green-l) }
.tag-off {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:var(--t-4);
}
.tag-off::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--t-4) }

/* ============================================================
   PRICE BOX
   ============================================================ */
.prc-box {
  background:var(--brand-tint);
  border:1px solid #bfdbfe;
  border-radius:var(--r);
  padding:18px;
}
.prc-r { display:flex; justify-content:space-between; font-size:13px; color:var(--t-2); margin-bottom:8px }
.prc-t {
  display:flex; justify-content:space-between;
  font-size:18px; font-weight:700;
  padding-top:12px; margin-top:12px;
  border-top:1px solid #bfdbfe;
  color:var(--brand-dd);
}

/* ============================================================
   APPROVE / ACTION BUTTONS
   ============================================================ */
.btn-approve {
  padding:6px 14px;
  border-radius:6px;
  background:var(--green-tint);
  color:#047857;
  font-size:11.5px; font-weight:700;
  border:1px solid #a7f3d0;
  cursor:pointer; transition:all .15s;
}
.btn-approve:hover { background:#a7f3d0 }

/* ============================================================
   UPLOAD AREA
   ============================================================ */
.upload {
  border:2px dashed var(--border-s);
  border-radius:var(--r);
  padding:48px 32px;
  text-align:center;
  cursor:pointer;
  transition:all .15s;
  background:var(--bg-1);
}
.upload:hover {
  border-color:var(--brand);
  background:var(--brand-tint);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty {
  padding:60px 32px;
  text-align:center;
  background:#fff;
  border:1px dashed var(--border-s);
  border-radius:var(--r);
}
.empty-ico {
  width:56px; height:56px;
  margin:0 auto 16px;
  border-radius:14px;
  background:var(--brand-tint);
  border:1px solid #bfdbfe;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand);
}
.empty h3 {
  font-size:16px; font-weight:700;
  color:var(--t-1);
  margin-bottom:6px;
}
.empty p { font-size:13px; color:var(--t-4); margin-bottom:18px }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade { animation:fi .25s cubic-bezier(.4,0,.2,1) }
@keyframes fi {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:translateY(0) }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.row4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
  .st-grid { grid-template-columns:repeat(2,1fr) }
  .row4 { grid-template-columns:repeat(2,1fr) }
}

@media (max-width:1024px) {
  :root { --sb-w:64px }
  .sb-brand img { width:32px !important }
  .sb-brand .name-full { display:none }
  .ni span, .sb-section, .sb-user > div:not(.av), .sb-user button { display:none }
  .ni { justify-content:center; padding:10px }
  .ni.on::before { display:none }
  .sb-user { justify-content:center; padding:8px }
  .pg { padding:20px }
  .tb { padding:0 20px }
  .tb-search { max-width:none }
}

@media (max-width:768px) {
  .sb { transform:translateX(-100%); transition:transform .25s }
  .sb.open { transform:translateX(0); width:240px }
  .sb.open .name-full, .sb.open .ni span, .sb.open .sb-section,
  .sb.open .sb-user > div:not(.av), .sb.open .sb-user button { display:block }
  .sb.open .ni { justify-content:flex-start; padding:9px 12px }
  .main { margin-left:0 }
  .row2, .row3 { grid-template-columns:1fr }
  .st-grid { grid-template-columns:1fr }
  .ph h1 { font-size:20px }
  .welcome-banner h1 { font-size:20px }
  .tb { padding:0 16px }
  .pg { padding:16px }
  .mobile-menu { display:flex !important }
}

.mobile-menu { display:none }