/* =====================================================================
   Specto API Management Panel — standalone stylesheet (no dependency on
   the LCO panel). Dark navigation, light content, Specto orange accent.
   ===================================================================== */
:root{
  --bg:#f3f5f9; --surface:#fff; --surface-2:#f8fafc; --line:#e5e9f0; --line-2:#d5dce6;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --nav:#0b1324; --nav-2:#131d33; --nav-ink:#cbd5e1; --nav-muted:#7c8aa5;
  --brand:#f0810b; --brand-2:#ff9a2e; --brand-tint:#fff4e6; --brand-ink:#8a4700;
  --ok:#12925a; --ok-tint:#e6f6ee; --ok-ink:#0a6b41;
  --bad:#dc3b30; --bad-tint:#fdecea; --bad-ink:#a3261d;
  --warn:#c98a0a; --warn-tint:#fdf4e1; --warn-ink:#8a5c05;
  --info:#2f6bd6; --info-tint:#eaf1fd; --info-ink:#1f4a99;
  --neutral-tint:#eef1f5;
  --r:12px; --r-sm:8px; --sh:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06); --sh-lg:0 20px 50px rgba(15,23,42,.18);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:var(--info);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
code,.mono{font-family:var(--mono);font-size:12.5px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{display:block;color:#fff;font-size:15px;letter-spacing:.01em}
.brand small{display:block;color:var(--nav-muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--nav-muted);font-weight:700;padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--nav-ink);font-weight:500;text-decoration:none}
.nav a i{width:18px;text-align:center;color:var(--nav-muted);font-size:14px}
.nav a:hover{background:var(--nav-2);color:#fff}
.nav a.on{background:linear-gradient(90deg,rgba(240,129,11,.22),rgba(240,129,11,.06));color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.nav a.on i{color:var(--brand-2)}
.nav .pill{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}
.side-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--nav-muted)}
.side-foot a{color:var(--nav-ink)}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:62px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20}
.top .burger{display:none;border:0;background:none;font-size:18px;cursor:pointer}
.top h1{font-size:16px;font-weight:700}
.top .crumb{color:var(--muted);font-size:12.5px}
.top .sp{flex:1}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.who .av{width:32px;height:32px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:700}
.who small{display:block;color:var(--muted);font-size:11.5px}
.content{padding:24px 26px 40px;max-width:1440px;width:100%}
.env-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--warn-tint);color:var(--warn-ink)}

/* ---------- layout helpers ---------- */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-21{grid-template-columns:2fr 1fr}
.mt{margin-top:16px}.mt-l{margin-top:24px}.mb{margin-bottom:16px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head h2{font-size:21px;font-weight:750;letter-spacing:-.01em}
.page-head p{color:var(--muted);margin-top:3px}

/* ---------- cards / kpi ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:14px;font-weight:700}
.card-h .sub{color:var(--muted);font-size:12.5px}
.card-b{padding:16px 18px}
.kpi{padding:16px 18px}
.kpi .l{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center}
.kpi .l i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--neutral-tint);color:var(--ink-2);font-size:13px}
.kpi .v{font-size:26px;font-weight:750;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .m{color:var(--muted);font-size:12.5px;margin-top:2px}
.kpi.brand .l i{background:var(--brand-tint);color:var(--brand)}
.kpi.ok .l i{background:var(--ok-tint);color:var(--ok)}
.kpi.bad .l i{background:var(--bad-tint);color:var(--bad)}
.kpi.info .l i{background:var(--info-tint);color:var(--info)}
.up{color:var(--ok-ink)} .down{color:var(--bad-ink)}

/* ---------- badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap;background:var(--neutral-tint);color:var(--ink-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.badge.ok{background:var(--ok-tint);color:var(--ok-ink)} .badge.bad{background:var(--bad-tint);color:var(--bad-ink)}
.badge.warn{background:var(--warn-tint);color:var(--warn-ink)} .badge.info{background:var(--info-tint);color:var(--info-ink)}
.badge.brand{background:var(--brand-tint);color:var(--brand-ink)} .badge.plain::before{display:none}
.chip{display:inline-flex;align-items:center;height:21px;padding:0 7px;border-radius:6px;font:600 11.5px var(--mono);background:var(--neutral-tint);color:var(--ink-2)}
.chip.ok{background:var(--ok-tint);color:var(--ok-ink)} .chip.bad{background:var(--bad-tint);color:var(--bad-ink)} .chip.warn{background:var(--warn-tint);color:var(--warn-ink)}
.muted{color:var(--muted)} .faint{color:var(--faint);font-size:12px} .small{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}

/* ---------- tables ---------- */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tr:hover td{background:#fbfcfe}
table.t .r{text-align:right}
table.t td .sub{display:block;color:var(--muted);font-size:12px;margin-top:2px}
table.t tr.hl td{background:#fffaf2}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty i{font-size:26px;color:var(--faint);display:block;margin-bottom:10px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.in,select.in,textarea.in{height:38px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 11px;background:#fff;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
textarea.in{height:auto;padding:9px 11px}
.in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(240,129,11,.18)}
.hint{font-size:12px;color:var(--muted)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none!important;transition:background .15s,border-color .15s}
.btn-p{background:var(--brand);color:#fff}.btn-p:hover{background:#dc7406}
.btn-d{background:var(--bad);color:#fff}.btn-d:hover{background:#c22f25}
.btn-g{background:#fff;border-color:var(--line-2);color:var(--ink)}.btn-g:hover{background:var(--surface-2)}
.btn-s{height:30px;padding:0 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-2)}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;cursor:pointer;transition:background .2s}
.switch span::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::before{transform:translateX(18px)}
.switch input:focus-visible+span{box-shadow:0 0 0 3px rgba(240,129,11,.3)}
.switch input:disabled+span{opacity:.5;cursor:not-allowed}
.perm{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.perm:last-child{border-bottom:0}
.perm .pt{flex:1;min-width:0}.perm .pt b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.perm .pt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- alerts ---------- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid;margin-bottom:16px;font-size:13.5px}
.alert i{margin-top:2px}
.alert.ok{background:var(--ok-tint);border-color:#bfe6d1;color:var(--ok-ink)}
.alert.bad{background:var(--bad-tint);border-color:#f6c9c5;color:var(--bad-ink)}
.alert.warn{background:var(--warn-tint);border-color:#f0dcae;color:var(--warn-ink)}
.alert.info{background:var(--info-tint);border-color:#c9daf8;color:var(--info-ink)}

/* ---------- tabs / kv / secrets ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--brand)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.kv:last-child{border-bottom:0}.kv .k{color:var(--muted)}.kv .v{font-weight:600;text-align:right;min-width:0;word-break:break-word}
.secret{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px;margin-top:6px}
.secret code{flex:1;min-width:0;word-break:break-all;font-size:13px}
.code{font-family:var(--mono);font-size:12px;line-height:1.6;background:#0b1324;color:#e2e8f0;border-radius:10px;padding:14px 16px;overflow-x:auto;white-space:pre}

/* ---------- chart ---------- */
.bars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0;height:100%}
.bars .st{width:100%;max-width:34px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 2px 2px;overflow:hidden;background:var(--neutral-tint)}
.bars .ok{background:linear-gradient(180deg,#f7a64c,var(--brand))}
.bars .bad{background:var(--bad)}
.bars .d{font-size:10.5px;color:var(--faint);white-space:nowrap}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.meter{height:8px;background:var(--neutral-tint);border-radius:99px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--ok)}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;gap:6px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager .info{margin-right:auto;color:var(--muted);font-size:12.5px}
.pager a,.pager span.cur{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font-weight:600;font-size:12.5px;text-decoration:none}
.pager span.cur{background:var(--brand);border-color:var(--brand);color:#fff}
.pager a:hover{background:var(--surface-2)}
.pager .dis{opacity:.4;pointer-events:none}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:rgba(11,19,36,.55);display:none;z-index:60}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,94vw);background:#fff;border-radius:14px;box-shadow:var(--sh-lg);display:none;z-index:61}
.ov.open,.modal.open{display:block}
.modal .mh{padding:18px 20px 6px;font-weight:700;font-size:16px}
.modal .mb{padding:6px 20px 16px;color:var(--ink-2)}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth .art{background:radial-gradient(1200px 500px at 20% 10%,rgba(240,129,11,.28),transparent 60%),linear-gradient(160deg,#0b1324,#15223d);color:#e2e8f0;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.auth .art h1{font-size:34px;line-height:1.15;color:#fff;letter-spacing:-.02em;max-width:460px}
.auth .art p{color:#a8b3c7;max-width:440px;margin-top:14px;font-size:15px}
.auth .art ul{list-style:none;margin-top:28px;display:grid;gap:10px;color:#cbd5e1}
.auth .art li i{color:var(--brand-2);width:22px}
.auth .form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff}
.auth form{width:min(380px,100%)}
.auth form h2{font-size:22px;margin-bottom:4px}
.auth form .field{margin-top:14px}

/* ---------- toast ---------- */
.toast{position:fixed;right:20px;bottom:20px;background:#0b1324;color:#fff;padding:11px 16px;border-radius:10px;box-shadow:var(--sh-lg);font-size:13px;z-index:80;opacity:0;transform:translateY(10px);transition:all .2s;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-21{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-100%);transition:transform .2s;z-index:50}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(11,19,36,.5);z-index:40}
  .top .burger{display:block}
  .content{padding:18px 14px 32px}
  .g-3,.g-2{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}.auth .art{display:none}
  .who .nm{display:none}
}
@media (max-width:560px){
  .g-4{grid-template-columns:1fr 1fr}
  .kpi .v{font-size:21px}
  table.t.stack thead{display:none}
  table.t.stack tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}
  table.t.stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 14px;text-align:right}
  table.t.stack td::before{content:attr(data-l);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;text-align:left}
  table.t.stack td .sub{text-align:right}
}