:root{
  --bg: #0f1115;
  --panel: #141821;
  --text: #e6eaf2;
  --muted: #98a2b3;
  --accent: #4cc3ff;
  --ok: #3ddc97;
  --warn: #ffcc66;
  --danger: #ff6b6b;
  --token-bg: #1b2230;
  --token-active: #243146;
  --border: #2a3244;
  --focus: #4263eb;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: radial-gradient(1200px 800px at 20% -10%, #151a24 0%, var(--bg) 50%), var(--bg);
  color: var(--text);
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.app-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #161b25, #11151e);
}
.app-header h1{ font-size: 14px; font-weight: 600; margin: 0; color: var(--muted); letter-spacing: 0.02em; }
.prefs{ display:flex; align-items:center; gap:12px; color:var(--muted); }
.prefs input[type="range"]{ width: 120px; accent-color: var(--accent); }

main{ max-width: 960px; margin: 0 auto; padding: 12px 16px 64px; }

.editor{
  outline: none;
  white-space: pre-wrap;
  caret-color: #fff;
  min-height: calc(100vh - 80px);
}

.line{ position: relative; padding: 4px 6px; border-left: 2px solid transparent; border-radius: 4px; }
.line:hover{ background: rgba(255,255,255,0.02); }
.line.active{ background: rgba(255,255,255,0.03); }
.line.running{ border-left-color: var(--accent); }
.line.paused{ border-left-color: var(--warn); }
.line.finished{ border-left-color: var(--ok); }
.line.overtime{ border-left-color: var(--danger); }

.token{ display: inline-flex; align-items: baseline; gap: 8px; padding: 2px 6px; margin-right: 8px; background: var(--token-bg); border: 1px solid var(--border); border-radius: 6px; }
.token.pulse{ animation: pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .token.pulse{ animation: none; } }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(255,107,107,.25);} 70%{ box-shadow:0 0 0 6px rgba(255,107,107,0);} 100%{ box-shadow:0 0 0 0 rgba(255,107,107,0);} }

.time-group{ display:inline-flex; align-items: baseline; gap:4px; }
.time-num{ font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.time-mark{ color: var(--muted); font-size: 12px; }
.sep{ color: var(--muted); opacity: .6; }

.label{ color: var(--text); opacity: .95; }

.btn{ border: 1px solid var(--border); background: var(--token-bg); color: var(--text); padding: 2px 8px; border-radius: 999px; cursor: pointer; font-size: 12px; line-height: 18px; display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ background: var(--token-active); }
.btn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled]{ opacity: .5; cursor: default; }
.btn.warn{ border-color: #5a4c2a; background: #2b2415; }
.btn.danger{ border-color: #5a2a2a; background: #2b1515; }

.overtime{ color: var(--danger); margin-left: 8px; font-variant-numeric: tabular-nums; }

.toast{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; background: #1e2431; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* Subtle placeholder style */
.placeholder{ color: var(--muted); opacity: .8; }

/* Floating controls popover */
.ctrl-pop{ position: absolute; max-width: 92vw; display: flex; flex-wrap: nowrap; align-items: center; gap:6px; padding:8px; border-radius:8px; border:1px solid var(--border); background: #151b27; box-shadow: 0 8px 28px rgba(0,0,0,.45); pointer-events: auto; z-index: 2000; white-space: nowrap; }
.ctrl-pop .group{ display:inline-flex; gap:6px; margin-left:6px; }
.ctrl-pop[hidden]{ display:none; }

/* Decorative time markers using pseudo elements so they don't affect text content
   Only for non-unit syntaxes (colon/bare minutes). */
.token[data-kind="hms"] .t.h::after,
.token[data-kind="hm_or_ms"] .t.h::after,
.token[data-kind="minutes"] .t.h::after{ content:'h'; color: var(--muted); font-size:12px; margin-left:4px; }
.token[data-kind="hms"] .t.m::after,
.token[data-kind="hm_or_ms"] .t.m::after,
.token[data-kind="minutes"] .t.m::after{ content:'m'; color: var(--muted); font-size:12px; margin-left:4px; }
.token[data-kind="hms"] .t.s::after,
.token[data-kind="hm_or_ms"] .t.s::after,
.token[data-kind="minutes"] .t.s::after{ content:'s'; color: var(--muted); font-size:12px; margin-left:4px; }

/* Overtime as visual only */
.token[data-over]::after{ content: attr(data-over); color: var(--danger); margin-left: 8px; font-variant-numeric: tabular-nums; }