/* ViiSync SDK Sample — console shell + components, built on design-system tokens.css.
   Class vocabulary mirrors the proposal mockups (docs/proposals/sdk-sample-remote-gateway-proposal.html). */

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--fg);font:13px/1.6 var(--sans,"IBM Plex Sans",system-ui,sans-serif);}
a{color:inherit;text-decoration:none;}
h1{margin:0;}

/* ── IDE shell ─────────────────────────────────────────────────────────────── */
.shell{display:flex;flex-direction:column;height:100vh;}
.titlebar{display:flex;align-items:center;height:38px;background:var(--titlebar);border-bottom:1px solid var(--border-tb);padding:0 12px;gap:10px;flex:0 0 38px;}
.titlebar .logo{width:18px;height:18px;color:var(--logo-ink);}
.titlebar .ttl{font:11.5px var(--mono);color:var(--fg-dim);}
.titlebar .status-chip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:10.5px var(--mono);color:var(--fg-dim);}
.status-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gray);}
.status-chip .dot.up{background:var(--green);}
.status-chip .dot.down{background:var(--red);}

.body{display:flex;flex:1;min-height:0;}
.side{width:252px;flex:0 0 252px;border-right:1px solid var(--border-soft);padding:8px 0;background:var(--bg);overflow-y:auto;}
.main{flex:1;min-width:0;overflow-y:auto;background:var(--bg);}

.sec-lbl{font:600 10.5px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--fg-faint);padding:12px 12px 4px;}
.node{position:relative;display:flex;align-items:center;gap:8px;height:26px;padding:0 12px;font-size:12.5px;color:var(--fg);white-space:nowrap;cursor:pointer;}
.node:hover{background:var(--hover);}
.node.sel{background:var(--sel);}
.node.sel::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--grad);box-shadow:0 0 5px var(--glow);}
.node .nicon{width:16px;flex:0 0 16px;display:inline-flex;justify-content:center;font-size:12px;color:var(--fg-faint);}
.node.sel .nicon{color:var(--acc-teal);}
.node .badge{margin-left:auto;color:var(--fg-faint);font:11px var(--mono);}
.node .live{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--green);}

/* ── content ───────────────────────────────────────────────────────────────── */
.crumbs{display:flex;align-items:center;gap:8px;height:36px;padding:0 20px;color:var(--fg-dim);font-size:12px;border-bottom:1px solid var(--border-soft);}
.crumbs b{color:var(--fg);font-weight:500;}
.content{padding:20px 24px 40px;}
.vtitle{font-size:20px;font-weight:600;color:var(--fg2);display:flex;align-items:center;gap:12px;margin-bottom:2px;}
.vsub{font:11px var(--mono);color:var(--fg-faint);margin-bottom:18px;}
.empty{color:var(--fg-faint);font:12px var(--mono);padding:22px 4px;}

/* ── KPI cards ─────────────────────────────────────────────────────────────── */
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px;}
.kpi{background:var(--surf0);border:1px solid var(--border);border-radius:8px;padding:10px 15px;min-width:118px;}
.kpi .k{display:block;font:500 9.5px var(--mono);letter-spacing:.6px;color:var(--fg-faint);margin-bottom:4px;text-transform:uppercase;}
.kpi .v{display:flex;align-items:center;gap:7px;font:700 16px var(--mono);color:var(--fg2);}
.gn{color:var(--green)!important;} .yl{color:var(--yellow)!important;} .rd{color:var(--red)!important;}

/* ── chips / badges ────────────────────────────────────────────────────────── */
.cap-chip{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 9px;border-radius:9px;font:600 9.5px var(--mono);background:var(--chip);color:var(--tx2);border:1px solid var(--border2);margin-right:5px;}
.cap-chip .cd{width:5px;height:5px;border-radius:50%;background:var(--acc-teal);}
.impl-badge{display:inline-flex;align-items:center;gap:6px;height:21px;padding:0 10px;border-radius:6px;font:600 10.5px var(--mono);background:rgba(155,140,255,.10);color:var(--acc-lavender);border:1px solid rgba(155,140,255,.3);}

/* ── key/value grid ────────────────────────────────────────────────────────── */
.section-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-weight:700;margin:18px 0 8px;}
.kv-grid{border:1px solid var(--border);border-radius:9px;overflow:hidden;max-width:560px;}
.kv-row{display:flex;border-top:1px solid var(--border-soft);}
.kv-row:first-child{border-top:none;}
.kv-row .kk{flex:0 0 42%;padding:7px 13px;font:11px var(--mono);color:var(--acc-lavender);background:var(--surf0);border-right:1px solid var(--border-soft);}
.kv-row .kv{flex:1;padding:7px 13px;font:11px var(--mono);color:var(--tx2);}

/* ── data tables ───────────────────────────────────────────────────────────── */
.bt{width:100%;border-collapse:collapse;font:11px var(--mono);}
.bt th{text-align:left;font-size:8px;letter-spacing:.9px;text-transform:uppercase;color:var(--fg-faint);padding:6px 11px;border-bottom:1px solid var(--border2);font-weight:600;background:var(--surf0);white-space:nowrap;position:sticky;top:0;}
.bt td{padding:5px 11px;border-bottom:1px solid var(--border-soft);color:var(--fg-dim);white-space:nowrap;}
.bt tr:hover td{background:var(--hover);}
.bt .nm{color:var(--fg2);font-weight:600;}
.bt .sym{color:var(--acc-gold);font-weight:600;}
.bt .r{text-align:right;}
.dot2{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:5px;}
.dot2.off{background:var(--gray);} .dot2.yl{background:var(--yellow);}
.buy{color:var(--soft-green);} .sell{color:#e79aa0;}

/* ── publish feed ──────────────────────────────────────────────────────────── */
.feed{border:1px solid var(--border);border-radius:9px;overflow:hidden;}
.feed-row{display:flex;gap:12px;align-items:baseline;padding:5px 13px;border-top:1px solid var(--border-soft);font:11px var(--mono);}
.feed-row:first-child{border-top:none;}
.feed-row .ts{color:var(--fg-faint);flex:0 0 92px;}
.feed-row .kind{color:var(--acc-lavender);flex:0 0 130px;}
.feed-row .sum{color:var(--tx2);overflow:hidden;text-overflow:ellipsis;}