* { box-sizing: border-box }
:root {
  color-scheme: dark;
  --bg: #151819; --panel: #1d2222; --ink: #f4eee2; --muted: #b5b8ac; --line: #343b38;
  --gold: #f2c478; --green: #a5d7b2; --red: #ffa799; --header: #191c1c;
  --button-bg: #2a2d27; --button-line: #626052; --accent-ink: #251e13; --accent-hover: #ffdb9d;
  --danger-bg: #3d2727; --danger-line: #8a514c; --mark-bg: #312a1c; --mark-line: #715e3f;
  --glow: #4f392052; --table-head: #202625; --card: #252b29;
  --input-bg: #151919; --input-line: #656e64; --dialog-line: #555b52;
  font-family: "Instrument Sans", system-ui, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ec; --panel: #fffdf8; --ink: #262921; --muted: #515a4e; --line: #d9d1be;
  --gold: #78501a; --green: #246440; --red: #9a2b20; --header: #fffdf8;
  --button-bg: #f3ede0; --button-line: #9b8d70; --accent-ink: #fffdf8; --accent-hover: #654113;
  --danger-bg: #fce9e4; --danger-line: #bf7770; --mark-bg: #f6ead1; --mark-line: #aa8750;
  --glow: #e3ba6742; --table-head: #f1ebde; --card: #f4eee1;
  --input-bg: #fffefa; --input-line: #958a73; --dialog-line: #ad9d81;
}
body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh }
a { color: var(--gold); text-decoration: none }
a:hover { text-decoration: underline }
button, input, select { font: inherit }
button { cursor: pointer; border: 1px solid var(--button-line); background: var(--button-bg); color: var(--ink); padding: .55rem .82rem; border-radius: .45rem; font-weight: 650 }
button:hover { border-color: var(--gold); color: var(--gold) }
button:disabled { cursor: wait; opacity: .6 }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
.primary { background: var(--gold); border-color: var(--gold); color: var(--accent-ink) }
.primary:hover { color: var(--accent-ink); background: var(--accent-hover) }
.danger { color: var(--red); border-color: var(--danger-line); background: var(--danger-bg) }
.danger:hover { color: var(--red); border-color: var(--red) }
.reminder-options { min-width: 0; margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .45rem }
.reminder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .6rem }
.reminder-grid label { display: flex; align-items: center; gap: .35rem }
.reminder-grid input { width: auto; margin: 0; accent-color: var(--gold) }
.report-list li { flex-wrap: wrap; }
.report-list .form-error { flex-basis: 100%; }
.report-list .form-error:empty { display: none; }
.report-badge { margin-inline-start: .45rem; padding: .12rem .4rem; border-radius: 1rem; background: var(--gold); color: var(--accent-ink); font-size: .8em; white-space: nowrap; }
.basin-sort { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.basin-sort select { width: auto; padding-block: .5rem; }
.wrap { max-width: 1160px; margin: auto; padding-inline: clamp(1rem, 4vw, 2.5rem) }
.top { border-bottom: 1px solid var(--line); background: var(--header) }
.top-inner, .top-controls, nav, .footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap }
.top-controls { justify-content: flex-end; font-size: .89rem }
.top-inner { min-height: 3.8rem; padding-block: .5rem }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 750 }
.mark { border: 1px solid var(--mark-line); border-radius: .5rem; color: var(--gold); padding: .27rem .52rem; background: var(--mark-bg) }
nav { justify-content: flex-end; font-size: .89rem }
.hero { padding: clamp(1.2rem, 4vw, 2.75rem) 0 1.25rem; background: radial-gradient(ellipse at 20% 5%, var(--glow), transparent 66%) }
.hero p { margin: 0 }
#lighting-stat { margin-top: .65rem; font-size: .9rem }
#lighting-total { margin-inline-start: .35rem; color: var(--gold); font-variant-numeric: tabular-nums }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 750 }
h1 { font: 500 clamp(2.7rem, 6vw, 4.75rem)/1 Georgia, serif; margin: .4rem 0 .55rem; letter-spacing: -.045em }
h2 { font-size: 1.15rem; margin: 0 }
p { color: var(--muted); line-height: 1.5 }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; margin-bottom: 1.1rem; overflow: hidden }
.panel-head, .padding { padding: 1rem 1.25rem }
.panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; border-bottom: 1px solid var(--line) }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center }
.table-wrap { overflow-x: auto }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .9rem; white-space: nowrap }
th, td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line) }
th { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; background: var(--table-head) }
tbody tr:last-child td { border-bottom: 0 }
td:first-child { font-weight: 700 }
td small { color: var(--muted); display: block; margin-top: .23rem; font-weight: 450 }
time, .timer { font-variant-numeric: tabular-nums }
.timer { font-weight: 750; color: var(--green) }
.timer[data-level="soon"] { color: var(--gold) }
.timer[data-level="urgent"] { color: var(--red) }
.timer[data-level="idle"] { color: var(--muted) }
.worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem }
.world { display: block; border: 1px solid var(--line); border-radius: .55rem; padding: 1rem; background: var(--card); font-weight: 700 }
.footer { color: var(--muted); font-size: .81rem; padding-block: 1.5rem 2.6rem }
#notice { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--gold); margin-top: 0 }
dialog { background: var(--panel); border: 1px solid var(--dialog-line); color: var(--ink); border-radius: .8rem; width: min(31rem, calc(100% - 2rem)); padding: 1.4rem }
dialog::backdrop { background: #000a }
form { display: grid; gap: .85rem; margin-top: .9rem }
label { display: grid; gap: .35rem; font-weight: 650; font-size: .9rem }
input, select { padding: .63rem .7rem; border-radius: .4rem; border: 1px solid var(--input-line); background: var(--input-bg); color: var(--ink); min-width: 0; width: 100% }
.form-error { margin: 0; color: var(--red) }
.list { list-style: none; padding: 0; margin: 0 }
.list li { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--line) }
.list li:last-child { border: 0 }
.muted { color: var(--muted) }
@media (max-width: 600px) { th, td { padding: .65rem .7rem } .top-inner { gap: .5rem } }