:root { --bg:#0a0a12; --panel:#12121f; --line:#2a2a44; --text:#e6e6f0; --accent:#6cc8ff; --muted:#8a8ab0; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 'JetBrains Mono',monospace; }
#topbar { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; background:linear-gradient(180deg,#14141f 0%,#0a0a12 100%); border-bottom:1px solid #1e1e38; }
.brand { color:var(--accent); font-family:'Orbitron',sans-serif; font-size:15px; letter-spacing:0.08em; text-shadow:0 0 12px rgba(108,200,255,0.5); }
#layout { display:grid; grid-template-columns:200px 280px 1fr; height:calc(100vh - 41px); }
#nav,#list,#detail { overflow:auto; padding:10px; }
#nav,#list { border-right:1px solid var(--line); }
.navitem,.listitem { padding:6px 8px; border-radius:6px; cursor:pointer; }
.navitem:hover,.listitem:hover { background:var(--panel); }
.navitem.active,.listitem.active { background:var(--panel); color:var(--accent); border-left:2px solid var(--accent); padding-left:6px; box-shadow:inset 0 0 10px rgba(108,200,255,0.06); }
button { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:12px; transition:border-color 0.15s,box-shadow 0.15s; }
button:hover { border-color:var(--accent); box-shadow:0 0 6px rgba(108,200,255,0.3); }
button[data-live="true"] { border-color:rgba(255,227,77,0.6); color:#ffe34d; box-shadow:0 0 8px rgba(255,227,77,0.35); }
input,select { background:#0d0d18; color:var(--text); border:1px solid var(--line); border-radius:5px; padding:4px 7px; }
input:focus,select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 5px rgba(108,200,255,0.25); }
.field { display:flex; gap:8px; align-items:center; margin:5px 0; }
.field label { width:130px; color:var(--muted); }
.metrics { margin-top:14px; padding:10px; background:var(--panel); border-radius:8px; border:1px solid #1e1e38; }
.metrics .m { display:flex; justify-content:space-between; }
.metrics .m b { color:var(--accent); text-shadow:0 0 6px rgba(108,200,255,0.4); }
.flag { color:#ffcf5a; }
.live-label { color:#ffe34d; }
table.matrix,table.bulk { border-collapse:collapse; font-size:12px; }
table.matrix td,table.matrix th,table.bulk td,table.bulk th { border:1px solid var(--line); padding:3px 6px; text-align:center; }
.cell { cursor:pointer; } .cell:hover { background:rgba(108,200,255,0.08); color:var(--accent); }