:root {
  color-scheme: light;
  --bg: #f4f8ff;
  --panel: #ffffff;
  --text: #172033;
  --muted: #5c6880;
  --accent: #1769e0;
  --accent-text: #ffffff;
  --warning: #fff2c6;
  --danger: #b42318;
  --border: #d8e0ef;
  font-family: ui-rounded, system-ui, -apple-system, sans-serif;
  font-size: clamp(16px, 4.2vw, 19px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101b2d;
  --panel: #17263c;
  --text: #f1f6ff;
  --muted: #afbdd2;
  --accent: #74adff;
  --accent-text: #071222;
  --warning: #4b3e16;
  --danger: #ff8a80;
  --border: #344760;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
body, button, input, textarea, select { font: inherit; }
header {
  position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: .6rem; padding: max(1rem, env(safe-area-inset-top)) 1rem .8rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px);
}
header a { color: var(--text); text-decoration: none; }
.brand { font-weight: 800; }
nav { display: flex; gap: 1rem; font-size: .88rem; }
main { width: min(100%, 42rem); margin: auto; padding: 1rem 1rem max(2rem, env(safe-area-inset-bottom)); }
.account-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(100%, 42rem); margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right))
  max(1rem, env(safe-area-inset-bottom)); color: var(--muted); font-size: .88rem;
}
.account-footer form { margin: 0; }
.account-footer button { width: auto; min-height: 2.5rem; padding: .45rem .75rem; }
h1 { font-size: 1.75rem; margin: .4rem 0 1.2rem; }
h2 { font-size: 1.2rem; }
.progress-card {
  padding: 1.1rem; overflow: hidden; background: var(--panel);
  border: 1px solid var(--border); border-radius: 1.15rem;
  box-shadow: 0 .7rem 1.8rem color-mix(in srgb, var(--text) 8%, transparent);
}
.progress-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.progress-heading h1 { margin: 0; font-size: 1.35rem; }
.progress-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 1fr);
  align-items: center; gap: 1rem; margin-top: .75rem;
}
.progress-visual { position: relative; min-width: 0; }
.progress-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.progress-track, .progress-arc {
  fill: none; stroke-width: 18; stroke-linecap: round;
}
.progress-track { stroke: var(--border); }
.progress-track-night, .progress-arc-night { stroke-width: 14; }
.progress-arc {
  stroke-dasharray: var(--total-progress) 100; stroke: var(--accent);
}
.progress-arc-night {
  stroke-dasharray: var(--night-progress) 100;
  stroke: color-mix(in srgb, var(--accent) 68%, #08162b);
}
.progress-label { font-family: inherit; text-rendering: geometricPrecision; }
.progress-percent-value { fill: var(--text); font-size: 40px; font-weight: 800; }
.progress-percent-caption {
  fill: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.progress-details { display: grid; gap: 1rem; }
.progress-details article {
  display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .65rem;
}
.progress-details p {
  display: flex; align-items: baseline; gap: .15rem; margin: 0; white-space: nowrap;
}
.progress-details strong { font-size: 1.2rem; }
.progress-details small, .progress-details div > span { color: var(--muted); }
.progress-details div > span { font-size: .78rem; }
.progress-icon {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: .65rem; color: var(--accent); font-size: 1.1rem;
}
.progress-icon-total { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.progress-icon-night {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 68%, #08162b);
}
.progress-icon-night {
  border-radius: 50%;
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.2rem 0; }
.stats article, .detail-card, .drive-row, .warning-card, .live-clock {
  background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem;
}
.stats article { display: grid; gap: .3rem; }
.stats span, .detail-card span { color: var(--muted); font-size: .85rem; }
.actions { display: grid; gap: .75rem; margin: 1.2rem 0; }
.button, button {
  min-height: 3rem; display: grid; place-items: center; width: 100%; border: 1px solid var(--border);
  border-radius: .85rem; padding: .7rem 1rem; background: var(--panel); color: var(--text);
  text-decoration: none; font-weight: 750; cursor: pointer;
}
.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.danger { color: var(--danger); }
.compact { width: auto; min-height: 2.7rem; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.drive-list { display: grid; gap: .7rem; }
.drive-row { display: grid; gap: .25rem; color: var(--text); text-decoration: none; }
.drive-row .drive-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-row small { color: var(--muted); }
.drive-row .drive-contribution { color: var(--accent); font-weight: 700; }
.drive-row em { color: #d97706; font-style: normal; font-weight: 700; }
.history-controls, .drive-group {
  margin-bottom: 1rem; padding: 1rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 1rem;
}
.history-controls > summary, .drive-group > summary { cursor: pointer; font-weight: 750; }
.history-filter { display: grid; gap: .8rem; margin-top: 1rem; }
.history-filter label { display: grid; gap: .4rem; font-weight: 650; }
.history-filter input, .history-filter select { min-width: 0; }
.history-filter input[type="date"] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block;
  inline-size: 100% !important; max-inline-size: 100% !important; min-inline-size: 0 !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
}
.history-filter .two-column { grid-template-columns: minmax(0, 1fr); }
.history-filter .two-column > label, .history-filter .two-column > fieldset { min-width: 0; }
.date-filter-range { max-width: 100%; overflow: clip; }
.filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.weather-filter { grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; margin: 0; }
.weather-filter legend { font-weight: 650; }
.weather-filter .choice { min-height: 2.3rem; }
.filtered-totals { display: grid; gap: .2rem; margin-bottom: 1rem; }
.filtered-totals span, .drive-group summary small { color: var(--muted); }
.drive-groups { display: grid; gap: .7rem; }
.drive-group { margin: 0; }
.drive-group > summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  list-style: none;
}
.drive-group > summary::-webkit-details-marker { display: none; }
.drive-group > summary::before { content: "▸"; font-size: 1.1rem; }
.drive-group[open] > summary::before { content: "▾"; }
.drive-group summary small { text-align: right; font-weight: 500; }
.drive-group .drive-list { margin-top: .9rem; }
.stacked-form { display: grid; gap: 1rem; }
.stacked-form label { display: grid; gap: .4rem; font-weight: 650; }
.muted { color: var(--muted); }
.profile-card { display: grid; gap: .5rem; margin-bottom: .75rem; }
.profile-card details { margin-top: .25rem; }
.profile-card summary { cursor: pointer; font-weight: 700; }
.profile-card details form { margin-top: 1rem; }
input, textarea, select {
  width: 100%; min-height: 3rem; border: 1px solid var(--border); border-radius: .7rem;
  padding: .7rem; background: var(--panel); color: var(--text);
}
.completion-note {
  margin: 0 0 1rem; padding: .7rem .9rem; border-left: .25rem solid var(--accent);
  border-radius: .35rem; background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.drive-saved-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.drive-saved-banner .button { margin: 0; }
.time-editor {
  display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--border);
  border-radius: 1rem; background: var(--panel);
}
.time-editor > label, .time-editor input[type="datetime-local"] {
  min-width: 0; max-width: 100%;
}
.field-warning {
  margin: 0; padding: .6rem .8rem; border-radius: .6rem; font-weight: 650;
  background: var(--warning); color: var(--danger);
}
.field-warning[hidden] { display: none; }
.time-duration { display: grid; gap: .4rem; }
.time-label { font-weight: 650; }
.duration-editor { display: flex; gap: .7rem; }
.duration-part {
  display: flex !important; grid-template-columns: none !important;
  align-items: center; gap: .35rem; font-weight: 650;
}
.duration-part input {
  width: 5rem; min-width: 0; text-align: right; font-variant-numeric: tabular-nums;
}
fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; border: 1px solid var(--border); border-radius: .8rem; }
.choice { display: flex !important; align-items: center; min-height: 2.8rem; }
.choice input { width: 1.4rem; min-height: 1.4rem; margin-right: .4rem; }
.weather-notes { grid-column: 1 / -1; }
.two-column { display: grid; grid-template-columns: 2fr 1fr; gap: .7rem; }
.field-note, .empty { color: var(--muted); font-weight: 400; }
.detail-card { display: grid; gap: 1rem; }
.detail-card div { display: grid; gap: .2rem; overflow-wrap: anywhere; }
.warning-card { background: var(--warning); margin: 1rem 0; }
.live-banner {
  display: block; padding: .9rem; border-radius: .8rem; background: var(--accent);
  color: var(--accent-text); text-align: center; font-weight: 800; text-decoration: none;
}
.live-clock { display: grid; place-items: center; gap: .7rem; min-height: 13rem; text-align: center; }
.live-clock strong { font-variant-numeric: tabular-nums; font-size: clamp(2.5rem, 14vw, 5rem); }
.live-clock small, .live-clock span { color: var(--muted); }
@media (max-width: 360px) {
  .progress-layout { grid-template-columns: 1fr; gap: .4rem; }
  .progress-details { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .progress-details article { grid-template-columns: 1.7rem 1fr; gap: .4rem; }
  .progress-icon { width: 1.7rem; height: 1.7rem; }
  .progress-details strong { font-size: 1rem; }
  .progress-details small { font-size: .7rem; }
  .two-column { grid-template-columns: 1fr; }
}
@media (min-width: 38rem) {
  .history-filter .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-filter legend { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }