:root { --bg:#0f1320; --panel:#171c2c; --panel2:#1e2438; --text:#e6e9f2; --muted:#9aa3ba; --accent:#4dabf7; --border:#2a3148; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.app { display:grid; grid-template-columns:360px 1fr; height:100vh; }
.sidebar { background:var(--panel); border-right:1px solid var(--border); overflow-y:auto; padding:14px 16px 30px; }
.sidebar h1 { font-size:18px; margin:0 0 6px; }
.sidebar h1 .ver { color:var(--accent); font-size:12px; margin-left:6px; }
.sidebar h2 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:18px 0 8px; }
.sidebar h2 .hint { text-transform:none; letter-spacing:0; font-weight:normal; }
.blurb { color:var(--muted); font-size:12.5px; margin:0 0 6px; }
.row { display:flex; flex-direction:column; gap:3px; margin:7px 0; }
.row > span { font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; }
.row > span b { color:var(--text); font-weight:600; }
.row.check { flex-direction:row; align-items:center; gap:8px; }
.row.check span { color:var(--text); }
input[type=range] { width:100%; accent-color:var(--accent); }
select, input[type=number] { background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:5px 7px; font-size:13px; }
button { background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px 10px; font-size:13px; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#04101f; border-color:var(--accent); font-weight:600; }
.presets { display:flex; flex-wrap:wrap; gap:6px; }
.presets button { font-size:12px; padding:4px 8px; }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-bottom:6px; }
.opts label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.opts .sw { width:12px; height:12px; border-radius:3px; display:inline-block; }
.readout { font-size:12.5px; color:var(--muted); margin:6px 0; }
.readout b { color:var(--text); }
.hidden { display:none !important; }
footer { color:var(--muted); font-size:11.5px; margin-top:26px; border-top:1px solid var(--border); padding-top:10px; }
.main { display:grid; grid-template-rows:auto 1fr 220px; min-width:0; min-height:0; }
.toolbar { display:flex; align-items:center; gap:12px; padding:8px 14px; border-bottom:1px solid var(--border); background:var(--panel); }
.toolbar .tslider { flex:1; }
.toolbar label { color:var(--muted); font-size:12.5px; display:flex; align-items:center; gap:6px; }
.toolbar label input { width:90px; }
.tlabel { color:var(--muted); font-size:12.5px; white-space:nowrap; }
.tlabel b { color:var(--text); }
.status { color:var(--muted); font-size:12px; white-space:nowrap; }
.canvaswrap { position:relative; min-height:0; overflow:hidden; }
#field { width:100%; height:100%; display:block; cursor:crosshair; }
.legend { position:absolute; left:10px; top:10px; background:rgba(15,19,32,.75); border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:12px; display:flex; flex-direction:column; gap:3px; pointer-events:none; }
.legend .item { display:flex; align-items:center; gap:6px; }
.legend .sw { width:14px; height:3px; display:inline-block; }
.tooltip { position:absolute; background:rgba(15,19,32,.92); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:12px; pointer-events:none; white-space:nowrap; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; background:rgba(15,19,32,.45); color:var(--text); font-size:14px; }
.spinner { width:18px; height:18px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.bottom { display:grid; grid-template-columns:1fr 260px;
}
.bottom.single { grid-template-columns:1fr; }
.overlay.soft { background:transparent; align-items:flex-start; justify-content:flex-end; padding:14px; pointer-events:none; }
.bottom { border-top:1px solid var(--border); background:var(--panel); min-height:0; }
.bottom .panel { position:relative; min-width:0; min-height:0; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.bottom .panel:last-child { border-right:none; }
.ptitle { font-size:11.5px; color:var(--muted); padding:4px 10px 0; }
.bottom canvas { flex:1; width:100%; min-height:0; display:block; }
#census { width:100%; height:220px; display:block; margin-top:6px; background:var(--panel2); border-radius:6px; }
@media (max-width: 900px) { .app { grid-template-columns:1fr; grid-template-rows:auto 1fr; height:auto; } .main { height:100vh; } }