/* ============================================================
   CONNECT — theme v27. Blue on black. Type + chrome tabs mirror
   IME Dealer /my-inventory (inventory.css). Every class the pages
   already use (.card .cards .stat .btn .pill-* .st-* .tabs .kv
   .filters .flash details.disclosure) is kept so no page breaks.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Rajdhani:wght@500;600;700&family=Bebas+Neue&family=Inter:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --accent:#2f8fff; --accent-2:#5cb0ff; --accent-bg:rgba(47,143,255,.12); --accent-line:rgba(47,143,255,.35);
  --cyan:#00e0ff; --purple:#a86bff; --ok:#2ee66b; --warn:#ffd23f; --bad:#ff3b3b;
  --fg:#e4e4e7; --muted:#8a8f99; --dim:#555b66;
  --bg:#000; --panel:#0f1116; --panel-2:#12161f; --line:#262a33; --line2:#1c2029; --line-acc:#2b3a55;
  --rail:224px; --top:68px;
}
* { box-sizing:border-box; }
html { background:#000; }
body {
  margin:0; min-height:100vh; color:var(--fg); line-height:1.5;
  font:15px/1.55 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:url('/assets/img/background.jpg') center/cover fixed no-repeat #000;
}
body::before { content:''; position:fixed; inset:0; background:rgba(0,0,0,.55); pointer-events:none; z-index:1; }
body > * { position:relative; z-index:2; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- type helpers ---------- */
.lbl { font:600 10px 'Rajdhani',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.beb { font-family:'Bebas Neue',Impact,sans-serif; line-height:1; font-variant-numeric:tabular-nums; }
.raj { font-family:'Rajdhani',sans-serif; }
.sec-title { font:600 13px 'Orbitron',sans-serif; letter-spacing:2px; text-transform:uppercase; color:var(--fg); margin:0 0 12px; }
.muted { color:var(--muted); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }

/* ---------- top bar ---------- */
header.top { position:fixed; top:0; left:0; right:0; height:var(--top); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px;
  background:linear-gradient(180deg,rgba(6,8,12,.96),rgba(6,8,12,.86)); border-bottom:1px solid var(--line-acc); backdrop-filter:blur(8px); z-index:50; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-link { display:flex; align-items:center; }
.brand img { height:58px; width:auto; display:block; }
.brand .brand-name { font:600 18px 'Orbitron',sans-serif; letter-spacing:2px; color:#fff; }
.brand .brand-name b { color:var(--accent); font-weight:inherit; }
.brand .org { font:600 11px 'Rajdhani',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-left:6px; padding-left:14px; border-left:1px solid var(--line); }
.search { flex:1; max-width:520px; margin:0 24px; height:38px; border:1px solid var(--line); background:#0a0c10; border-radius:9px; display:flex; align-items:center; gap:10px; padding:0 12px; color:var(--muted); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.search:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.search svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.search span { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search kbd { font:600 10px 'Rajdhani',sans-serif; letter-spacing:.08em; border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:var(--muted); }
.who { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); white-space:nowrap; }
.who b { color:#fff; font-weight:600; }
.who .role { font:700 10px 'Rajdhani',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-bg); border-radius:999px; padding:3px 9px; }
.who .clock { font:600 12px 'Rajdhani',sans-serif; letter-spacing:.1em; }
.burger { display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:#0a0c10; color:var(--fg); cursor:pointer; align-items:center; justify-content:center; }
.burger svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

/* ---------- left rail ---------- */
aside.rail { position:fixed; top:var(--top); bottom:0; left:0; width:var(--rail); padding:18px 12px; overflow-y:auto;
  background:linear-gradient(180deg,rgba(8,10,14,.94),rgba(5,6,9,.94)); border-right:1px solid var(--line-acc); z-index:40; display:flex; flex-direction:column; gap:4px; }
/* folder headers — each rail group collapses */
.rail .grp { display:flex; align-items:center; gap:7px; width:100%; margin:10px 0 2px; padding:6px 10px; border:1px solid transparent; border-radius:8px;
  background:none; cursor:pointer; text-align:left; font:700 14px 'Rajdhani',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#b5bac4; }
.rail .grp-wrap:first-of-type .grp { margin-top:0; }
.rail .grp:hover { color:var(--fg); background:#12151c; }
.rail .grp svg { flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rail .grp svg.caret { width:14px; height:14px; transition:transform .15s; transform:rotate(90deg); }
.rail .grp svg.folder { width:18px; height:18px; }
.rail .grp-wrap.closed .grp svg.caret { transform:rotate(0deg); }
.rail .grp-wrap.closed .grp { color:var(--muted); }
.rail .grp-wrap.here .grp { color:var(--accent); }
.rail .grp-items { display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.rail .grp-wrap.closed .grp-items { display:none; }
/* a closed folder still shows what's inside it: counts move onto the header */
.rail .grp-wrap.closed .grp::after { content:attr(data-badge); margin-left:auto; font-size:11px; letter-spacing:0; color:var(--accent); background:var(--accent-bg); border-radius:999px; padding:1px 7px; }
.rail .grp-wrap.closed .grp[data-badge=""]::after { display:none; }
.rail a.nav { display:flex; align-items:center; gap:10px; height:34px; padding:0 12px 0 22px; border-radius:9px; color:#9aa0ab; font:600 12px 'Rajdhani',sans-serif; letter-spacing:.08em; text-transform:uppercase; border:1px solid transparent; transition:all .12s; }
.rail a.nav:hover { color:#fff; background:#12151c; text-decoration:none; }
.rail a.nav svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.rail a.nav .n { margin-left:auto; font-size:11px; color:var(--muted); background:#161a22; border-radius:999px; padding:1px 7px; }
.rail a.nav.active { color:var(--accent); background:var(--accent-bg); border-color:var(--accent-line); box-shadow:inset 3px 0 0 var(--accent); }
.rail a.nav.active .n { color:var(--accent); background:rgba(47,143,255,.2); }
.rail a.nav.child { height:28px; font-size:12px; padding-left:44px; color:var(--muted); text-transform:none; letter-spacing:.04em; }
.rail a.nav.child.active { box-shadow:none; }
.rail a.nav .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.rail .spacer { flex:1; }
.rail .foot { padding:10px 12px; font:600 10px 'Rajdhani',sans-serif; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; border-top:1px solid var(--line); }
.dot-inv_in { background:var(--accent); } .dot-inv_out { background:var(--purple); } .dot-leads_in { background:var(--ok); } .dot-leads_out { background:var(--warn); }

/* ---------- main ---------- */
main { margin-left:var(--rail); padding:calc(var(--top) + 32px) 40px 48px; max-width:calc(var(--rail) + 1420px); }
.crumbs { display:flex; align-items:center; gap:8px; font:600 12px 'Rajdhani',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; flex-wrap:wrap; }
.crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--accent); text-decoration:none; }
.crumbs .sep { color:#444a55; } .crumbs .cur { color:var(--fg); }
h1 { font:600 26px/1.3 'Orbitron',sans-serif; color:var(--accent); letter-spacing:1px; margin:0 0 6px; padding-top:2px; }
h1 .pill { vertical-align:middle; margin-left:8px; font-family:'Rajdhani',sans-serif; letter-spacing:.12em; }
h2 { font:600 13px/1.4 'Orbitron',sans-serif; letter-spacing:2px; text-transform:uppercase; color:var(--fg); margin:30px 0 14px; }
.sub { color:var(--muted); margin:0 0 22px; font-size:14px; }
.row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.row .sub { margin-bottom:0; }
.row + * { margin-top:20px; }

/* ---------- cards / stats ---------- */
.card { background:linear-gradient(180deg,#12151c,#0c0e13); border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.card.acc { border-color:var(--line-acc); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:18px; }
.cards .card { position:relative; overflow:hidden; padding:18px 22px; transition:all .15s; }
.cards a.card { color:inherit; display:block; }
.cards a.card:hover { text-decoration:none; border-color:var(--kc,var(--accent)); transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.cards .card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--kc,var(--accent)); opacity:.8; }
.cards .card.plain::after { display:none; }
.stat { font-family:'Bebas Neue',Impact,sans-serif; font-size:34px; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.stat-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
.kc-inv_in { --kc:var(--accent); } .kc-inv_out { --kc:var(--purple); } .kc-leads_in { --kc:var(--ok); } .kc-leads_out { --kc:var(--warn); }

/* hero (provider / client detail) */
.hero { display:grid; grid-template-columns:1fr minmax(280px,340px); gap:24px; align-items:stretch; background:linear-gradient(180deg,#12151c,#0c0e13); border:1px solid var(--line-acc); border-radius:14px; padding:20px 22px; margin-bottom:22px; }
.hero h1 { font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; font-size:44px; color:#fff; letter-spacing:.5px; margin:6px 0 0; }
.hero .tags { display:flex; gap:6px; flex-wrap:wrap; }
.hero .meta { color:var(--muted); font-size:13px; margin-top:6px; }
.hero .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; margin-top:20px; }
.hero .stats .v { font-family:'Bebas Neue',Impact,sans-serif; font-size:28px; line-height:1; margin-top:4px; }
.hero .side { display:flex; flex-direction:column; }
.hero .side .acts { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.callout { border:1px solid var(--accent-line); background:linear-gradient(180deg,rgba(47,143,255,.10),rgba(47,143,255,.03)); border-radius:10px; padding:14px 16px; font-size:13px; }
.callout .lbl { color:var(--accent); margin-bottom:6px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; } }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; font:600 11px 'Rajdhani',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:14px 14px 10px; white-space:nowrap; }
td { padding:13px 14px; border-top:1px solid var(--line2); vertical-align:top; }
tr:hover td { background:rgba(47,143,255,.04); }
td strong, td a strong { font:600 15px 'Rajdhani',sans-serif; color:#fff; }
td a strong:hover { color:var(--accent); }
.kv { width:100%; }
.kv td { padding:9px 12px; border-top:1px solid var(--line2); }
.kv tr:first-child td { border-top:0; }
.kv td:first-child { width:210px; color:var(--muted); }
.kv tr:hover td { background:transparent; }

/* ---------- buttons / forms ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px; border-radius:7px; border:1px solid var(--line); background:#0a0c10; color:var(--fg); font:600 12px 'Rajdhani',sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:all .15s; line-height:1; }
.btn:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 18px rgba(47,143,255,.3); }
.btn-primary:hover { background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.btn-danger { color:var(--bad); } .btn-danger:hover { border-color:var(--bad); color:var(--bad); }
.btn-sm { height:28px; padding:0 10px; font-size:11px; }
.btn:disabled { opacity:.5; cursor:default; }
label { display:block; font:600 10px 'Rajdhani',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
  width:100%; height:36px; padding:0 11px; background:#0a0c10; color:var(--fg); border:1px solid var(--line); border-radius:7px; font:500 13.5px 'Inter',sans-serif; }
textarea { height:auto; min-height:90px; padding:8px 11px; resize:vertical; }
select { cursor:pointer; font:600 12px 'Rajdhani',sans-serif; letter-spacing:.06em; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.check { display:inline-flex; align-items:center; gap:7px; margin:0 16px 8px 0; font-size:14px; color:var(--fg); text-transform:none; letter-spacing:0; }
.check input { width:auto; height:auto; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.filters label { margin:0 0 6px; }
.filters > div { min-width:150px; }
.copyline { display:flex; align-items:center; gap:10px; }
.copyline code { background:#0a0c10; border:1px solid var(--line); border-radius:5px; padding:3px 8px; font-size:13px; }

/* ---------- pills / status ---------- */
.pill, .st { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font:700 10px 'Rajdhani',sans-serif; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; line-height:1.3; }
.pill-inv_in    { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.pill-inv_out   { color:var(--purple); border-color:var(--purple); background:rgba(168,107,255,.1); }
.pill-leads_in  { color:var(--ok); border-color:var(--ok); background:rgba(46,230,107,.1); }
.pill-leads_out { color:var(--warn); border-color:var(--warn); background:rgba(255,210,63,.1); }
.pill-inactive  { color:var(--bad); border-color:var(--bad); background:rgba(255,59,59,.12); }
.pill-ok        { color:var(--ok); border-color:var(--ok); background:rgba(46,230,107,.1); }
.st-draft          { color:var(--muted); }
.st-pending_vendor { color:var(--warn); border-color:var(--warn); background:rgba(255,210,63,.1); }
.st-testing        { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.st-live           { color:var(--ok); border-color:var(--ok); background:rgba(46,230,107,.1); }
.st-paused         { color:var(--muted); }
.st-failed         { color:var(--bad); border-color:var(--bad); background:rgba(255,59,59,.12); }

/* ---------- flash ---------- */
.flash { padding:11px 15px; border-radius:8px; margin-bottom:18px; font-size:14px; border:1px solid; }
.flash-ok    { background:rgba(46,230,107,.1); border-color:rgba(46,230,107,.4); color:var(--ok); }
.flash-error { background:rgba(255,59,59,.1); border-color:rgba(255,59,59,.4); color:var(--bad); }
.flash-info  { background:var(--accent-bg); border-color:var(--accent-line); color:var(--accent); }
.empty { text-align:center; padding:48px 20px; color:var(--muted); }

/* ---------- chrome tabs (mirrors IME .mp-tabs) ---------- */
.tabs { display:flex; align-items:flex-end; gap:6px; padding-left:10px; margin:22px 0 0; overflow-x:auto; border-bottom:1px solid var(--line-acc); }
.tabs a { position:relative; display:inline-flex; align-items:center; gap:10px; padding:0 20px; height:42px; margin-top:4px; background:#0b0d12; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; font:600 13.5px 'Rajdhani',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; user-select:none; }
.tabs a:hover { color:var(--fg); text-decoration:none; }
.tabs a.on { height:46px; margin-top:0; margin-bottom:-1px; background:var(--panel-2); border-color:var(--line-acc); border-bottom:1px solid var(--panel-2); color:var(--accent); z-index:2; }
.tabs a.on::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); border-radius:12px 12px 0 0; }
.tabs a .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); margin:0; }
.tabs + * { margin-top:20px; }
.tabs + .card, .tabs + .row { margin-top:22px; }

/* ---------- disclosure ---------- */
details.disclosure { background:linear-gradient(180deg,#12151c,#0c0e13); border:1px solid var(--line); border-radius:12px; }
details.disclosure > summary { cursor:pointer; list-style:none; padding:13px 18px; display:flex; align-items:center; gap:10px; font:600 13px 'Rajdhani',sans-serif; letter-spacing:.1em; text-transform:uppercase; user-select:none; }
details.disclosure > summary::-webkit-details-marker { display:none; }
details.disclosure > summary::before { content:"▸"; color:var(--muted); font-size:12px; transition:transform .15s ease; }
details.disclosure[open] > summary::before { transform:rotate(90deg); }
details.disclosure > summary:hover { color:var(--accent); }
details.disclosure > .disclosure-body { padding:6px 18px 18px; border-top:1px solid var(--line2); }

/* ---------- footer ---------- */
.site-footer { margin:56px 0 0 var(--rail); padding:26px 24px 34px; border-top:1px solid var(--line2); text-align:center; }
.site-footer img { width:150px; height:auto; opacity:.8; }
.site-footer p { margin:12px 0 0; font-size:12px; color:var(--dim); }

/* ---------- command palette (⌘K) ---------- */
.pal { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:110px; }
.pal.on { display:flex; }
.pal .box { width:620px; max-width:92vw; background:#0c0f15; border:1px solid var(--line-acc); border-radius:14px; box-shadow:0 40px 100px #000, 0 0 60px rgba(47,143,255,.15); overflow:hidden; }
.pal .in { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line2); }
.pal .in svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:2; }
.pal .in input { flex:1; height:auto; background:none; border:0; outline:0; box-shadow:none; color:#fff; font:500 16px 'Inter',sans-serif; padding:0; }
.pal .res { padding:8px; max-height:400px; overflow:auto; }
.pal .grp { padding:10px 10px 4px; }
.pal .it { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--fg); }
.pal .it:hover, .pal .it.sel { background:var(--accent-bg); text-decoration:none; }
.pal .it .ic { width:28px; height:28px; border-radius:7px; background:#161a22; display:grid; place-items:center; font:700 11px 'Rajdhani',sans-serif; color:var(--accent); flex:none; }
.pal .it .s { color:var(--muted); font-size:12.5px; }
.pal .it .k { margin-left:auto; }
.pal .none { padding:20px; text-align:center; color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width:960px) {
  aside.rail { transform:translateX(-100%); transition:transform .18s; }
  body.rail-open aside.rail { transform:none; }
  main, .site-footer { margin-left:0; }
  main { padding:calc(var(--top) + 16px) 16px 32px; }
  .search { margin:0 8px; }
  .search span, .search kbd { display:none; }
  .search { flex:0 0 38px; padding:0; justify-content:center; }
  .burger { display:inline-flex; }
  .who .clock, .who .role, .brand .org { display:none; }
}

/* ---------- staff auth pages (login / forgot / reset) ---------- */
body.auth { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:40px 16px; }
body.auth .box { width:420px; max-width:100%; padding:30px 32px; background:linear-gradient(180deg,rgba(18,21,28,.96),rgba(12,14,19,.96)); border:1px solid var(--line-acc); border-radius:14px; box-shadow:0 40px 100px #000, 0 0 60px rgba(47,143,255,.12); }
body.auth .logo { display:block; width:100%; max-width:300px; height:auto; margin:-10px auto 10px; }
body.auth h1 { font-size:18px; text-align:center; margin:0 0 4px; }
body.auth .sub { text-align:center; margin:0 0 20px; }
body.auth button[type=submit] { width:100%; margin-top:22px; height:40px; border-radius:7px; border:1px solid var(--accent); background:var(--accent); color:#fff; font:600 13px 'Rajdhani',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-shadow:0 0 18px rgba(47,143,255,.3); }
body.auth button[type=submit]:hover { background:var(--accent-2); border-color:var(--accent-2); }
body.auth .forgot, body.auth .back { display:block; margin-top:18px; text-align:center; font-size:13px; }
body.auth .err { margin-top:16px; padding:10px 13px; background:rgba(255,59,59,.1); border:1px solid rgba(255,59,59,.4); color:var(--bad); border-radius:8px; font-size:13.5px; }
body.auth .ok { padding:12px 14px; background:rgba(46,230,107,.1); border:1px solid rgba(46,230,107,.4); color:var(--ok); border-radius:8px; font-size:13.5px; }
body.auth .hint { color:var(--muted); font-size:12px; margin-top:6px; }
body.auth .site-footer { margin:0; padding:0; border:0; }