:root {
  --bg: #0f1419;
  --fg: #e7ecf1;
  --muted: #9aa7b2;
  --card: #1b232c;
  --accent: #3d8bfd;
  --accent2: #e3b341;
  --danger: #e35d6a;
  --ok: #3ecf8e;
  --line: #31404d;
  --sidebar: 16.5rem;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
#login, #app { min-height: 100%; }
#login { display: flex; align-items: center; justify-content: center; padding: 2rem; }
#app { display: none; height: 100vh; }
.card { background: var(--card); padding: 1.5rem; border-radius: 12px; width: min(24rem, 100%); }
h1 { font-size: 1.25rem; margin: 0 0 1rem; }
h2 { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.5rem; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.75rem 0 0.25rem; }
label.inline { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--fg); }
input, select { width: 100%; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--line);
  background: #12181e; color: var(--fg); }
label.inline select { width: auto; min-width: 9rem; padding: 0.3rem 0.5rem; }
button { margin-top: 1rem; padding: 0.6rem 1rem; border: 0; border-radius: 8px; background: var(--accent);
  color: #fff; font-weight: 600; cursor: pointer; }
button.secondary { background: #31404d; }
button.small { margin-top: 0; padding: 0.25rem 0.55rem; font-size: 0.75rem; font-weight: 500; }
button.icon { margin-top: 0; width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%;
  background: #31404d; }
button:disabled { opacity: 0.6; cursor: wait; }
.error { color: var(--danger); min-height: 1.2rem; margin: 0.5rem 0 0; font-size: 0.9rem; }
.error.banner { margin: 0; padding: 0.4rem 1rem; background: #3a1c22; min-height: 0; }
.muted { color: var(--muted); font-size: 0.9rem; }
#app { display: none; grid-template-columns: var(--sidebar) 1fr; }
#app.is-on { display: grid; }
.sidebar { border-right: 1px solid var(--line); overflow: auto; padding: 0.9rem 0.85rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.1rem; }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.55rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top-left, .top-right { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
#ctx-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.play-status { font-size: 0.78rem; color: var(--muted); min-width: 6.5rem;
  font-variant-numeric: tabular-nums; }
.transport, .overlay-mode { display: flex; align-items: center; gap: 0.25rem; }
button.toggle { background: #31404d; }
button.toggle.is-on { background: var(--accent); }
.status { font-size: 0.8rem; color: var(--accent2); min-height: 1em; }
.choice-list { display: flex; flex-direction: column; gap: 0.2rem; }
.choice { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.28rem 0.2rem;
  border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.choice:hover, .choice:focus-within { background: #24303b; }
.choice input { width: auto; margin: 0.15rem 0 0; accent-color: var(--accent); }
.choice .meta { display: block; font-size: 0.72rem; color: var(--muted); }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.row.tight { gap: 0.35rem; }
.stack { display: flex; flex-direction: column; gap: 0.35rem; }
.stack button { margin-top: 0.35rem; }
.hidden { display: none !important; }
table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
th, td { text-align: left; padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--line); }
.admin-box { border-top: 1px solid var(--line); padding-top: 0.8rem; }
.grid { flex: 1; min-height: 0; display: grid; gap: 0.45rem; padding: 0.45rem; overflow: hidden; }
.grid-card { position: relative; background: #12181e; border: 1px solid var(--line); border-radius: 8px;
  min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.grid-card.is-fs { position: fixed; inset: 0.6rem; z-index: 20; background: #12181e; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.3rem 0.5rem; font-size: 0.78rem; }
.card-head .name { font-weight: 600; }
.stage { position: relative; flex: 1; min-height: 0; background: #0a0d10; }
.stage img, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage img { object-fit: contain; }
.stage canvas { pointer-events: auto; }
.placeholder { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--muted); gap: 0.25rem; }
.placeholder strong { color: var(--fg); font-weight: 600; }
.skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, #1b232c, #24303b, #1b232c);
  background-size: 200% 100%; animation: pulse 1.2s linear infinite; }
@keyframes pulse { to { background-position: -200% 0; } }
.tooltip { position: fixed; z-index: 30; background: #0a0d10; border: 1px solid var(--line);
  border-radius: 6px; padding: 0.4rem 0.55rem; font-size: 0.8rem; line-height: 1.35;
  pointer-events: none; max-width: 14rem; box-shadow: 0 8px 24px #0008; }
.help-pop { position: fixed; top: 3rem; right: 1rem; z-index: 25; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.85rem;
  max-width: 26rem; max-height: calc(100vh - 4rem); overflow: auto; }
.status-pre { font-size: 0.72rem; white-space: pre-wrap; word-break: break-word;
  background: #0a0d10; padding: 0.4rem; border-radius: 6px; max-height: 14rem; overflow: auto; }
.help-pop strong { display: block; margin: 0.15rem 0 0.35rem; }
.help-pop table { margin: 0 0 0.65rem; }
.help-pop td { border-bottom: 0; padding: 0.12rem 0.4rem 0.12rem 0; }
.help-pop td:first-child { color: var(--muted); width: 4.6rem; white-space: nowrap; }
.nav-tabs { display: flex; gap: 0.25rem; }
.nav-tab { margin-top: 0; padding: 0.3rem 0.7rem; font-size: 0.85rem; background: #31404d; }
.nav-tab.is-on { background: var(--accent); }
.notes-page { flex: 1; min-height: 0; overflow: auto; padding: 0.8rem 1rem 1.5rem; }
.notes-day { margin: 0 0 1.1rem; }
.notes-day h3 { margin: 0 0 0.45rem; font-size: 0.9rem; color: var(--muted);
  text-transform: none; letter-spacing: 0; }
.note-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.65rem 0.8rem; margin: 0 0 0.45rem; }
.note-card .meta { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.35rem; }
.note-card .excerpt { font-size: 0.9rem; margin: 0 0 0.45rem; }
.modal { position: fixed; inset: 0; z-index: 40; background: #0008;
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  width: min(36rem, 100%); padding: 1rem 1.1rem 1.15rem; max-height: 90vh; overflow: auto; }
.modal-card h2 { text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--fg); }
.note-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; margin: 0 0 0.7rem;
  font-size: 0.82rem; }
.note-meta dt { color: var(--muted); }
.note-meta dd { margin: 0.1rem 0 0; }
#note-md { width: 100%; min-height: 8rem; resize: vertical; }
.md-preview { min-height: 8rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line);
  border-radius: 8px; background: #12181e; font-size: 0.9rem; }
.md-preview p { margin: 0.35rem 0; }
.md-preview h1, .md-preview h2, .md-preview h3 { margin: 0.4rem 0; text-transform: none;
  letter-spacing: 0; color: var(--fg); }
.md-preview ul { margin: 0.35rem 0; padding-left: 1.2rem; }
@media (max-width: 720px) {
  #app.is-on { grid-template-columns: 1fr; }
  .sidebar { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
}