:root{
  --bg:#f7fbf8; --text:#0b1f14; --muted:#4d6b5a; --panel:#ffffff; --panel-2:#f0f6f2; --border:#d7e6dc;
  --accent:#1a7f4b; --accent2:#0b2c1f; --buy:#16a34a; --sell:#dc2626;
}
:root.theme-green{ --accent:#1a7f4b; --accent2:#0b2c1f; --bg:#f7fbf8; --panel:#ffffff; --panel-2:#f0f6f2; --text:#0b1f14; --muted:#4d6b5a; --border:#d7e6dc;}
:root.theme-greenNavy{ --accent:#1a7f4b; --accent2:#0a2540; --bg:#f6fbff; --panel:#ffffff; --panel-2:#eef3f9; --text:#0a1b2b; --muted:#4a5e73; --border:#d6e2ef;}
:root.theme-dark{ --accent:#16a34a; --accent2:#0a1f14; --bg:#0c0f14; --panel:#0f141b; --panel-2:#121922; --text:#e9f1f0; --muted:#9bb4a8; --border:#1f2a37; --buy:#22c55e; --sell:#ef4444;}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.header{padding:12px;border-bottom:1px solid var(--border);background:var(--panel)}
.brand{display:flex;gap:10px;align-items:center}
.brand h1{margin:0;font-size:22px;color:var(--accent)}
.brand p{margin:2px 0 0 0;color:var(--muted);font-size:13px}
.logo{width:44px;height:44px}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.tabs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tab{background:var(--panel-2);color:var(--muted);border:1px solid var(--border);border-bottom:none;padding:8px 12px;border-radius:12px 12px 0 0;cursor:pointer}
.tab[aria-selected="true"]{background:#e9f5ee;color:var(--text);font-weight:600}
.status{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}
button{border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer}
.primary{background:var(--accent);color:#fff;border-color:transparent}
.ghost{background:var(--panel-2)}
label{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}
select,input,textarea{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text)}
.main{max-width:1100px;margin:12px auto;padding:0 12px;display:grid;gap:12px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.subhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.stat{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center}
.stat .label{color:var(--muted);font-size:12px}
.stat .value{font-weight:700}
.table-wrap{overflow:auto;margin-top:8px}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
thead th{font-size:12px;color:var(--muted);text-align:left;padding:0 8px}
tbody td{background:var(--panel-2);border:1px solid var(--border);border-left:none;border-right:none;padding:8px}
tbody tr td:first-child{border-left:1px solid var(--border);border-radius:10px 0 0 10px}
tbody tr td:last-child{border-right:1px solid var(--border);border-radius:0 10px 10px 0}
.footer{margin:16px 0 24px 0;text-align:center;color:var(--muted);font-size:12px}
.side-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700}
.side-badge.buy{color:var(--buy);border-color:var(--buy);background:color-mix(in oklab, var(--buy) 10%, #fff)}
.side-badge.sell{color:var(--sell);border-color:var(--sell);background:color-mix(in oklab, var(--sell) 10%, #fff)}
.sev{display:inline-flex;align-items:center;gap:6px;border:1px solid;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.sev.low{color:#166c42;border-color:#bfe6cf;background:#e7f6ee}
.sev.med{color:#8a5b00;border-color:#f3d08a;background:#fff6e3}
.sev.high{color:#7c1325;border-color:#f2b4b8;background:#ffecee}
.ask-wrap{display:grid;gap:10px}
.ask-log{height:360px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--panel-2)}
.msg{display:flex;gap:8px;margin-bottom:8px}
.msg .who{font-weight:700;color:var(--muted);min-width:70px}
.msg .bubble{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px;flex:1}
.ask-input{display:flex;gap:8px}
.center{text-align:center}
.muted{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{border:1px solid var(--border);background:var(--panel-2);border-radius:999px;padding:6px 10px;cursor:pointer;font-size:12px}
canvas{image-rendering:crisp-edges}