/* ============================================================
   Ferrogate design system — single source of truth (all admin UI).
   Clean, professional SaaS. Coral on white. AI-native.
   ============================================================ */
@font-face{font-family:"Space Grotesk";src:url('/assets/fonts/spacegrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url('/assets/fonts/spacegrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:"Inter";src:url('/assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:"Inter";src:url('/assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:"Inter";src:url('/assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url('/assets/fonts/jetbrainsmono-400.woff2') format('woff2');font-weight:400;font-display:swap;}
:root{
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --sans:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --coral:#E24E2E; --coral-lo:#C63E1F; --coral-hi:#F0774C;
  --grad:linear-gradient(135deg,#F0774C,#E24E2E 55%,#C63E1F);
  --ok:#12A150; --warn:#E08600; --info:#3B7DED; --violet:#7A5AF8; --danger:#DC3B32;
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
}
:root,:root[data-theme="light"]{
  --bg:#F7F7F5; --bg-2:#FBFBF9; --panel:#FFFFFF; --panel-2:#F8F8F6; --panel-3:#F2F2EF;
  --line:#EAEAE4; --line-2:#DEDED6; --text:#17171A; --muted:#6B6B72; --faint:#A0A0A6;
  --coral-soft:#FCEEE9; --ok-soft:#E7F6EC; --warn-soft:#FBF1E0; --info-soft:#EAF1FD; --violet-soft:#F0EDFE; --danger-soft:#FBEAE9;
  --shadow:0 1px 2px rgba(23,23,26,.04),0 1px 3px rgba(23,23,26,.06); --shadow-md:0 8px 24px -10px rgba(23,23,26,.14);
  --glow:0 8px 22px -8px rgba(226,78,46,.45); color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0C0C0E; --bg-2:#0E0E11; --panel:#151517; --panel-2:#1B1B1E; --panel-3:#202024;
  --line:#26262b; --line-2:#33333a; --text:#ECECEE; --muted:#9A9AA2; --faint:#5E5E68;
  --coral:#F0774C; --coral-lo:#E24E2E; --coral-hi:#FF9068;
  --coral-soft:rgba(240,119,76,.13); --ok-soft:rgba(45,190,110,.13); --warn-soft:rgba(240,160,40,.13); --info-soft:rgba(90,140,255,.13); --violet-soft:rgba(150,120,250,.14); --danger-soft:rgba(240,90,80,.13);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 12px 30px -12px rgba(0,0,0,.6); --glow:0 8px 24px -8px rgba(240,119,76,.4); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;}
a{color:var(--coral);text-decoration:none;} .display{font-family:var(--display);} .mono{font-family:var(--mono);}
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;transform:translateY(-160%);padding:9px 13px;border-radius:var(--radius-xs);background:var(--text);color:var(--panel);font-weight:600;box-shadow:var(--shadow-md);}
.skip-link:focus{transform:none;}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--coral);outline-offset:3px;}
::selection{background:var(--coral);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:padding-box;}

/* ---- app shell (sidebar) ---- */
.shell{display:flex;min-height:100vh;}
.sb{width:246px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;}
.sb .brand{padding:20px 18px 16px;}
.sb-nav{padding:6px 12px;flex:1;overflow-y:auto;z-index:1;}
.sb-nav .grp{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px;}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--radius-xs);color:var(--muted);font-weight:500;font-size:.865rem;cursor:pointer;transition:.13s;}
.sb-nav a svg{width:17px;height:17px;stroke-width:2;color:var(--faint);flex-shrink:0;}
.sb-nav a:hover{background:var(--panel-2);color:var(--text);}
.sb-nav a.on{background:var(--coral-soft);color:var(--coral);} .sb-nav a.on svg{color:var(--coral);}
.sb-wave{position:absolute;left:0;right:0;bottom:56px;height:200px;pointer-events:none;opacity:.85;z-index:0;}
.sb-foot{padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;position:relative;z-index:1;background:var(--panel);}
.envsel{flex:1;display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:8px 11px;font-size:.8rem;font-weight:500;color:var(--text);cursor:default;}
.envsel .d{width:8px;height:8px;border-radius:50%;background:var(--ok);}
.envsel svg{width:14px;height:14px;color:var(--faint);margin-left:auto;}

/* ---- logo (F mark) ---- */
.logo{display:flex;align-items:center;gap:11px;}
.logo .mk{width:34px;height:34px;flex-shrink:0;}
.logo .wm{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.01em;line-height:1.05;color:var(--text);}
.logo .wm small{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;color:var(--coral);font-weight:400;margin-top:2px;}

/* ---- topbar ---- */
.tb{display:flex;align-items:center;gap:13px;padding:18px 30px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:10;}
.tb h1{font-family:var(--display);font-weight:500;font-size:1.32rem;letter-spacing:-.015em;}
.tb .sp{flex:1;}
main{flex:1;min-width:0;display:flex;flex-direction:column;}
.content{padding:24px 30px 60px;}

/* ---- kicker / ai ---- */
.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--coral);}
.ai-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:4px 11px;border-radius:999px;border:1px solid var(--coral);background:var(--coral-soft);color:var(--coral);}
.ai-pill svg{width:12px;height:12px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;border-radius:var(--radius-xs);padding:9px 15px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);transition:.14s;white-space:nowrap;}
.btn:hover{border-color:var(--line-2);background:var(--panel-2);}
.btn svg{width:15px;height:15px;}
.btn.pri{background:var(--grad);border:0;color:#fff;box-shadow:var(--glow);}
.btn.pri:hover{filter:brightness(1.05);}

/* ---- status pill ---- */
.spill{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--panel);font-weight:500;}
.spill .d{width:8px;height:8px;border-radius:50%;background:var(--faint);}
.spill .d.ok{background:var(--ok);} .spill .d.bad{background:var(--danger);}

/* ---- stat cards ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
@media(max-width:1080px){.stats{grid-template-columns:1fr 1fr;}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:flex;gap:14px;}
.stat .ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--coral-soft);display:grid;place-items:center;color:var(--coral);}
.stat .ic svg{width:20px;height:20px;}
.stat .lab{font-size:.78rem;color:var(--muted);font-weight:500;}
.stat .val{font-family:var(--display);font-weight:500;font-size:1.75rem;letter-spacing:-.02em;line-height:1.1;margin-top:1px;}
.stat .foot{display:flex;align-items:center;gap:8px;margin-top:5px;}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:.74rem;font-weight:600;}
.trend.up{color:var(--ok);} .trend.down{color:var(--danger);} .trend.flat{color:var(--faint);}
.trend svg{width:12px;height:12px;}
.stat .spark{margin-left:auto;align-self:center;width:74px;height:30px;}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.panel .ph{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);}
.panel .ph h2{font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:-.01em;}
.panel .ph .cnt{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 9px;}
.panel .pb{padding:18px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:1080px){.two{grid-template-columns:1fr;}}

/* ---- chart / bars ---- */
.chart{width:100%;height:220px;}
.barrow{display:grid;grid-template-columns:150px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;}
.barrow .n{font-family:var(--mono);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.barrow .track{height:8px;background:var(--panel-3);border-radius:5px;overflow:hidden;}
.barrow .track>i{display:block;height:100%;background:var(--grad);border-radius:5px;transition:width .5s;}
.barrow .v{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}

/* ---- upstream rows ---- */
.urow{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);}
.urow:last-child{border-bottom:0;} .urow .nm{font-family:var(--mono);font-size:.83rem;font-weight:500;}
.urow .meta{font-size:.74rem;color:var(--faint);} .urow .rt{margin-left:auto;display:flex;gap:6px;}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:16px;border:1px solid transparent;white-space:nowrap;}
.badge .dt{width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.coral{color:var(--coral);background:var(--coral-soft);border-color:var(--coral);}
.badge.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok);}
.badge.warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn);}
.badge.info{color:var(--info);background:var(--info-soft);border-color:var(--info);}
.badge.violet{color:var(--violet);background:var(--violet-soft);border-color:var(--violet);}
.badge.danger{color:var(--danger);background:var(--danger-soft);border-color:var(--danger);}
.badge.mut{color:var(--muted);background:var(--panel-2);border-color:var(--line);}

/* ---- inputs ---- */
.field{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;transition:.14s;box-shadow:var(--shadow);}
.field:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft);}
.field svg{width:16px;height:16px;color:var(--faint);}
.field input{border:0;background:transparent;font:inherit;color:var(--text);width:100%;outline:none;}
select.sel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:.85rem;padding:10px 13px;cursor:pointer;outline:none;box-shadow:var(--shadow);}
.tok{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:7px 10px;}
.tok svg{width:13px;height:13px;color:var(--faint);} .tok input{border:0;background:transparent;font-family:var(--mono);font-size:.72rem;width:100px;outline:none;color:var(--text);}
.tok .d{width:7px;height:7px;border-radius:50%;background:var(--faint);} .tok .d.set{background:var(--ok);}
.iconbtn{width:36px;height:36px;flex-shrink:0;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-xs);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.14s;}
.iconbtn:hover{color:var(--text);border-color:var(--line-2);} .iconbtn svg{width:16px;height:16px;}

/* ---- table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:.84rem;}
.tbl thead th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:400;padding:0 14px 11px;border-bottom:1px solid var(--line);}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);}
.tbl tr:last-child td{border-bottom:0;} .tbl tbody tr:hover{background:var(--panel-2);}
code.k{font-family:var(--mono);font-size:.9em;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--text);}
.empty{padding:38px;text-align:center;color:var(--muted);font-size:.9rem;}

/* ---- api cards (store) ---- */
.apicard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.16s;display:flex;flex-direction:column;gap:12px;}
.apicard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2);}
.apicard .r1{display:flex;align-items:flex-start;gap:12px;}
.apicard .ic{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--coral-soft);display:grid;place-items:center;color:var(--coral);}
.apicard .ic svg{width:20px;height:20px;}
.apicard .ttl{font-family:var(--display);font-weight:500;font-size:1.12rem;line-height:1.15;}
.apicard .team{font-size:.76rem;color:var(--muted);margin-top:1px;}
.apicard .desc{color:var(--muted);font-size:.86rem;flex:1;}
.apicard .foot{display:flex;align-items:center;gap:14px;font-size:.76rem;color:var(--faint);padding-top:12px;border-top:1px solid var(--line);}
.apicard .foot b{color:var(--text);font-weight:600;}

.reveal{opacity:0;transform:translateY(8px);animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}