:root {
  --bg: #0b0f14;
  --panel: #0f1620;
  --muted: #8795a1;
  --fg: #e6edf3;
  --green: #1abc9c;
  --red: #ff6b6b;
  --amber: #f6c90e;
  --blue: #3da5ff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background: #0d131b; border-bottom: 1px solid #1d2633; position: sticky; top: 0; z-index: 20; }
.topbar h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }
.status { font-size: 12px; color: var(--muted); }
.tabs { display:flex; gap:8px; padding:10px 12px; border-bottom: 1px solid #1d2633; background:#0d131b; position: sticky; top: 48px; z-index: 19; }
.tabs button { padding:8px 12px; border-radius:10px; border:1px solid #223047; background:#111928; color:var(--fg); cursor:pointer; }
.tabs button.active { background:#173355; border-color:#28527a; }
main { padding: 12px; }
.controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.switch { display:flex; align-items:center; gap:6px; color: var(--muted); font-size:12px; }
.table-wrap { overflow:auto; border:1px solid #1d2633; border-radius:12px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 10px; border-bottom:1px solid #1d2633; white-space:nowrap; }
th { text-align:left; color: var(--muted); font-weight:500; position: sticky; top: 0; background:#0f1620; }
td.num { text-align:right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; border:1px solid #223047; color:#b8c3cf; }
.badge.hot { background:#23160b; color:#ffb47a; border-color:#3a2514; }
.badge.new { background:#0b2310; color:#94f0c7; border-color:#133523; }
.confbar { width:120px; height:8px; background:#1a2533; border-radius:999px; overflow:hidden; border:1px solid #213147; }
.confbar > span { display:block; height:100%; background: linear-gradient(90deg, #3da5ff, #1abc9c); }
.tab { display:none; }
.tab.active { display:block; }
.news { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap:10px; }
.card { background: var(--panel); border:1px solid #1d2633; border-radius:12px; padding:10px; }
.card h4 { margin:0 0 4px 0; font-size:14px; }
.card .meta { font-size:12px; color: var(--muted); }
.ticket { background: var(--panel); border:1px solid #1d2633; border-radius:12px; padding:12px; margin-bottom: 10px; max-width: 640px; }
.ticket .row { display:flex; gap:10px; margin-bottom:8px; align-items:center; }
.ticket label { width: 160px; color: var(--muted); }
.ticket input, .ticket select { flex: 1; padding:6px 8px; border-radius:8px; border:1px solid #223047; background:#0b1119; color: var(--fg); }
.ticket .actions { gap:8px; }
.ticket button { padding:8px 12px; border-radius:10px; border:1px solid #223047; background:#111928; color:var(--fg); cursor:pointer; }
.ticket button.secondary { background:#0f1620; }
.pnl { display:flex; gap:18px; align-items:center; margin: 8px 0 12px; color: var(--muted); }
.foot { text-align:center; padding: 12px; color: var(--muted); }