/* =====================================================================
   ZCC PRO — "Operations Console" skin for the Zikoven Command Center.

   Presentation only: loaded after the inline <style> block and
   fleet_registry.css, it re-tokens the palette and refines layout,
   spacing and component styling. It adds no content and no behaviour —
   every id, class, page name and script path is untouched. Remove the
   <link> to zcc-pro.css in index.html to roll back.

   System: ink navigation rail + light, high-contrast work surface.
   Geist / Geist Mono type, 4px spacing grid, one brand accent (Zikoven
   amber) used for identity and primary actions; semantic green/red for
   state. Contrast checked to WCAG AA on the light surface.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap");

:root{
  color-scheme:light;
  /* work surface */
  --bg:#f3f4f7;
  --bg-2:#eceef2;
  --panel:#ffffff;
  --panel-2:#f8f9fb;
  --panel-3:#eff1f5;
  --line:#e4e7ec;
  --line-2:#d0d5dd;
  --text:#101828;
  --text-2:#475467;
  --text-3:#667085;
  /* brand accent (amber) — text-safe tone + fill tone */
  --gold:#a15c07;
  --gold-fill:#e8a317;
  --gold-fill-hover:#f0b429;
  --gold-soft:rgba(232,163,23,.12);
  --gold-line:rgba(181,114,10,.38);
  /* semantics */
  --hot:#d92d20;
  --red:#d92d20;
  --hot-soft:rgba(217,45,32,.09);
  --green:#067647;
  --green-soft:rgba(6,118,71,.11);
  --blue:#1f5ad1;
  /* ink rail */
  --ink:#0a0f1a;
  --ink-2:#111827;
  --ink-line:#1c2536;
  --ink-text:#a9b3c4;
  --ink-text-2:#6c7a91;
  --ink-hi:#f5f7fa;
  --ink-accent:#f5c451;
  /* shape + depth */
  --radius:12px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 10px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.05);
  --shadow-lg:0 24px 48px -12px rgba(16,24,40,.24);
  --ring:0 0 0 3px rgba(232,163,23,.28);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;
}

body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;letter-spacing:-.003em;font-feature-settings:"cv11","ss01"}
::selection{background:rgba(232,163,23,.22)}
code,kbd,.mono{font-family:var(--mono)}

/* scrollbars: quiet on light, dark on the rail */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c9cfd8;border:3px solid transparent;border-radius:10px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#9aa3b2;background-clip:content-box}
.sidebar ::-webkit-scrollbar-thumb{background:#253049;background-clip:content-box}
*{scrollbar-color:#c9cfd8 transparent;scrollbar-width:thin}
.sidebar *{scrollbar-color:#253049 transparent}

/* keyboard focus — visible everywhere it matters */
.btn:focus-visible,.chip:focus-visible,.nav-item:focus-visible,.toggle:focus-visible,.suggest:focus-visible,
.agent-card:focus-visible,.so-close:focus-visible,.menu-btn:focus-visible,.send-btn:focus-visible,
.eth-tab:focus-visible,.new-chat-btn:focus-visible,.proj-chip:focus-visible,.webops-btn:focus-visible,
.fleet-btn:focus-visible,.attach-btn:focus-visible,.mic-btn:focus-visible,.call-btn:focus-visible,
.tgvoice-btn:focus-visible,.talk-btn:focus-visible,.session-item:focus-visible{
  outline:2px solid var(--gold-fill);outline-offset:2px;border-radius:9px}

/* ============================ LOGIN ============================ */
#login{
  background:
    radial-gradient(1100px 620px at 50% -12%,rgba(232,163,23,.16),transparent 62%),
    radial-gradient(800px 520px at 100% 110%,rgba(31,90,209,.14),transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/44px 44px,
    var(--ink);
}
.login-card{
  max-width:420px;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;
  padding:40px 36px 30px;box-shadow:0 40px 80px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
}
.login-brand{margin-bottom:30px}
.login-brand h1{font-size:21px;font-weight:650;letter-spacing:-.025em}
.login-brand p{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-3);margin-top:4px}
.login-foot{font-size:11.5px;color:var(--text-3)}

/* ============================ FORMS ============================ */
.field label{font-size:12px;font-weight:550;color:var(--text-2);margin-bottom:6px}
.input,select.input,textarea.input{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text);font-size:13.5px;padding:10px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:#98a2b3}
.input:focus{background:var(--panel);border-color:var(--gold-fill);box-shadow:var(--ring)}
.input[readonly]{background:var(--panel-2)}

/* ============================ BUTTONS ============================ */
.btn{
  border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-weight:600;letter-spacing:0;
  background:var(--panel);color:var(--text);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;min-height:36px;
}
.btn:hover{background:var(--panel-2);border-color:#b8bfca;color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold-fill);border-color:#d4940f;color:#1f1402;box-shadow:0 1px 2px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-gold:hover{background:var(--gold-fill-hover);border-color:#d9990f;color:#1f1402}
.btn-ghost{background:transparent;border-color:var(--line-2);box-shadow:none}
.btn-ghost:hover{background:var(--panel-3)}
.btn-hot,.btn-danger{background:var(--hot);border-color:#b42318;color:#fff}
.btn-hot:hover,.btn-danger:hover{background:#b42318;border-color:#912018;color:#fff}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px;min-height:32px}
.webops-btn{background:var(--panel);border-color:var(--line-2);color:var(--text-2);border-radius:7px}
.webops-btn:hover{background:var(--panel-2);color:var(--text)}

/* ============================ SHELL ============================ */
.sidebar{
  width:256px;flex:0 0 256px;background:var(--ink);border-right:1px solid var(--ink-line);color:var(--ink-text);
}
.side-head{padding:16px 16px 14px;border-bottom:1px solid var(--ink-line)}
.brand .avatar{box-shadow:0 0 0 1px rgba(245,196,81,.25),0 6px 16px -6px rgba(232,163,23,.55)}
.brand-meta .name{color:var(--ink-hi);font-size:15px;font-weight:650;letter-spacing:-.02em}
.brand-meta .sub{color:var(--ink-text-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;margin-top:2px}
.nav{padding:10px 10px 14px}
.nav-label{color:var(--ink-text-2);font-size:10px;font-weight:600;letter-spacing:.12em;padding:14px 10px 6px}
.nav-label:first-child{padding-top:4px}
.nav-item{
  color:var(--ink-text);font-size:13.5px;font-weight:500;padding:7px 10px;border-radius:8px;margin-bottom:1px;
  border:1px solid transparent;text-decoration:none;transition:background .14s,color .14s;
}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.055);color:var(--ink-hi)}
.nav-item.active{background:linear-gradient(90deg,rgba(245,196,81,.14),rgba(245,196,81,.05));color:var(--ink-accent);border-color:rgba(245,196,81,.16)}
.nav-item.active svg{opacity:1}
.nav-item.active::before{left:-10px;width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--ink-accent);box-shadow:0 0 10px rgba(245,196,81,.6)}
.nav-badge{
  background:rgba(255,255,255,.06);color:var(--ink-text);border:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:10px;font-weight:500;padding:1px 7px;text-decoration:none;
}
.nav-item.active .nav-badge{background:rgba(245,196,81,.16);color:var(--ink-accent);border-color:rgba(245,196,81,.22)}
.side-foot{padding:12px;border-top:1px solid var(--ink-line)}
.status-pill{background:rgba(255,255,255,.04);border:1px solid var(--ink-line);color:var(--ink-text);border-radius:9px;padding:9px 11px}
.status-pill .muted,#side-master{color:var(--ink-accent)!important;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.dot.live{background:#17b26a;box-shadow:0 0 0 3px rgba(23,178,106,.2)}
.dot.off{background:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.2)}
.dot.idle{background:#98a2b3}

.main{background:var(--bg)}
.topbar{
  height:56px;flex:0 0 56px;padding:0 28px;gap:12px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(16,24,40,.02);position:relative;z-index:5;
}
.topbar h2{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.topbar .menu-btn{border-color:var(--line-2);color:var(--text-2);background:var(--panel)}
.top-stat{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--text-2);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.top-stat b{font-family:var(--mono);font-weight:500;font-size:11.5px}

.view-pad{max-width:1280px;padding:30px 32px 72px}
.page-title{font-size:24px;font-weight:650;letter-spacing:-.028em;line-height:1.2;margin:0 0 6px;color:var(--text)}
.page-desc{color:var(--text-2);font-size:13.5px;line-height:1.6;max-width:780px;margin:0 0 26px}
.view-pad > div > h2,.view-pad h2{letter-spacing:-.02em}
.view-pad .sub{color:var(--text-3);font-size:12.5px}

/* ============================ CARDS ============================ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px 20px}
.card-head{padding:14px 20px;border-bottom:1px solid var(--line);gap:12px;background:linear-gradient(180deg,#fff,var(--panel-2))}
.card-head:first-child{border-radius:var(--radius) var(--radius) 0 0}
.card-head h3{font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--text)}
.card-head .sub{font-size:12px;color:var(--text-3)}
.card-head .cap-icon{background:var(--panel);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.meta{font-size:12.5px;color:var(--text-2)}
.hint{font-size:12px;color:var(--text-3)}

/* stat tiles (both .k/.v and .label/.value markups) */
.stat-card{padding:16px 18px}
.stat-card:not(.card){background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat-card .k,.stat-card .label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;display:flex;align-items:center;gap:8px}
.stat-card .v,.stat-card .value{font-size:24px;font-weight:650;margin-top:6px;letter-spacing:-.025em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--text)}
.stat-card .sub{font-size:12px;color:var(--text-3);margin-top:4px}
.grid{gap:14px}

/* key/value rows inside cards */
.card > .cap-edit{padding:11px 20px;border-top:1px solid var(--line);gap:14px;min-height:48px}
.card > .card-head + .cap-edit,.card > .disarmed-note + .cap-edit{border-top:0}
.cap-edit label{font-size:13px;color:var(--text-2)}
.cap-edit strong{font-size:13px;font-weight:600;color:var(--text);font-family:var(--mono);font-size:12px}
.card > .btn{margin:14px 0 16px 20px}
.disarmed-note{background:var(--panel-2);border-bottom:1px solid var(--line);color:var(--text-2);padding:11px 20px}

/* tags / chips */
.tag{border-radius:999px;font-size:11px;padding:2px 9px;border-color:var(--line-2);background:var(--panel-2);color:var(--text-2)}
.tag.gold{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.tag.green{color:var(--green);border-color:rgba(6,118,71,.28);background:var(--green-soft)}
.tag.cli{font-family:var(--mono)}
.chip{border-radius:8px;border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);font-weight:550;padding:7px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.chip:hover{background:var(--panel-2);color:var(--text);border-color:#b8bfca}
.chip.active{background:var(--ink-2);border-color:var(--ink-2);color:#fff}

/* status blocks */
.loading-block{color:var(--text-3);padding:44px}
.loading-block svg{stroke:var(--gold-fill)}
.err-block{border-color:rgba(217,45,32,.25);background:var(--hot-soft);color:#912018}
.empty-block{color:var(--text-3)}
.info-banner{background:#fffaeb;border:1px solid #fedf89;color:#7a2e0e;border-radius:var(--radius)}
.info-banner svg{stroke:#dc6803}

/* ============================ TOGGLES ============================ */
.toggle{width:46px;height:26px;flex:0 0 46px;background:#e4e7ec;border:1px solid #d0d5dd;box-shadow:inset 0 1px 2px rgba(16,24,40,.08)}
.toggle::after{width:20px;height:20px;top:2px;left:2px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.25)}
.toggle.on{background:var(--gold-fill);border-color:#d4940f}
.toggle.on::after{transform:translateX(20px);background:#fff}
.toggle.hot.on{background:var(--hot);border-color:#b42318}
.toggle.hot.on::after{background:#fff}

/* ======================= COMMAND CENTER ======================= */
.master-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow)}
.master-card.armed{
  border-color:var(--gold-line);
  background:
    radial-gradient(600px 180px at 0% 0%,rgba(232,163,23,.14),transparent 70%),
    linear-gradient(135deg,#fffdf6,#fff);
  box-shadow:var(--shadow),inset 3px 0 0 var(--gold-fill);
}
.master-card .mc-icon{background:var(--panel-3);border:1px solid var(--line)}
.master-card.armed .mc-icon{background:var(--gold-soft);border-color:var(--gold-line)}
.master-card .mc-text h3{font-size:17px;font-weight:650;letter-spacing:-.02em}
.state-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:600}
.cap-row{border-bottom-color:var(--line)}
.cap-row:hover{background:var(--panel-2)}
.cap-icon{background:var(--panel-3);border-radius:9px}
.cap-row.armed .cap-icon{background:var(--gold-soft)}
.cap-info .cn{font-size:13.5px;font-weight:600}
.cap-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em}
.cap-grid{gap:12px;padding:16px;background:var(--panel-2);border-radius:0 0 var(--radius) var(--radius)}
.cap-grid .cap-row{background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .15s,box-shadow .15s}
.cap-grid .cap-row:hover{background:var(--panel);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.cap-grid .cap-row.armed{box-shadow:inset 3px 0 0 var(--gold-fill),0 1px 2px rgba(16,24,40,.04)}

/* ======================= THE OFFICE ======================= */
.filters{gap:8px}
.search-box .input{padding-left:38px;height:40px}
.team-head h3{font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.team-head .count{font-family:var(--mono);font-size:10.5px;background:var(--panel);border-color:var(--line)}
.agent-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.agent-card{border-radius:12px;padding:16px;box-shadow:var(--shadow);transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.agent-card:hover{border-color:var(--gold-line);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.agent-card .ac-avatar{background:linear-gradient(135deg,#fff7e0,#fdebc0);border:1px solid var(--gold-line);color:var(--gold);font-family:var(--mono);font-size:12px}
.agent-card .ac-title{font-size:13.5px;font-weight:600}
.agent-card .ac-id{font-family:var(--mono);font-size:10.5px}

/* slide-over: shadow only while open (was bleeding onto the page edge) */
.slideover{box-shadow:none;border-left:1px solid var(--line)}
.slideover.show{box-shadow:var(--shadow-lg)}
.overlay{background:rgba(10,15,26,.45);backdrop-filter:blur(3px)}
.so-head .ac-avatar{background:linear-gradient(135deg,#fff7e0,#fdebc0)}
.preview-cmd{background:var(--ink);color:#c8d1df;border:1px solid var(--ink-line);font-family:var(--mono)}
.preview-cmd .pfx{color:var(--ink-accent)}

/* ======================= SETTINGS / KEYS ======================= */
.setting-row{padding:15px 20px}
.setting-row .sv{font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:3px 9px}
.acct-card .acct-av{background:linear-gradient(135deg,#fff7e0,#fdebc0)}
.secret-row .sr-env{font-family:var(--mono);font-size:12.5px}
.secret-row:hover{background:var(--panel-2)}

/* ======================= TOASTS ======================= */
.toast{background:var(--ink-2);border:1px solid var(--ink-line);color:#e7ebf1;box-shadow:var(--shadow-lg);border-radius:11px}
.toast.ok{border-color:rgba(23,178,106,.45)}
.toast.err{border-color:rgba(240,68,56,.5)}
.toast.ok svg{stroke:#32d583}.toast.err svg{stroke:#f97066}.toast.info svg{stroke:var(--ink-accent)}

/* ======================= CHAT ======================= */
.session-panel{width:272px;flex:0 0 272px;background:var(--panel-2);border-right:1px solid var(--line);padding:14px 12px;gap:10px}
.new-chat-btn{background:var(--ink-2);color:#fff;border:1px solid var(--ink-2);border-radius:9px;padding:9px;font-size:13.5px;box-shadow:0 1px 2px rgba(16,24,40,.12);transition:background .15s}
.new-chat-btn:hover{background:#1d2939;color:#fff}
.session-search input{background:var(--panel);border:1px solid var(--line-2);border-radius:9px;height:36px}
.session-item{border-radius:8px;padding:8px 10px;transition:background .12s}
.session-item:hover{background:var(--panel-3)}
.session-item.active{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow),inset 2px 0 0 var(--gold-fill)}
.session-item .st{font-size:13px;font-weight:550;color:var(--text)}
.session-item .sp{color:var(--text-3)}
.proj-chip{background:var(--panel);border-color:var(--line-2)}
.proj-chip.active{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.sb-head{font-size:10px;letter-spacing:.12em;color:var(--text-3)}
.proj-count{font-family:var(--mono);background:var(--panel-3)}
.ctx-menu{border-color:var(--line);box-shadow:var(--shadow-lg)}

/* the chat surface adopts the console palette */
#view-chat.eth-chat{
  --eth-bg:#f7f8fa;
  --eth-lowest:#ffffff;
  --eth-sc:#ffffff;
  --eth-sc-high:#eef1f5;
  --eth-primary:#101828;
  --eth-primary-container:#101828;
  --eth-on-primary-container:#eef1f6;
  --eth-on-surface:#101828;
  --eth-on-surface-variant:#5b6576;
  --eth-outline:#8a94a6;
  --eth-outline-variant:#e4e7ec;
  font-family:var(--sans);
}
.eth-chanbar{height:52px;padding:0 28px;gap:28px;background:#fff;border-bottom:1px solid var(--line)}
.eth-tabs{gap:24px}
.eth-tab{font-size:12px;letter-spacing:.14em;color:var(--text-3);border-bottom-width:2px}
.eth-tab.active{color:var(--text);border-bottom-color:var(--gold-fill)}
.eth-banner{border-radius:10px;border-color:var(--line);background:#fff;box-shadow:var(--shadow)}
#view-chat.eth-chat .msg-av.zik{background:linear-gradient(135deg,#fff7e0,#fdebc0);border-color:var(--gold-line)}
#view-chat.eth-chat .msg-av.zik .fb{color:var(--gold)}
#view-chat.eth-chat .msg-name{font-size:10.5px;letter-spacing:.14em;color:var(--text-3)}
#view-chat.eth-chat .msg-text{
  background:#fff;border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);padding:13px 17px;line-height:1.62;
}
#view-chat.eth-chat .msg.user .msg-text{border-color:#101828;border-radius:14px 14px 4px 14px;box-shadow:0 2px 6px -2px rgba(16,24,40,.3)}
#view-chat.eth-chat .msg-text code{background:#f2f4f7;border:1px solid var(--line);font-family:var(--mono)}
#view-chat.eth-chat .msg.user .msg-text code{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff}
#view-chat.eth-chat .msg-text .md-pre{background:var(--ink);border:1px solid var(--ink-line);border-radius:10px}
#view-chat.eth-chat .msg-text .md-pre code{border:0;background:none}
#view-chat.eth-chat .msg-text a{color:var(--blue)}
#view-chat.eth-chat .composer-wrap{background:linear-gradient(to top,#f7f8fa 64%,rgba(247,248,250,0))}
#view-chat.eth-chat .composer-box{border-color:var(--line-2);border-radius:14px;box-shadow:0 4px 16px -6px rgba(16,24,40,.12),0 1px 2px rgba(16,24,40,.05)}
#view-chat.eth-chat .composer-box:focus-within{border-color:var(--gold-fill);box-shadow:var(--ring),0 4px 16px -6px rgba(16,24,40,.12)}
#view-chat.eth-chat .send-btn{background:var(--ink-2)}
#view-chat.eth-chat .send-btn:hover{background:#1d2939}
#view-chat.eth-chat .person-row .input{height:34px;padding:6px 11px;background:#fff}
#view-chat.eth-chat .suggest{border-radius:12px;box-shadow:var(--shadow)}
#view-chat.eth-chat .suggest:hover{border-color:var(--gold-line);background:#fff;box-shadow:var(--shadow-md)}
.composer-hint kbd{font-family:var(--mono)}

/* live turn steps */
.step{background:var(--panel-2);border-left-color:var(--line-2)}
.step.tool{border-left-color:var(--gold-fill)}
.step .step-label{color:var(--gold)}
.step .step-body,.step .step-detail{font-family:var(--mono)}
.step .step-detail{background:var(--panel);border-color:var(--line)}
.step.err .step-label,.step.err .step-body,.step.stop .step-label{color:#b42318}
.live-status .live-label{color:var(--gold)}
.live-status .spinner{border-top-color:var(--gold-fill)}
.ask-box{border-color:var(--gold-fill);background:#fffaeb}
.ask-send{background:var(--gold-fill);color:#1f1402}
.ask-send:hover{background:var(--gold-fill-hover)}
.queued{background:var(--panel);border-color:var(--line-2)}

/* ======================= FLEET REGISTRY ======================= */
.fleet-header{padding:30px 32px 18px}
.fleet-header h1{font-size:24px;font-weight:650;letter-spacing:-.028em}
.fleet-header p{color:var(--text-2);font-size:13.5px}
.fleet-toolbar{padding:12px 32px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fleet-filter-bar{padding:10px 32px;background:var(--panel-2)}
.fleet-card{border-radius:10px;box-shadow:var(--shadow)}
.fleet-card-value{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fleet-card-title{letter-spacing:.08em}
.fleet-filter-input,.fleet-filter-select{background:var(--panel);border-color:var(--line-2)}
.fleet-card-warning .fleet-card-value{color:var(--gold)}

/* ======================= RESPONSIVE ======================= */
.topbar > div:not(.spacer):not(.top-stat){min-width:0}
.topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .sidebar{box-shadow:none}
  .sidebar.open{box-shadow:var(--shadow-lg)}
  .topbar{padding:0 16px}
  .view-pad{padding:22px 16px 56px}
  .page-title{font-size:21px}
  .fleet-header{padding:22px 16px 14px}
  .fleet-toolbar,.fleet-filter-bar{padding-left:16px;padding-right:16px;flex-wrap:wrap}
  .card > .cap-edit{padding:10px 16px;flex-wrap:wrap}
  .eth-chanbar{padding:0 16px}
}
#scrim{background:rgba(10,15,26,.5);backdrop-filter:blur(2px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}