:root{--bg:#0e0f12;--panel:#111217;--accent:#2a9d8f}
body{margin:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:#ddd}
.container{display:flex;height:100vh}
.sidebar{width:340px;padding:12px 14px;background:var(--panel);box-shadow:2px 0 8px rgba(0,0,0,0.6);overflow:auto}
.sidebar.wide{width:380px}
.axis-row{display:block;margin-bottom:8px}
.axis-row label{font-size:13px;color:#bbb;margin-bottom:6px}
.axis-controls{display:flex;gap:8px;align-items:center}
.axis-controls select{flex:1}
.axis-controls .minmax{display:flex;gap:6px;margin-left:6px}
.axis-controls .minmax input{width:72px}
.sidebar h2{margin-top:0}
.sidebar label{display:block;margin-top:6px;font-size:13px;color:#bbb}
.sidebar select,input{width:100%;padding:6px;margin-top:6px;background:#0b0b0c;border:1px solid #222;color:#eee}
.sidebar button{margin-top:12px;padding:8px 12px;background:var(--accent);border:none;color:#032;cursor:pointer}
.sidebar button{margin-top:10px;padding:8px 12px;background:var(--accent);border:none;color:#032;cursor:pointer}
.main{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0}
.main img{max-width:100%;max-height:100%;height:auto;border:1px solid #222;background:#000}
.compact-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.compact-row.small{margin-top:8px}
.compact-row label{min-width:70px}
.size-toggle{display:flex;border-radius:6px;overflow:hidden;background:#0b0b0c;border:1px solid #222}
.toggle{padding:6px 8px;border:none;background:transparent;color:#ddd;cursor:pointer}
.toggle.active{background:var(--accent);color:#032;font-weight:600}
.compact-slider{flex:1;display:flex;align-items:center;gap:8px}
.compact-slider input[type=range]{flex:1}

.axis-row .minmax{display:flex;gap:6px;margin-left:6px}
.axis-row .minmax input{width:72px;padding:6px}

#diag_table{border-collapse:collapse}
#diag_table th,#diag_table td{padding:4px 6px;border-bottom:1px solid #1a1a1a;text-align:left}
#diag_table thead th{font-size:12px;color:#9aa}

.spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,0.12);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Light theme overrides when body.light is present */
body.light{--bg:#f7f7f8;--panel:#ffffff;--accent:#2a9d8f;color:#222}
body.light .sidebar{background:var(--panel);color:#222}
body.light .sidebar select,input{background:#fff;border:1px solid #ddd;color:#222}
body.light .main img{background:#fff;border:1px solid #ddd}
body.light .toggle{color:#222}
body.light .toggle.active{background:var(--accent);color:#032}
body.light #status{color:#444}