/* Vybe CRM — self-contained tokens (shadcn neutral) + components, dark-first. */
:root{
  --background:0 0% 100%; --foreground:0 0% 3.9%; --card:0 0% 100%; --muted:0 0% 96.1%;
  --muted-foreground:0 0% 45.1%; --accent:0 0% 96.1%; --border:0 0% 89.8%; --input:0 0% 89.8%;
  --primary:0 0% 9%; --primary-foreground:0 0% 98%; --secondary:0 0% 96.1%; --ring:0 0% 3.9%; --popover:0 0% 100%;
  --radius:8px; --radius-md:6px;
  --bid-blue:#4B9BFF; --buy:#2563eb; --buy-hover:#1d4ed8;
  --price-up:#60a5fa; --price-down:#f87171;
  --status-ok:#22c55e; --status-warn:#eab308; --status-err:#ef4444; --orange-500:#FF6B35;
  --font-sans:Inter,Roboto,ui-sans-serif,system-ui,sans-serif;
  --font-mono:Roboto,ui-monospace,"SF Mono",Menlo,monospace;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  color-scheme:light;
}
.dark{
  --background:0 0% 3.9%; --foreground:0 0% 98%; --card:0 0% 3.9%; --muted:0 0% 14.9%;
  --muted-foreground:0 0% 63.9%; --accent:0 0% 14.9%; --border:0 0% 14.9%; --input:0 0% 14.9%;
  --primary:0 0% 98%; --primary-foreground:0 0% 9%; --secondary:0 0% 14.9%; --ring:0 0% 83.1%; --popover:0 0% 3.9%;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-sans);background:hsl(var(--background));color:hsl(var(--foreground));font-size:13px;overflow:hidden}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:hsl(var(--muted-foreground))}.up{color:var(--price-up)}.link{color:var(--bid-blue)}
.ico{width:16px;height:16px;flex:none}.ico.big{width:34px;height:34px;color:var(--bid-blue);margin:0 auto}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:6px;border:3px solid hsl(var(--background))}

/* shell */
.app{display:flex;height:100vh;min-height:0}
.side{width:236px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;border-right:1px solid hsl(var(--border));background:hsl(var(--card));transition:width .18s}
body.crm-collapsed .side{width:52px}
.side .shd{display:flex;align-items:center;gap:9px;height:52px;padding:0 12px;flex-shrink:0;border-bottom:1px solid hsl(var(--border))}
.side .shd .vmark{width:22px;height:22px;color:hsl(var(--foreground));flex:none}
.side .shd .info{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.side .shd .info b{font-size:13px;font-weight:600}.side .shd .info span{font-size:11px;color:hsl(var(--muted-foreground))}
body.crm-collapsed .side .shd .info{display:none}
.side .scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px}
.grp{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:hsl(var(--muted-foreground));font-family:var(--font-mono);padding:12px 8px 5px}
body.crm-collapsed .grp{opacity:0;height:12px;padding:6px 0 0}
.navg{display:flex;flex-direction:column;gap:1px}
a.nav{display:flex;align-items:center;gap:10px;height:32px;padding:0 9px;border-radius:var(--radius-md);color:hsl(var(--muted-foreground));font-size:13px;font-weight:500;white-space:nowrap;position:relative}
a.nav:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
a.nav.active{background:hsl(var(--accent));color:hsl(var(--foreground));font-weight:600}
a.nav.active::before{content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:2px;border-radius:2px;background:hsl(var(--primary))}
body.crm-collapsed a.nav .lbl{display:none}
body.crm-collapsed a.nav{justify-content:center;padding:0}
.side .sft{flex-shrink:0;border-top:1px solid hsl(var(--border));padding:8px}
.userbtn-form{margin:0}
.userbtn{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:var(--radius-md)}
.userbtn:hover{background:hsl(var(--accent))}
.userbtn .av{width:26px;height:26px;border-radius:999px;background:hsl(var(--muted));display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.userbtn .u{flex:1;min-width:0;line-height:1.2}.userbtn .u b{font-size:12.5px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis}.userbtn .u span{font-size:11px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;display:block}
body.crm-collapsed .userbtn .u{display:none}

.inset{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.top{display:flex;align-items:center;gap:8px;height:37px;flex-shrink:0;padding:0 10px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--background))}
.iconbtn{height:26px;width:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:hsl(var(--muted-foreground));cursor:pointer;border:0;background:transparent}
.iconbtn:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.vsep{width:1px;height:14px;background:hsl(var(--border))}
.crumb{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font-size:12px;font-family:var(--font-mono);color:hsl(var(--muted-foreground));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crumb a{color:hsl(var(--muted-foreground));text-decoration:none}
.crumb a:hover{color:hsl(var(--foreground))}
.crumb .sep{color:hsl(var(--border));font-size:11px}
.crumb .cur{color:hsl(var(--foreground));font-weight:500;overflow:hidden;text-overflow:ellipsis}
/* detail sub-page tab strip */
.tabstrip{display:flex;align-items:center;gap:2px;margin-bottom:14px;border-bottom:1px solid hsl(var(--border))}
.tabstrip .tab{position:relative;padding:8px 13px;font-family:var(--font-mono);font-size:11.5px;color:hsl(var(--muted-foreground));cursor:pointer;background:transparent;border:0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.tabstrip .tab:hover{color:hsl(var(--foreground))}
.tabstrip .tab.on{color:hsl(var(--foreground));border-bottom-color:var(--bid-blue,#4B9BFF)}
.tabstrip .tab .cnt{font-size:9.5px;background:hsl(var(--muted));border-radius:8px;padding:0 6px;color:hsl(var(--muted-foreground))}
.tabstrip .tab.on .cnt{color:var(--bid-blue,#4B9BFF)}
.env{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--font-mono);border:1px solid hsl(var(--input));border-radius:var(--radius-md);height:22px;padding:0 8px;color:hsl(var(--muted-foreground))}
.env .dot,.dot{width:7px;height:7px;border-radius:50%;background:var(--status-ok);display:inline-block}
.termbtn{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-md);background:var(--buy);color:#fff;font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.termbtn:hover{background:var(--buy-hover);text-decoration:none}
.termbtn svg{width:13px;height:13px}
@media(max-width:640px){.termbtn .lbl{display:none}.termbtn{padding:0 7px}}
.body,.pagepad{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 60px}
.body{max-width:100%}

/* page bits */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;max-width:1100px}
.ph h1{font-size:22px;font-weight:700;letter-spacing:-.3px;margin:0}.ph p{font-size:12.5px;color:hsl(var(--muted-foreground));margin:3px 0 0}
.phact{display:flex;gap:8px;flex-wrap:wrap}
.grid{display:grid;gap:14px;max-width:1100px}.g2{grid-template-columns:1fr 1fr}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
.kpi{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));padding:12px 14px}
.kpi .l{font-size:11px;color:hsl(var(--muted-foreground));display:flex;align-items:center;gap:6px}.kpi .l .ico{width:13px;height:13px}
.kpi .v{font-size:24px;font-weight:300;font-family:var(--font-mono);letter-spacing:-.03em;margin-top:9px}
.kpi .d{font-size:11px;margin-top:5px;font-family:var(--font-mono);display:flex;align-items:center;gap:5px}.kpi .d .ico{width:12px;height:12px}
.card{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));max-width:1100px}
.card .ch{padding:13px 15px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card .ct{font-size:14px;font-weight:600}.card .cd{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:2px}
.card .cc{padding:14px 15px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12.5px}.kv .k{color:hsl(var(--muted-foreground))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;border-radius:var(--radius-md);font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer;height:32px;padding:0 12px}
.btn .ico{width:14px;height:14px}
.btn-default{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-outline{border-color:hsl(var(--input));background:transparent;color:hsl(var(--foreground))}.btn-outline:hover{background:hsl(var(--accent))}
.btn-ghost{background:transparent;color:hsl(var(--foreground))}.btn-ghost:hover{background:hsl(var(--accent))}
.btn-blue{background:var(--buy);color:#fff}.btn-blue:hover{background:var(--buy-hover)}
.btn-xs{height:26px;padding:0 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}

.badge{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;border-radius:var(--radius-md);padding:1px 8px;font-size:11px;font-weight:600;margin-right:4px}
.b-ok{color:var(--status-ok);background:color-mix(in srgb,var(--status-ok) 14%,transparent);border-color:color-mix(in srgb,var(--status-ok) 32%,transparent)}
.b-warn{color:var(--status-warn);background:color-mix(in srgb,var(--status-warn) 14%,transparent);border-color:color-mix(in srgb,var(--status-warn) 32%,transparent)}
.b-err{color:var(--status-err);background:color-mix(in srgb,var(--status-err) 14%,transparent);border-color:color-mix(in srgb,var(--status-err) 32%,transparent)}
.b-blue{color:var(--bid-blue);background:color-mix(in srgb,var(--bid-blue) 14%,transparent);border-color:color-mix(in srgb,var(--bid-blue) 32%,transparent)}
.b-violet{color:#c4b5fd;background:color-mix(in srgb,#8b5cf6 16%,transparent);border-color:color-mix(in srgb,#8b5cf6 34%,transparent)}
.b-out{border-color:hsl(var(--border));color:hsl(var(--muted-foreground))}

.input{display:flex;height:32px;width:100%;border-radius:var(--radius-md);border:1px solid hsl(var(--input));background:transparent;padding:0 11px;font-size:13px;color:hsl(var(--foreground));align-items:center;outline:none}
.input:focus{box-shadow:0 0 0 1px hsl(var(--ring))}
select.input{padding:0 6px}
label.lbl{font-size:12px;font-weight:500;margin-bottom:6px;display:block}

.tblwrap{border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:auto;background:hsl(var(--card));max-width:1100px}
table.tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums}
table.tbl th{height:30px;padding:0 10px;text-align:left;font-weight:500;color:hsl(var(--muted-foreground));font-size:11px;border-bottom:1px solid hsl(var(--border));white-space:nowrap}
table.tbl th.r,table.tbl td.r{text-align:right}
table.tbl td{height:32px;padding:3px 10px;border-bottom:1px solid color-mix(in srgb,hsl(var(--border)) 45%,transparent)}
table.tbl tr:hover td{background:hsl(var(--accent))}
table.tbl td.sym{font-family:var(--font-sans);font-weight:600}
.av.sm{width:24px;height:24px;border-radius:999px;background:hsl(var(--muted));display:grid;place-items:center;font-size:10px;font-weight:600}
.progress{height:8px;border-radius:999px;background:color-mix(in srgb,hsl(var(--primary)) 20%,transparent);overflow:hidden}
.progress i{display:block;height:100%;background:var(--bid-blue)}
.progress.warn i{background:var(--orange-500)}

/* ---- right-click context menu (design-system .pop pattern) ---- */
.ctxmenu{position:fixed;z-index:60;min-width:210px;background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:var(--radius-md);box-shadow:0 10px 30px -8px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4);padding:4px;font-size:13px;animation:ctxin .1s ease-out}
@keyframes ctxin{from{opacity:0;transform:scale(.97) translateY(-2px)}to{opacity:1;transform:none}}
.ctxmenu .ctxlbl{padding:5px 9px 4px;font-size:11px;font-weight:600;color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxmenu .ctxsep{height:1px;background:hsl(var(--border));margin:4px 0}
.ctxmi{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:4px;cursor:pointer;color:hsl(var(--foreground));line-height:1.2}
.ctxmi:hover{background:hsl(var(--accent))}
.ctxmi .ico{width:14px;height:14px;flex:none;color:var(--bid-blue)}

.callout{border:1px solid hsl(var(--border));border-left:2px solid var(--bid-blue);background:color-mix(in srgb,var(--bid-blue) 5%,transparent);border-radius:var(--radius-md);padding:12px 14px;font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.6;max-width:1100px}
.callout b{color:hsl(var(--foreground))}
.alert{display:flex;gap:10px;border:1px solid hsl(var(--border));border-radius:var(--radius);padding:11px 13px;font-size:12.5px}
.alert .ico{width:16px;height:16px;margin-top:1px}
.alert.warn{border-color:color-mix(in srgb,var(--orange-500) 45%,transparent);color:var(--orange-500)}
.alert .t{font-weight:600}.alert .d{color:hsl(var(--muted-foreground))}

/* modal dialog (centered card over dimmed overlay) */
.modal-ovl{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:22px;animation:ovlin .12s ease-out}
@keyframes ovlin{from{opacity:0}to{opacity:1}}
.modal{width:520px;max-width:100%;max-height:90vh;overflow:auto;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:0 24px 64px -12px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.5);animation:modalin .14s ease-out}
@keyframes modalin{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:15px 17px;border-bottom:1px solid hsl(var(--border))}
.modal .mh .mt{font-size:15px;font-weight:600}.modal .mh .md{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:2px}
.modal .mb{padding:16px 17px}
.modal .mf{display:flex;justify-content:flex-end;gap:9px;padding:13px 17px;border-top:1px solid hsl(var(--border))}
/* chip selector (starting balance) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-sel{height:28px;padding:0 11px;border-radius:999px;border:1px solid hsl(var(--input));background:transparent;color:hsl(var(--muted-foreground));font-size:12px;font-family:var(--font-mono);cursor:pointer;display:inline-flex;align-items:center}
.chip-sel:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.chip-sel.on{border-color:var(--bid-blue);color:var(--bid-blue);background:color-mix(in srgb,var(--bid-blue) 12%,transparent);font-weight:600}
/* small square icon action button for table rows */
.rowbtn{height:26px;width:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:hsl(var(--muted-foreground));cursor:pointer;border:1px solid hsl(var(--input));background:transparent}
.rowbtn:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.rowbtn .ico{width:14px;height:14px}
.rowbtn.danger:hover{color:var(--status-err);border-color:color-mix(in srgb,var(--status-err) 45%,transparent)}

/* click-to-copy credential value */
.copyable{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border-radius:6px;padding:1px 6px;margin:-1px -6px;transition:background .12s}
.copyable:hover{background:hsl(var(--accent))}
.copyable.copied{background:color-mix(in srgb,var(--status-ok) 12%,transparent)}
.copyable .cp{font-size:10px;color:hsl(var(--muted-foreground));opacity:0;transition:opacity .12s}
.copyable:hover .cp{opacity:1}
.copyable.copied .cp{opacity:1;color:var(--status-ok)}

/* auth */
.authwrap{display:grid;place-items:center;min-height:100vh;padding:22px;background:radial-gradient(520px 260px at 50% -10%,color-mix(in srgb,var(--bid-blue) 10%,transparent),transparent 70%),hsl(var(--background))}
.authcard{width:360px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));box-shadow:var(--shadow-md);padding:26px 24px}
.authcard .mk{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:16px}
.authcard .mk .vmark{width:40px;height:40px;color:hsl(var(--foreground))}.authcard .mk b{font-size:16px;font-weight:500}
.authcard h4{text-align:center;font-size:17px;font-weight:600;margin:0}
.authcard .s{text-align:center;font-size:12.5px;color:hsl(var(--muted-foreground));margin:5px 0 18px}
.fine{font-size:11px;color:hsl(var(--muted-foreground));text-align:center;margin-top:13px;line-height:1.6}.fine a{color:var(--bid-blue)}

/* connections map + chart */
.worldwrap{position:relative;border:1px solid hsl(var(--border));border-radius:var(--radius-md);overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--bid-blue) 6%,transparent),transparent 60%),hsl(var(--card))}
.worldwrap svg{width:100%;height:auto;display:block}
.worldwrap .land{color:hsl(var(--muted-foreground))}
.mk-city .glow{animation:glowp 2.6s ease-in-out infinite}
@keyframes glowp{50%{opacity:.4}}
.conchart{position:relative;height:140px;border:1px solid hsl(var(--border));border-radius:var(--radius-md);overflow:hidden;background:hsl(var(--card))}
.conchart svg{width:100%;height:100%}
.conaxis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));margin-top:4px}
@media(max-width:1000px){.grid[style*="1.55fr"]{grid-template-columns:1fr !important}}

/* ── Telemetry fleet board (proposal 02) — service tiles in the Aspire idiom ── */
/* ── Telemetry fleet board ─────────────────────────────────────────────── */
.tele-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground));margin-bottom:14px;max-width:1160px}
.tele-meta .sweep{display:inline-flex;align-items:center;gap:7px}
.tele-meta .sweep .pulse{width:6px;height:6px;border-radius:50%;background:var(--status-ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--status-ok) 70%,transparent);animation:tele-ping 2s ease-out infinite}
@keyframes tele-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--status-ok) 55%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* KPI stat strip */
.tele-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;max-width:1160px}
@media(max-width:720px){.tele-stats{grid-template-columns:1fr 1fr}}
.tstat{position:relative;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));padding:13px 15px;overflow:hidden}
.tstat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:hsl(var(--border))}
.tstat.ok::before{background:var(--status-ok)}.tstat.warn::before{background:var(--status-warn)}.tstat.err::before{background:var(--status-err)}
.tstat .n{font-family:var(--font-mono);font-size:26px;font-weight:600;line-height:1;color:hsl(var(--foreground))}
.tstat.ok .n{color:var(--status-ok)}.tstat.warn.hit .n{color:var(--status-warn)}.tstat.err.hit .n{color:var(--status-err)}
.tstat .l{margin-top:6px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:hsl(var(--muted-foreground))}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1160px}
@media(max-width:960px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));padding:13px 14px 12px;transition:border-color .15s,box-shadow .15s,transform .15s}
.svc:hover{transform:translateY(-1px);box-shadow:0 6px 20px -10px rgba(0,0,0,.5)}
.svc.up:hover{border-color:color-mix(in srgb,var(--status-ok) 45%,hsl(var(--border)))}
.svc.warn{border-color:color-mix(in srgb,var(--status-warn) 40%,hsl(var(--border)))}
.svc.down{border-color:color-mix(in srgb,var(--status-err) 45%,hsl(var(--border)))}
.svc.down::after{content:"";position:absolute;inset:0;border-radius:var(--radius);background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--status-err) 7%,transparent),transparent 70%);pointer-events:none}
.svc-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.svc-top .hb{position:relative;width:8px;height:8px;border-radius:50%;flex:none}
.svc-top .hb.ok{background:var(--status-ok)}.svc-top .hb.warn{background:var(--status-warn)}.svc-top .hb.err{background:var(--status-err)}
.svc-top .hb.ok::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--status-ok) 60%,transparent);animation:tele-ping 2.4s ease-out infinite}
.svc-top .name{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:hsl(var(--foreground))}
.svc-top .kindchip{font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border));border-radius:5px;padding:1px 5px}
.svc-top .spill{margin-left:auto}
.svc-ep{font-family:var(--font-mono);font-size:11px;color:hsl(var(--foreground));background:color-mix(in srgb,hsl(var(--muted)) 55%,transparent);border:1px solid color-mix(in srgb,hsl(var(--border)) 60%,transparent);border-radius:6px;padding:5px 8px;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-ep .port{color:hsl(var(--muted-foreground))}
.svc-lat{margin-bottom:9px}
.svc-lat .bar{height:4px;border-radius:3px;background:color-mix(in srgb,hsl(var(--muted)) 70%,transparent);overflow:hidden}
.svc-lat .bar>i{display:block;height:100%;border-radius:3px;background:var(--status-ok);transition:width .4s}
.svc-lat.warn .bar>i{background:var(--status-warn)}
.svc-lat .cap{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));margin-top:5px}
.svc-lat .cap b{color:hsl(var(--foreground));font-weight:600}
.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));border-top:1px solid color-mix(in srgb,hsl(var(--border)) 55%,transparent);padding-top:8px}
.svc-foot .note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-foot .note.err{color:var(--status-err)}
.spill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:9px;padding:2px 8px;border:1px solid transparent}
.spill.ok{color:var(--status-ok);border-color:color-mix(in srgb,var(--status-ok) 32%,transparent);background:color-mix(in srgb,var(--status-ok) 8%,transparent)}
.spill.warn{color:var(--status-warn);border-color:color-mix(in srgb,var(--status-warn) 32%,transparent);background:color-mix(in srgb,var(--status-warn) 8%,transparent)}
.spill.err{color:var(--status-err);border-color:color-mix(in srgb,var(--status-err) 32%,transparent);background:color-mix(in srgb,var(--status-err) 8%,transparent)}
.dot.ok{background:var(--status-ok)}
.dot.warn{background:var(--status-warn)}
.dot.err{background:var(--status-err)}

/* ── Downloads page — desktop bundle tiles (composes existing tokens only) ── */
.dlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1100px;margin-bottom:16px}
@media(max-width:820px){.dlgrid{grid-template-columns:1fr}}
.dl{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.dl.soon{opacity:.62}
.dl .os{display:flex;align-items:center;gap:9px}
.dl .glyph{width:30px;height:30px;border-radius:8px;background:hsl(var(--accent));border:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}
.dl .os .t{font-size:13px;font-weight:600;line-height:1.2}
.dl .os .t small{display:block;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));font-weight:400;margin-top:2px}
.dl .meta{display:flex;flex-direction:column;gap:3px;font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--muted-foreground))}
.dl .meta b{color:hsl(var(--foreground));font-weight:500}
.dl .buy{width:100%;height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:none;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:11px;font-weight:500;color:#fff;cursor:pointer;background:var(--buy);text-decoration:none}
.dl .buy:hover{background:var(--buy-hover);text-decoration:none}
.dl .buy:disabled{opacity:.5;cursor:default;background:hsl(var(--accent));color:hsl(var(--muted-foreground))}
.tblwrap{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));overflow:hidden;max-width:1100px}
.tblwrap table.tbl th{padding:7px 12px;height:auto}
.tblwrap table.tbl td{padding:7px 12px;height:auto}

/* ── Feature Proposals kanban (composes existing CRM tokens only) ── */
.kantoolbar{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground));margin-bottom:12px;flex-wrap:wrap}
.kantoolbar b{color:hsl(var(--foreground));font-weight:600}
.kantoolbar .sp{flex:1}
.quota{display:inline-flex;align-items:center;gap:6px;border:1px solid hsl(var(--border));border-radius:999px;padding:2px 10px;color:hsl(var(--muted-foreground))}
.quota b{color:hsl(var(--foreground))}
.quota.full{color:var(--status-err);border-color:color-mix(in srgb,var(--status-err) 40%,transparent)}
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media(max-width:1200px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kcol{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));display:flex;flex-direction:column;min-height:340px}
.kcol.dragover{border-color:var(--bid-blue);background:color-mix(in srgb,var(--bid-blue) 6%,transparent)}
.kcol-h{display:flex;align-items:center;gap:6px;padding:9px 10px;border-bottom:1px solid hsl(var(--border));font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.kcol-h .cnt{margin-left:auto;color:hsl(var(--foreground));background:hsl(var(--muted));border-radius:999px;padding:0 7px;font-size:9.5px}
.kcol-b{padding:7px;display:flex;flex-direction:column;gap:7px;flex:1}
.fcard{border:1px solid hsl(var(--border));border-radius:var(--radius-md);background:hsl(var(--background));padding:9px;cursor:pointer}
.fcard:hover{border-color:color-mix(in srgb,hsl(var(--foreground)) 30%,transparent);background:hsl(var(--accent))}
.fcard[draggable=true]{cursor:grab}
.fcard .t{color:hsl(var(--foreground));font-size:11.5px;font-weight:600;line-height:1.35;margin-bottom:6px}
.fcard .m{display:flex;align-items:center;gap:6px}
.ftag{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:1px 7px;border:1px solid}
.ftag.feat{color:var(--bid-blue);background:color-mix(in srgb,var(--bid-blue) 12%,transparent);border-color:color-mix(in srgb,var(--bid-blue) 34%,transparent)}
.ftag.bug{color:var(--status-err);background:color-mix(in srgb,var(--status-err) 12%,transparent);border-color:color-mix(in srgb,var(--status-err) 34%,transparent)}
.fby{font-family:var(--font-mono);font-size:9px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vote{margin-left:auto;display:inline-flex;align-items:center;gap:3px;flex:none}
.vbtn{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid hsl(var(--input));border-radius:var(--radius-md);background:hsl(var(--card));color:hsl(var(--muted-foreground));font-size:9px;cursor:pointer;line-height:1;padding:0}
.vbtn:hover{border-color:hsl(var(--foreground));color:hsl(var(--foreground))}
.vbtn.up.on{color:var(--price-up);border-color:color-mix(in srgb,var(--price-up) 50%,transparent)}
.vbtn.dn.on{color:var(--price-down);border-color:color-mix(in srgb,var(--price-down) 50%,transparent)}
.vcount{font-family:var(--font-mono);font-size:10px;color:hsl(var(--foreground));min-width:18px;text-align:center;font-variant-numeric:tabular-nums}

/* overlay + big split dialog */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal{width:460px;max-width:94%;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
.modal.big{width:860px}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid hsl(var(--border));font-size:14px;font-weight:600}
.modal-h .hl{display:flex;align-items:center;gap:9px;min-width:0}
.modal-h .hr{display:flex;align-items:center;gap:9px;flex:none}
.modal-b{padding:14px 16px;overflow-y:auto}
.modal-f{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid hsl(var(--border))}
.modal-f .sp{flex:1;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground))}
.dlg-split{display:grid;grid-template-columns:1fr 1fr;min-height:300px;overflow-y:auto}
@media(max-width:760px){.dlg-split{grid-template-columns:1fr}}
.dlg-split > div{padding:14px 16px;min-width:0}
.dlg-split .editor{border-right:1px solid hsl(var(--border))}
@media(max-width:760px){.dlg-split .editor{border-right:0;border-bottom:1px solid hsl(var(--border))}}
.dlg-lab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:8px;display:flex;align-items:center;gap:7px}
.dlg-lab .sp{flex:1}
.mdta{width:100%;min-height:240px;background:transparent;border:1px solid hsl(var(--input));color:hsl(var(--foreground));border-radius:var(--radius-md);padding:10px;font-size:11.5px;font-family:var(--font-mono);line-height:1.55;outline:none;resize:vertical}
.mdta:focus{box-shadow:0 0 0 1px hsl(var(--ring))}
.md{font-size:12.5px;color:hsl(var(--foreground));line-height:1.6;word-break:break-word}
.md h1,.md h2,.md h3{font-size:13px;color:hsl(var(--foreground));margin:8px 0 5px}
.md h4,.md h5{font-size:11.5px;color:hsl(var(--foreground));margin:9px 0 4px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
.md p{margin:6px 0;color:hsl(var(--muted-foreground))}
.md ul,.md ol{margin:6px 0 6px 18px;color:hsl(var(--muted-foreground));font-size:12px}
.md code{font-family:var(--font-mono);font-size:10.5px;background:hsl(var(--muted));border-radius:4px;padding:1px 5px}
.md pre{background:hsl(var(--muted));border-radius:var(--radius-md);padding:10px;overflow:auto;margin:8px 0}
.md pre code{background:transparent;padding:0}
.md blockquote{border-left:2px solid hsl(var(--border));padding-left:10px;color:hsl(var(--muted-foreground));margin:8px 0}
.md a{color:var(--bid-blue)}
.md.empty{color:hsl(var(--muted-foreground));font-style:italic}

/* ── Plans page (proposal 35): pricing grid, billing toggle, usage meter ── */
/* billing-cycle segmented toggle in the page header */
.cyc{display:inline-flex;align-items:center;gap:2px;background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:8px;padding:2px}
.cyc button{height:24px;padding:0 12px;border:none;background:transparent;color:hsl(var(--muted-foreground));font-family:var(--font-mono);font-size:11px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cyc button.on{background:hsl(var(--accent));color:hsl(var(--foreground))}
.cyc .save{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.4px;color:var(--status-ok);border:1px solid color-mix(in srgb,var(--status-ok) 40%,transparent);background:color-mix(in srgb,var(--status-ok) 8%,transparent);border-radius:7px;padding:0 5px;height:14px;display:inline-flex;align-items:center}
/* current-plan usage meter */
.usage{border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card));padding:11px 13px;margin-bottom:14px;max-width:1100px}
.usage .row{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px}
.usage .row .k{color:hsl(var(--muted-foreground))}.usage .row .v{color:hsl(var(--foreground))}
.usage .row .sp{flex:1}
.usage .meter{height:7px;border-radius:6px;background:hsl(var(--muted));overflow:hidden;border:1px solid hsl(var(--border));margin-top:9px}
.usage .meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--bid-blue),var(--orange-500))}
.usage .sub{font-family:var(--font-mono);font-size:9.5px;color:hsl(var(--muted-foreground));margin-top:6px}
/* pricing grid */
.plans{display:grid;grid-template-columns:1fr 1.06fr 1fr;gap:12px;align-items:stretch;max-width:1100px}
.plan{position:relative;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));padding:16px 16px 18px;display:flex;flex-direction:column}
.plan.pop{border-color:color-mix(in srgb,var(--bid-blue) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--bid-blue) 40%,transparent),0 12px 34px color-mix(in srgb,var(--bid-blue) 10%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--bid-blue) 5%,transparent),transparent 120px)}
.plan .toprow{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.plan .nm{font-size:12.5px;font-weight:600;color:hsl(var(--foreground))}
.plan .nm.mut{color:hsl(var(--muted-foreground))}
.plan .cur-tag{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--status-ok);border:1px solid color-mix(in srgb,var(--status-ok) 40%,transparent);background:color-mix(in srgb,var(--status-ok) 8%,transparent);border-radius:8px;padding:1px 7px}
.plan .tag{color:hsl(var(--muted-foreground));font-size:11px;min-height:16px;margin-bottom:12px}
.plan .price{display:flex;align-items:baseline;gap:2px}
.plan .price .amt{font-size:30px;font-weight:300;font-family:var(--font-mono);letter-spacing:-.03em;color:hsl(var(--foreground))}
.plan .price .per{font-size:11px;color:hsl(var(--muted-foreground))}
.plan .price .strike{font-family:var(--font-mono);font-size:12px;color:hsl(var(--muted-foreground));text-decoration:line-through;margin-left:6px}
.plan .yr{font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));margin-top:3px;min-height:13px}
.plan .toks{display:flex;align-items:center;gap:7px;margin:13px 0 4px;padding:8px 10px;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--muted))}
.plan .toks .big{font-family:var(--font-mono);font-size:15px;font-weight:500;color:hsl(var(--foreground))}
.plan .toks .u{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.plan ul.fx{list-style:none;display:flex;flex-direction:column;gap:7px;margin:12px 0 16px;padding:0}
.plan ul.fx li{position:relative;padding-left:19px;font-size:11.5px;color:hsl(var(--muted-foreground));line-height:1.35}
.plan ul.fx li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--bid-blue);font-family:var(--font-mono);font-size:11px}
.plan ul.fx li.off{color:hsl(var(--muted-foreground));opacity:.6}
.plan ul.fx li.off::before{content:"–";color:hsl(var(--muted-foreground))}
.plan ul.fx li b{color:hsl(var(--foreground));font-weight:600}
.pbtn{width:100%;height:32px;border-radius:8px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;cursor:pointer;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px}
.pbtn:hover:not(:disabled){border-color:var(--bid-blue)}
.pbtn.blue{background:var(--buy);border:none;color:#fff}
.pbtn.blue:hover:not(:disabled){background:var(--buy-hover)}
.pbtn.cur{color:hsl(var(--muted-foreground));cursor:default;border-color:hsl(var(--border));background:transparent}
.pbtn.down{color:hsl(var(--muted-foreground))}
.pbtn.down:hover:not(:disabled){border-color:var(--sell);color:var(--sell)}
.pbtn:disabled{opacity:.6;cursor:not-allowed}
.plan .sched-tag{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--status-warn);border:1px solid color-mix(in srgb,var(--status-warn) 40%,transparent);background:color-mix(in srgb,var(--status-warn) 8%,transparent);border-radius:8px;padding:1px 7px}
/* pending-change banner */
.pend{margin:0 0 14px;border:1px solid color-mix(in srgb,var(--status-warn) 40%,transparent);background:color-mix(in srgb,var(--status-warn) 6%,transparent);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:12px;max-width:1100px}
.pend.canc{border-color:color-mix(in srgb,var(--sell) 40%,transparent);background:color-mix(in srgb,var(--sell) 6%,transparent)}
.pend .ic{font-family:var(--font-mono);font-size:14px;color:var(--status-warn)}
.pend.canc .ic{color:var(--sell)}
.pend .txt{font-size:12px;color:hsl(var(--foreground))}
.pend .txt b{color:hsl(var(--foreground));font-weight:600}
.pend .txt .sub2{font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));margin-top:2px}
.pend .sp{flex:1}
.cancel-link{font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground));cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:8px 0 0;display:inline-block}
.cancel-link:hover{color:var(--sell)}
.trust{display:flex;align-items:center;gap:16px;padding:12px 0 0;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));max-width:1100px}
.trust span{display:inline-flex;align-items:center;gap:5px}
@media(max-width:820px){.plans{grid-template-columns:1fr}}