/* Viewer theme — adapted from the spirulae training viewer (viewer.html). */
:root {
  --bg: #0d0e12;
  --panel-bg: #13151c;
  --panel-border: #252836;
  --accent: #4f8ef7;
  --accent2: #7c5af0;
  --text: #c8cad4;
  --text-dim: #5a5e72;
  --text-bright: #e8eaf2;
  --slider-track: #252836;
  --input-bg: #1a1d28;
  --panel-width: 300px;
  --header-h: 46px;
  --font: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
  --ok: #4ecb71;
  --err: #e05555;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: 12px;
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
}

#header {
  height: var(--header-h); flex: none; display:flex; align-items:center; gap:12px;
  padding: 0 14px; background: var(--panel-bg); border-bottom: 1px solid var(--panel-border);
}
#logo { font-weight:700; font-size:13px; letter-spacing:.06em; }
#logo b { color: var(--accent); font-weight:700; }
#status-dot { width:8px; height:8px; border-radius:50%; background: var(--text-dim); }
#status-dot.ok { background: var(--ok); box-shadow:0 0 6px #4ecb71aa; }
#status-dot.err { background: var(--err); }
#status-text { color: var(--text-dim); font-size:11px; }
#fps { margin-left:auto; color: var(--text-dim); font-size:11px; font-variant-numeric: tabular-nums; }
#panel-toggle { background:none; border:none; color: var(--text); cursor:pointer; font-size:16px; display:none; }

#main { flex:1; display:flex; min-height:0; }
#viewport {
  flex:1; position:relative; cursor:grab; user-select:none; touch-action:none; overflow:hidden;
  background: radial-gradient(circle at 50% 40%, #16181f 0%, #0a0b0e 100%);
}
#viewport:active { cursor: grabbing; }
#glcanvas { display:block; width:100%; height:100%; }
#drop-hint {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; pointer-events:none; color: var(--text-dim); text-align:center;
}
#drop-hint .big { font-size:15px; color: var(--text); }
#drop-hint .sub { font-size:11px; max-width:360px; line-height:1.6; }
#viewport.dragover { outline: 2px dashed var(--accent); outline-offset:-8px; }
#overlay {
  position:absolute; left:10px; bottom:8px; font-size:10px; color: var(--text-dim);
  pointer-events:none; line-height:1.5; text-shadow:0 1px 2px #000;
}
#nav-legend {
  position:absolute; right:10px; bottom:8px; font-size:10px; color: var(--text-dim);
  pointer-events:none; text-align:right; text-shadow:0 1px 2px #000;
}
#cam-tooltip {
  position:absolute; display:none; pointer-events:none; z-index:5;
  background: rgba(19,21,28,0.94); border:1px solid var(--panel-border);
  border-radius:5px; padding:6px 8px; font-size:10px; line-height:1.5;
  color: var(--text); max-width:260px; box-shadow:0 4px 14px #000a;
}
#cam-tooltip b { color: var(--text-bright); }
#toast {
  position:absolute; display:none; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:6; pointer-events:none; max-width:70%;
  background: rgba(19,21,28,0.96); border:1px solid var(--err);
  border-radius:6px; padding:8px 14px; font-size:11px; line-height:1.5;
  color: var(--text-bright); box-shadow:0 4px 16px #000c;
}
#toast.warn { border-color: #c9a227; }

#panel {
  width: var(--panel-width); flex:none; background: var(--panel-bg);
  border-left: 1px solid var(--panel-border); overflow-y:auto;
}
#panel::-webkit-scrollbar { width:6px; }
#panel::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius:3px; }
.section { padding:12px 14px; border-bottom:1px solid var(--panel-border); }
.section-title {
  font-size:9px; text-transform:uppercase; letter-spacing:.12em; color: var(--text-dim);
  margin-bottom:10px; font-weight:700;
}
.section.hidden { display:none; }

.row { margin-bottom:11px; }
.row:last-child { margin-bottom:0; }
.label { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.label span:first-child { color: var(--text); }
.val { color: var(--accent); font-size:10px; font-variant-numeric: tabular-nums; }

input[type=range] { -webkit-appearance:none; width:100%; height:4px; background: var(--slider-track); border-radius:2px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background: var(--accent); cursor:pointer; box-shadow:0 0 5px var(--accent); transition: transform .1s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border:none; border-radius:50%; background: var(--accent); cursor:pointer; }

select {
  width:100%; background: var(--input-bg); color: var(--text); border:1px solid var(--panel-border);
  border-radius:5px; padding:6px 8px; font-family:var(--font); font-size:11px; cursor:pointer;
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235a5e72' fill='none' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position: right 8px center;
}
select:focus { border-color: var(--accent); }

.toggle { position:relative; display:inline-block; width:32px; height:18px; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .track { position:absolute; inset:0; background: var(--slider-track); border-radius:9px; transition:.15s; }
.toggle .track::after { content:''; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#8a8ea2; transition:.15s; }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(14px); background:#fff; }

.btn {
  width:100%; background: var(--input-bg); color: var(--text); border:1px solid var(--panel-border);
  border-radius:5px; padding:7px; font-family:var(--font); font-size:11px; cursor:pointer; transition:.12s;
}
.btn:hover { border-color: var(--accent); color: var(--text-bright); }

input[type=color] { width:100%; height:26px; background: var(--input-bg); border:1px solid var(--panel-border); border-radius:5px; cursor:pointer; padding:2px; }

.stat { display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px; }
.stat span:first-child { color: var(--text-dim); }
.stat span:last-child { color: var(--text-bright); font-variant-numeric: tabular-nums; }

#hist-canvas { width:100%; height:90px; background: var(--input-bg); border-radius:5px; border:1px solid var(--panel-border); margin-top:8px; }

@media (max-width: 820px) {
  #panel { position:fixed; right:0; top:var(--header-h); bottom:0; z-index:10; box-shadow:-8px 0 24px #0008; }
  #panel.collapsed { display:none; }
  #panel-toggle { display:block; margin-left:auto; }
  #fps { margin-left:0; }
}