* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f1216; color: #e7ecf2; }
.hidden { display: none !important; }
.muted { color: #8b97a6; }
.small { font-size: 12px; }
.spacer { flex: 1; }
button { cursor: pointer; border: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
button.primary { background: #2f6df6; color: #fff; }
button.danger { background: #e0483d; color: #fff; }
button.ghost { background: #1b2028; color: #cdd6e0; }
button.tool { background: #1b2028; color: #cdd6e0; }
button.tool.active { background: #2f6df6; color: #fff; }
input, select { background: #12161c; color: #e7ecf2; border: 1px solid #2a313b;
  border-radius: 8px; padding: 8px 10px; font-size: 14px; width: 100%; }

/* login */
.login-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.login-card { width: 320px; background: #151a21; padding: 28px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.login-card h1 { font-size: 20px; margin: 0; }
.login-card .sub { margin: 0 0 6px; color: #8b97a6; font-size: 13px; }
.login-card button { background: #2f6df6; color: #fff; }
.err { color: #ff8078; font-size: 13px; min-height: 16px; }

/* app */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: #151a21; border-bottom: 1px solid #232a33; }
.brand { font-weight: 700; }
.job-title { color: #9fb0c2; }
.save-state { font-size: 12px; color: #6ad07a; }
.save-state.saving { color: #f0c04a; }
.save-state.error { color: #ff8078; }
.whoami { font-size: 13px; color: #9fb0c2; }

.body { flex: 1; display: flex; min-height: 0; }
.left, .right { width: 240px; padding: 14px; overflow: auto; background: #12161c; }
.right { border-left: 1px solid #232a33; }
.left { border-right: 1px solid #232a33; }
.center { flex: 1; display: flex; flex-direction: column; min-width: 0; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #8b97a6; margin: 4px 0 10px; }

.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 6px; background: #171d25; }
.job-list li.active { background: #23324f; }
.job-list li .st { font-size: 11px; color: #8b97a6; }

.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: #12161c; border-bottom: 1px solid #232a33; }
.toolbar .divider { width: 1px; height: 22px; background: #2a313b; margin: 0 4px; }
.frame-label { min-width: 96px; text-align: center; font-variant-numeric: tabular-nums; color: #9fb0c2; }

.canvas-wrap { flex: 1; overflow: hidden; background: #0b0e12; position: relative; }
canvas { display: block; background: #000; width: 100%; height: 100%; }
.timeline { width: 100%; margin: 0; padding: 10px 14px; }

label { display: block; font-size: 12px; color: #9fb0c2; margin: 10px 0 4px; }
label.chk { display: flex; align-items: center; gap: 8px; }
label.chk input { width: auto; }
.meta-line { font-size: 12px; color: #8b97a6; margin: 10px 0; }
.btn-row { display: flex; gap: 8px; margin-top: 12px; }
.btn-row button { flex: 1; }
hr { border: none; border-top: 1px solid #232a33; margin: 18px 0; }

.add-class { display: flex; gap: 6px; margin-top: 8px; }
.add-class input { flex: 1; }

/* toolbar icon buttons (playback) */
.toolbar .ico { background: #1b2028; color: #cdd6e0; padding: 6px 9px; font-size: 15px; line-height: 1; }
.toolbar .ico:hover { background: #263041; }
.toolbar .ico.playing { background: #2f6df6; color: #fff; }
.hint { padding: 6px 14px; font-size: 12px; color: #8b97a6; min-height: 18px; background: #12161c; }
.prop-row { margin-top: 14px; }
button.wide { width: 100%; margin-top: 8px; }
canvas { cursor: default; }