:root {
  color-scheme: light dark;
  --bg: #edf4f8;
  --surface: #ffffff;
  --ink: #17344a;
  --muted: #5c7485;
  --accent: #1769aa;
  --accent-soft: #d7ecfb;
  --line: #dce7ed;
  --warning-bg: #fff3d7;
  --warning-ink: #75500b;
  --shadow: 0 12px 32px rgb(32 69 94 / 9%);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { width: min(100%, 560px); margin: 0 auto; padding: 24px 16px 28px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.eyebrow { margin-bottom: 4px; color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .11em; }
.notice, .error { border-radius: 12px; padding: 12px 14px; font-size: .9rem; }
.notice { background: var(--warning-bg); color: var(--warning-ink); }
.error { background: #ffe1df; color: #7b2119; }
.main-card { margin-bottom: 26px; padding: 24px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.main-card h2 { margin: 7px 0; font-size: clamp(1.65rem, 7vw, 2rem); line-height: 1.15; letter-spacing: -.04em; }
.detail, .hint { margin-bottom: 0; color: var(--muted); font-size: .9rem; }
.hours-section { margin-bottom: 22px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 9px; }
.section-heading h2 { margin-bottom: 0; font-size: 1.1rem; }
.hours-list, .selector-card { padding: 8px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.hour-row { display: grid; grid-template-columns: 48px 1fr 62px; align-items: center; gap: 10px; min-height: 39px; }
.hour-time, .hour-amount { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.hour-amount { text-align: right; }
.bar-track { height: 8px; overflow: hidden; border-radius: 10px; background: var(--accent-soft); }
.bar { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: #6eb8e8; transition: width .25s ease; }
.bar[data-rain="true"] { background: var(--accent); }
.selector-card { padding: 16px; }
.selector-card label { display: block; margin-bottom: 9px; font-weight: 700; }
.selector-card input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.hint { margin-top: 8px; }
footer { padding-top: 20px; color: var(--muted); font-size: .8rem; text-align: center; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111e28; --surface: #1b2d3a; --ink: #e7f1f6; --muted: #a5bbc8; --accent: #68b9ef; --accent-soft: #263f50; --line: #304653; --warning-bg: #493a1c; --warning-ink: #ffe09b; --shadow: 0 12px 32px rgb(0 0 0 / 20%); }
  .bar { background: #477f9f; }
  .bar[data-rain="true"] { background: var(--accent); }
  .error { background: #502b2b; color: #ffc6c1; }
}