/* Kalshi Pro Canvas tokens (docs/plans/2026-08-22-kalshi-pro-canvas-inspection.md §1) */
:root{--bg-app:#0e1116;--bg-panel:#151922;--bg-panel2:#1b2029;--bg-hover:#222835;--stroke:rgba(255,255,255,.08);--stroke2:rgba(255,255,255,.14);
 --text:rgba(255,255,255,.92);--dim:rgba(255,255,255,.55);--faint:rgba(255,255,255,.32);--yes:#00aa70;--no:#ff4d6a;--accent:#28cc95;--warn:#f5a623;
 --kalshi:#4da3ff;--novig:#c084fc;--radius:10px;--gap:14px;--font:"Kalshi Sans Web",Inter,system-ui,-apple-system,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg-app);color:var(--text);font-family:var(--font);font-size:13px;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
.dim{color:var(--dim)}.faint{color:var(--faint)}.spacer{flex:1}
.btn{background:var(--bg-panel2);border:1px solid var(--stroke2);border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--bg-hover)}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover{background:var(--bg-hover)}
.btn-primary{background:var(--accent);color:#003221;font-weight:600;border:0;border-radius:100px}
.btn:disabled,button:disabled{opacity:.4;cursor:not-allowed}
.sel,.inp{background:var(--bg-panel2);border:1px solid var(--stroke2);border-radius:8px;padding:6px 8px;color:inherit}
.inp{min-width:180px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.2px;border:1px solid var(--stroke2);background:var(--bg-panel2)}
.chip-kalshi{color:var(--kalshi);border-color:rgba(77,163,255,.35)}.chip-novig{color:var(--novig);border-color:rgba(192,132,252,.35)}
.chip-acct{color:var(--dim);font-weight:500}
.chip-mode{color:var(--warn);border-color:rgba(245,166,35,.4)}.chip-mode.live{color:var(--no);border-color:rgba(255,77,106,.5)}
.side-yes{color:var(--yes);font-weight:600}.side-no{color:var(--no);font-weight:600}
.pos{color:var(--yes)}.neg{color:var(--no)}.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
/* topbar */
.topbar{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-bottom:1px solid var(--stroke);background:var(--bg-panel)}
.brand{font-weight:700;font-size:16px;letter-spacing:-.5px;display:flex;gap:6px;align-items:baseline}.brand b{color:var(--accent)}.brand span{font-size:12px;font-weight:400}
.pages{display:flex;gap:2px}.page{padding:6px 10px;border-radius:8px;color:var(--dim);cursor:pointer}.page.active{color:var(--text);background:var(--bg-panel2)}.page.disabled{opacity:.4;cursor:not-allowed}
.balances{display:flex;gap:8px}.bal{display:flex;flex-direction:column;align-items:flex-end;padding:2px 8px;border:1px solid var(--stroke);border-radius:8px;min-width:120px}
.bal .l{font-size:10px;color:var(--dim);display:flex;gap:4px;align-items:center}.bal .v{font-family:var(--mono);font-size:13px}
.health{display:flex;gap:3px}.health i{width:8px;height:8px;border-radius:50%;background:var(--faint);display:block}.health i.ok{background:var(--yes)}.health i.bad{background:var(--no)}.health i.stale{background:var(--warn)}
.user{color:var(--dim)}
/* workspace */
.workspace{display:flex;flex-direction:column;height:calc(100% - 48px)}
.canvas-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--stroke)}
.canvas-tabs{display:flex;gap:4px}.ctab{padding:5px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;color:var(--dim);display:flex;gap:6px;align-items:center}
.ctab.active{color:var(--text);background:var(--bg-panel2);border-color:var(--stroke2)}.ctab .x{opacity:0;font-size:11px}.ctab:hover .x{opacity:.7}
.addtile{position:relative}.menu{position:absolute;top:36px;left:0;z-index:20;background:var(--bg-panel);border:1px solid var(--stroke2);border-radius:var(--radius);padding:6px;min-width:190px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.menu.open{display:block}.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 10px;border-radius:6px;cursor:pointer}.menu button:hover{background:var(--bg-hover)}
.menu-h{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);padding:6px 10px 2px}
.tiles{display:flex;flex-wrap:wrap;gap:var(--gap);padding:var(--gap);overflow:auto;flex:1;align-content:flex-start}
.tiles.l2col .tile{flex:0 0 calc(50% - 7px)}.tiles.l3col .tile{flex:0 0 calc(33.333% - 10px)}
.tile{flex:0 0 min(50% - 7px,720px);min-width:360px;height:340px;background:var(--bg-panel);border:1px solid var(--stroke);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;position:relative}
.tile.w2{flex-basis:calc(100% - 0px)}.tile.h2{height:520px}.tile.dragover{outline:2px dashed var(--accent)}
.tile-h{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--stroke);cursor:grab;user-select:none}
.tile-h .t{font-weight:600}.tile-h .cnt{color:var(--faint);font-size:11px}
.tile-h .ic{background:none;border:0;color:var(--faint);cursor:pointer;padding:2px 5px;border-radius:5px}.tile-h .ic:hover{color:var(--text);background:var(--bg-hover)}
.tile-b{flex:1;overflow:auto}
.empty{padding:28px;text-align:center;color:var(--faint)}
/* blotter */
.blotter{border-top:1px solid var(--stroke);background:var(--bg-panel);height:42%;display:flex;flex-direction:column;min-height:38px}
.blotter.collapsed{height:38px}.blotter.collapsed .blotter-body{display:none}
.blotter-tabs{display:flex;align-items:center;gap:2px;padding:4px 10px;border-bottom:1px solid var(--stroke)}
.btab{background:none;border:0;border-radius:8px;padding:6px 10px;color:var(--dim);cursor:pointer}.btab.active{color:var(--text);background:var(--bg-panel2)}
.btab .cnt{color:var(--faint);font-size:11px;margin-left:3px}
.blotter-body{overflow:auto;flex:1}
/* tables */
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
.grid th{position:sticky;top:0;background:var(--bg-panel);color:var(--faint);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:6px 10px;border-bottom:1px solid var(--stroke);white-space:nowrap;cursor:pointer}
.grid th.num{text-align:right}.grid th.sorted::after{content:" ▾";color:var(--accent)}.grid th.sorted.asc::after{content:" ▴"}
.grid td{padding:5px 10px;border-bottom:1px solid var(--stroke);white-space:nowrap;vertical-align:middle}
.grid tr:hover td{background:var(--bg-hover)}
.mkt{display:flex;flex-direction:column;line-height:1.2}.mkt .t{font-weight:500;max-width:380px;overflow:hidden;text-overflow:ellipsis}.mkt .s{color:var(--dim);font-size:11px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint);margin-right:5px;vertical-align:middle}.live.on{background:var(--no);box-shadow:0 0 6px var(--no)}.live.off{background:var(--yes)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--bg-panel2);border:1px solid var(--stroke2);padding:8px 14px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}.toast.show{opacity:1}
/* login */
.login-body{display:flex;align-items:center;justify-content:center}
.login-box{background:var(--bg-panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:28px 30px;width:320px}
.login-box .brand{margin-bottom:18px;font-size:18px}.login-box label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin-bottom:6px}
.login-box input{width:100%;padding:10px 12px;border:1px solid var(--stroke2);background:var(--bg-panel2);border-radius:8px;margin-bottom:14px}
.login-box button{width:100%;padding:10px}.login-box .err{color:var(--no);font-size:12px;min-height:16px;margin-top:10px}