:root {
  --bg: #07080c;
  --panel: #0e1017;
  --line: #22263a;
  --text: #d9dce8;
  --dim: #8a90a8;
  --accent: #ffc85a;
  --accent2: #4de3e0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { display: flex; overflow: hidden; }

#panel { width: 310px; flex: none; height: 100%; overflow-y: auto; background: var(--panel);
  border-right: 1px solid var(--line); padding: 14px 16px 30px; }
#panel header h1 { margin: 0; font-size: 20px; letter-spacing: 0.04em; color: var(--accent); }
#panel header p { margin: 4px 0 6px; color: var(--dim); }
#panel section { border-top: 1px solid var(--line); padding: 10px 0 6px; }
#panel h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

.ctl { display: block; margin: 0 0 8px; }
.ctl span { display: flex; justify-content: space-between; }
.ctl b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--accent); margin: 2px 0 0; }
.check { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.check input { accent-color: var(--accent); }
.hint { margin: -2px 0 6px; color: var(--dim); font-size: 12px; min-height: 2.9em; }
.row { display: flex; gap: 10px; align-items: flex-end; }
.grow { flex: 1; }

button { font: inherit; color: var(--text); background: #171a26; border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 9px; cursor: pointer; }
button:hover { border-color: #3a4060; }
button.small { margin-bottom: 8px; min-width: 64px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { display: flex; margin: 0 0 10px; }
.seg button { flex: 1; border-radius: 0; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on, .presets button.on { background: #2b2616; border-color: var(--accent); color: var(--accent); }

.readout dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.readout dt { color: var(--dim); }
.readout dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
details { border-top: 1px solid var(--line); padding-top: 10px; color: var(--dim); }
details summary { cursor: pointer; color: var(--text); }
details b { color: var(--text); }

#stage { flex: 1; display: flex; min-width: 0; }
.view { position: relative; flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.view canvas { display: block; width: 100%; height: 100%; }
#eyes { cursor: grab; }
#eyes:active { cursor: grabbing; }
body.mode-cell #eyeView, body.mode-eyes #cellView { display: none; }

.tag { position: absolute; top: 10px; left: 12px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim); pointer-events: none; text-shadow: 0 1px 2px #000; }
.legend { position: absolute; bottom: 10px; left: 12px; display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--dim); pointer-events: none; }
.legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; pointer-events: none; }
#hud { position: absolute; bottom: 10px; left: 12px; right: 12px; font-size: 12px; color: #e8ebf5;
  text-shadow: 0 1px 3px #000; pointer-events: none; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  body { flex-direction: column; overflow: auto; }
  #panel { width: 100%; height: auto; order: 2; border-right: 0; }
  #stage { order: 1; flex: none; height: 70vh; flex-direction: column; }
  .view { border-left: 0; border-bottom: 1px solid var(--line); }
}

.labels { position: absolute; inset: 0; pointer-events: none; }
#eyeLabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#eyeLabels .label { position: absolute; left: 0; top: 0; }
.label { font-size: 11px; color: #cfd6ea; text-shadow: 0 1px 3px #000, 0 0 2px #000; white-space: nowrap;
  letter-spacing: 0.03em; }
.label.sun { color: var(--accent); }
.date-row { align-items: center; }
.date-row button { margin-bottom: 0; }
input[type=date] { width: 100%; font: inherit; color: var(--text); background: #171a26; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 6px; margin-top: 2px; color-scheme: dark; }

/* help tooltips */
[data-tip] > span:first-child, .check[data-tip] { cursor: help; }
.ctl[data-tip] > span:first-child { text-decoration: underline dotted #4a5070; text-underline-offset: 3px; }
#tip { position: fixed; left: 0; top: 0; z-index: 10; max-width: 300px; padding: 8px 10px;
  background: #1b1f2e; border: 1px solid #343a55; border-radius: 8px; color: var(--text);
  font-size: 12.5px; line-height: 1.45; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  pointer-events: none; opacity: 0; transition: opacity 0.12s; }
#tip.on { opacity: 1; }
.label.zodiac { color: #e8c46a; font-style: italic; opacity: 0.85; }
.readout dt[data-tip] { cursor: help; text-decoration: underline dotted #3e4460; text-underline-offset: 3px; }
.ctl b { display: inline-block; }