:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #17202c;
  --muted: #5a6575;
  --line: #dde2ea;
  --accent: #1f5fbf;
  --accent-hover: #174c99;
  --ok: #17703a;
  --ok-bg: #e5f4ea;
  --warn: #8a5300;
  --warn-bg: #fdf1dc;
  --bad: #b3261e;
  --bad-bg: #fbe9e7;
  --info: #1f5fbf;
  --info-bg: #e8effb;
  --radius: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151b;
    --card: #1a2029;
    --text: #e6eaf0;
    --muted: #a3adbb;
    --line: #2d3542;
    --accent: #5b9bff;
    --accent-hover: #80b3ff;
    --ok: #6fd394;
    --ok-bg: #173323;
    --warn: #f3bf62;
    --warn-bg: #3a2c12;
    --bad: #ff8f86;
    --bad-bg: #3d1a18;
    --info: #8db8ff;
    --info-bg: #1b2a44;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.45; font-size: 1.05rem; }
.wrap { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
h1 { margin: 0 0 1rem; font-size: 1.6rem; }
h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.muted { color: var(--muted); }

/* Reload */
.reload { text-align: center; padding: 1.5rem 1.2rem; }
form { margin: 0; }
button.primary {
  font: inherit; font-size: 1.35rem; font-weight: 700; width: min(100%, 22rem); min-height: 4rem;
  padding: .9rem 1.5rem; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer;
}
@media (prefers-color-scheme: dark) { button.primary { color: #0b1220; } }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.primary:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button.primary:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.note { margin: .8rem 0 0; color: var(--muted); }
.flash { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 8px; font-weight: 600; text-align: left; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.flash.bad { background: var(--bad-bg); color: var(--bad); }
.last { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-info { background: var(--info-bg); color: var(--info); }
.b-muted { background: var(--line); color: var(--muted); }

/* Schedules */
ul.sched { list-style: none; margin: 0; padding: 0; }
ul.sched li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
ul.sched li:last-child { border-bottom: 0; }

/* Menu-screen sync progress */
.bar-label { margin: 0 0 .6rem; }
progress.bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.25rem;
  border: 0; border-radius: 999px; background: var(--line); overflow: hidden; color: var(--accent); }
progress.bar::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress.bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress.bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
progress.bar.complete { color: var(--ok); }
progress.bar.complete::-webkit-progress-value { background: var(--ok); }
progress.bar.complete::-moz-progress-bar { background: var(--ok); }
.small { font-size: .9rem; margin: .6rem 0 0; }
.fresh, .stale { margin: .8rem 0 0; font-size: .9rem; }
.fresh { color: var(--muted); }
.stale { color: var(--warn); font-weight: 600; }

.foot { color: var(--muted); font-size: .9rem; text-align: center; }
.foot a { color: var(--accent); }