/* Road to Doomsday — original minimal header/hero/progress/list layout,
   recolored with Doctor Doom's obsidian, Latverian emerald and metal. */
:root {
  color-scheme: dark;
  --bg: #060b09;
  --bg-top: #0b1710;
  --surface: #101a15;
  --surface-deep: #0b130f;
  --surface-raised: #17251c;
  --outline: #304338;
  --outline-soft: #223128;
  --text: #e7eee7;
  --muted: #9baaa0;
  --quiet: #6c8174;
  --accent: #9cdb80;
  --accent-bright: #c1fa98;
  --accent-deep: #447548;
  --metal: #c3ccc3;
  --warning: #ff988c;
  --radius: 12px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse 75% 420px at 50% 0%, #153020 0, var(--bg-top) 48%, var(--bg) 100%) fixed;
  min-height: 100vh;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.sr-only { position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.site-header {
  width: 100%; padding: 21px max(24px, calc((100vw - 930px) / 2));
  border-bottom: 1px solid #283c30;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: rgba(7,16,11,.66);
}
.brand { display: flex; align-items: center; gap: 1px; font-weight: 850; letter-spacing: .065em; text-decoration: none; color: var(--metal); font-size: 18px; }
.brand .mark { color: var(--accent-bright); }
.header-label, .eyebrow, .deadline, .state, .number, .progress-copy div,
.countdown-unit span, .stat span { letter-spacing: .14em; font-weight: 760; }
.header-label { color: var(--quiet); font-size: 10px; text-align: right; }
.shell { max-width: 920px; margin: 0 auto; padding: 54px 24px 48px; }
.hero { margin-bottom: 36px; }
.eyebrow { color: var(--accent); font-size: 11px; margin: 0 0 12px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(39px, 6.5vw, 66px); letter-spacing: -.058em; font-weight: 830; line-height: 1.07; margin: 0 0 15px; }
h1 span { color: var(--accent-bright); }
.subtitle { color: var(--muted); margin: 0; font-size: 15px; }
/* A compact countdown card is the only new public-page block. */
.countdown-card {
  margin: 0 0 22px; padding: 22px 26px 19px;
  border: 1px solid #38533e; border-radius: var(--radius);
  background: linear-gradient(116deg, rgba(30,66,40,.47), rgba(12,24,17,.95) 65%);
  box-shadow: 0 12px 40px #030b0520, inset 0 1px 0 #c1fa980d;
}
.countdown-topline { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom: 12px; }
.countdown-topline .eyebrow { margin:0; }
.deadline { color: var(--muted); font-size: 10px; white-space: nowrap; }
.countdown { display:flex; align-items:baseline; gap:clamp(9px,3vw,28px); }
.countdown-unit { flex: 1 1 0; min-width:0; display:flex; flex-direction:column; }
.countdown-unit strong { font-size:clamp(27px, 5.6vw, 54px); font-weight:780; color:var(--metal); letter-spacing:-.05em; font-variant-numeric:tabular-nums; line-height:1.15; }
.countdown-unit:first-child strong { color:var(--accent-bright); }
.countdown-unit span { font-size:9px; color:var(--quiet); margin-top:9px; }
.countdown-divider { color:var(--accent-deep); font-size:clamp(23px,4vw,37px); font-weight:400; }
.countdown-complete { color:var(--accent-bright);font-size:24px;letter-spacing:.07em;font-weight:800;margin:8px 0; }
.countdown-noscript { color:var(--muted); margin:10px 0 0; }
.progress-card { border:1px solid var(--outline);border-radius:var(--radius);background:var(--surface);padding:23px 26px;margin-bottom:22px; }
.progress-copy { display:flex; justify-content:space-between; align-items:baseline; gap:15px; margin-bottom:15px; }
.progress-copy strong { font-size:35px; font-variant-numeric:tabular-nums; letter-spacing:-.05em; line-height:1; color:var(--metal); }
.progress-copy strong span { font-size:23px; color:var(--quiet); }
.progress-copy div { color:var(--muted);font-size:11px; }
.progress-copy b { color:var(--accent-bright);font-weight:780; }
.progress-track { background:#24352a; height:8px; border-radius:10px; overflow:hidden; }
.progress-fill { height:100%;background:linear-gradient(90deg, #427a4b, #b0ed8b);border-radius:inherit;transition:width .2s ease; }
.movie-list { border:1px solid var(--outline); border-radius:var(--radius); overflow:hidden; background:rgba(12,20,15,.80); }
.movie { display:grid; grid-template-columns:37px 34px minmax(0,1fr) auto; gap:12px; padding:16px 20px; align-items:center; min-height:61px;border-bottom:1px solid var(--outline-soft); }
.movie:last-child { border-bottom:0; }
.movie.watched { background: rgba(65,108,69,.13); }
.number { color:var(--quiet); font-size:11px; font-variant-numeric:tabular-nums; }
.status { font-weight:800; font-size:21px;color:var(--quiet);line-height:1; }
.watched .status { color:var(--accent); }
.movie-name { font-weight:640; line-height:1.4; }
.movie.watched .movie-name { color:var(--metal); }
.state { text-align:right; font-size:10px; color:var(--quiet); white-space:nowrap; }
.watched .state { color:var(--accent); }
footer { padding:29px 0 6px;color:var(--quiet);text-align:center;font-size:12px;letter-spacing:.05em; }
/* Admin editor: deliberately more functional without changing public layout. */
.admin-shell { max-width:1100px; padding-top:34px; }
.admin-topline { display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:34px; }
.back-link {color:var(--muted);font-size:13px;text-decoration:none;}
.back-link:hover {color:var(--accent-bright);}
.admin-tools {display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.admin-tools form {margin:0;}
.admin-hero {margin-bottom:24px;}
.admin-hero h1 {font-size:clamp(37px,6vw,58px);}
.admin-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.stat {border:1px solid var(--outline);border-radius:var(--radius);padding:19px 21px;background:var(--surface);display:flex;flex-direction:column;gap:6px;}
.stat span {color:var(--quiet);font-size:10px;}
.stat strong {font-variant-numeric:tabular-nums;font-size:32px;letter-spacing:-.03em;color:var(--metal);line-height:1.2;}
.stat:first-child strong {color:var(--accent-bright);}
.panel {border:1px solid var(--outline);border-radius:var(--radius);background:var(--surface-deep);padding:24px;margin-bottom:20px;}
.section-head {display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;}
.section-head .eyebrow {margin-bottom:3px;}
h2 {font-size:21px;letter-spacing:-.02em;margin:0;font-weight:760;}
.inline-hint {color:var(--quiet);font-size:12px;}
.admin-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.search-field {display:flex;align-items:center;gap:9px;min-width:220px;flex:1 1 280px;border-radius:9px;border:1px solid var(--outline);background:#0a120e;color:var(--quiet);padding:0 13px;}
.search-field:focus-within {border-color:var(--accent);}
.search-field span {font-size:20px;}
input[type="search"],.add-form input,.form-stack input,.edit-title-input {width:100%;border:0;background:transparent;color:var(--text);outline:0;padding:12px 2px;min-width:0;}
input::placeholder {color:#6e8375;}
.filter-buttons {display:flex;border:1px solid var(--outline);border-radius:9px;padding:3px;background:#0a120e;gap:2px;}
.filter {background:transparent;border:0;color:var(--muted);padding:9px 13px;border-radius:7px;font-size:12px;font-weight:730;white-space:nowrap;}
.filter.active {background:#2b4833;color:var(--accent-bright);}
.button {font-size:12px;font-weight:710;text-decoration:none;border-radius:8px;padding:10px 14px;border:1px solid var(--outline);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:background .12s,border-color .12s;}
.button-quiet {background:#14231a;color:var(--metal);}
.button-quiet:hover {background:#20362a;border-color:#4e7255;}
.button-primary {background:var(--accent);color:#102015;border-color:var(--accent);}
.button-primary:hover {background:var(--accent-bright);}
.bulk-toolbar {display:flex;justify-content:space-between;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:13px;}
.bulk-toolbar .inline-hint {flex:1 1 205px;}
.bulk-actions {display:flex;gap:7px;flex-wrap:wrap;}
.bulk-actions .button {font-size:11px;padding:8px 11px;}
.editor-list {list-style:none;padding:0;margin:0;border:1px solid var(--outline);border-radius:10px;overflow:hidden;}
.editor-row {display:flex;align-items:center;gap:12px;min-height:66px;padding:9px 13px;background:#0d1711;border-bottom:1px solid var(--outline-soft);transition:background .12s;}
.editor-row:last-child {border-bottom:0;}
.editor-row:hover {background:#17261b;}
.editor-row.is-watched {background:#14251a;}
.editor-row.is-watched:hover {background:#1b3223;}
.editor-row.dragging {opacity:.45;background:#33533b;}
.editor-row.drag-over {outline:2px solid var(--accent);outline-offset:-2px;}
.editor-row[hidden] {display:none;}
.drag-handle {color:#758878;font-size:24px;line-height:1;cursor:grab;user-select:none;}
.editor-number {width:23px;flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:var(--quiet);}
.watch-toggle {width:25px;height:25px;flex:none;position:relative;cursor:pointer;}
.watch-toggle input {opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;margin:0;}
.check-visual {display:flex;width:25px;height:25px;border:1px solid #506354;border-radius:7px;align-items:center;justify-content:center;color:transparent;font-size:15px;}
.watch-toggle input:checked + .check-visual {background:#4d8954;color:#e7f8e2;border-color:#75b46c;}
.watch-toggle input:focus-visible + .check-visual {outline:2px solid var(--accent-bright);outline-offset:2px;}
.row-copy {display:flex;flex-direction:column;min-width:0;flex:1;gap:1px;}
.row-title {font-size:13px;font-weight:650;line-height:1.4;overflow-wrap:anywhere;}
.row-state {font-size:11px;color:var(--quiet);}
.is-watched .row-state {color:var(--accent);}
.row-actions {display:flex;align-items:center;gap:3px;flex:none;}
.mini-action {background:transparent;border:1px solid transparent;border-radius:6px;color:#90a392;width:29px;height:30px;font-size:17px;line-height:1;}
.mini-action:hover {background:#2c4833;border-color:#3f6347;color:var(--metal);}
.mini-action.destructive:hover {background:#472723;color:var(--warning);border-color:#6d3832;}
.edit-title-input {padding:6px 9px;background:#0b160e;border:1px solid var(--accent);border-radius:6px;font-size:13px;}
.empty-list {color:var(--muted);text-align:center;margin:14px 0;}
.add-form {display:flex;gap:10px;align-items:stretch;}
.add-form input,.form-stack input {background:#0a120e;border:1px solid var(--outline);border-radius:9px;padding:11px 13px;}
.add-form input:focus,.form-stack input:focus {border-color:var(--accent);}
.add-panel .inline-hint {display:block;margin:12px 0 0;}
.admin-footer {text-align:center;color:var(--quiet);font-size:11px;margin:20px 0 0;}
.flash {border:1px solid var(--outline);padding:12px 14px;border-radius:8px;background:#173321;color:var(--accent-bright);font-size:13px;}
.flash.error {background:#34231d;color:var(--warning);}
.login-panel {max-width:440px;}
.form-stack {display:flex;flex-direction:column;gap:11px;}
.form-stack label {font-size:12px;color:var(--muted);}
.form-stack .button {align-self:flex-start;}
.admin-back {color:var(--quiet);font-size:12px;}
.toast {position:fixed;bottom:23px;right:23px;z-index:4;display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 40px));background:#1a3221;border:1px solid #5d8f62;box-shadow:0 12px 42px #0008;border-radius:9px;padding:13px 16px;color:var(--text);font-size:13px;}
.toast[hidden] {display:none;}
.toast.error {background:#34201e;border-color:#754c44;color:#ffb5aa;}
.toast button {border:0;background:transparent;color:var(--accent-bright);font-weight:770;padding:0;}
@media (max-width:660px) {
  .site-header {padding:17px 21px;}
  .shell {padding:36px 17px 35px;}
  .hero {margin-bottom:27px;}
  .countdown-card,.progress-card {padding:18px 16px;}
  .deadline {font-size:9px;}
  .countdown-unit span {font-size:8px;letter-spacing:.09em;}
  .movie {grid-template-columns:25px 22px minmax(0,1fr);gap:8px;padding:13px 13px;}
  .state {grid-column:3;justify-self:start;text-align:left;font-size:9px;}
  .movie-name {font-size:13px;}
  .admin-stats {gap:7px;}
  .stat {padding:13px;}
  .stat strong {font-size:26px;}
  .stat span {font-size:9px;}
  .panel {padding:15px;}
  .editor-row {gap:6px;padding:8px;}
  .drag-handle {display:none;}
  .editor-number {width:19px;}
  .row-title {font-size:12px;}
  .row-actions {gap:0;}
  .mini-action {width:27px;height:29px;font-size:16px;}
  .add-form {flex-wrap:wrap;}
  .add-form input {flex:1 1 220px;}
  .add-form .button {flex:1 0 auto;}
  .toast {bottom:12px;right:12px;}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {transition:none!important;scroll-behavior:auto!important;} }