root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  --page:#f3f6fa; --surface:#fff; --raised:#f5f8fb; --text:#183548;
  --muted:#526779; --border:#cbd6e2; --brand:#185c7d; --brand-hover:#104867;
  --notice:#e7f1f8; --danger:#a32d37; --focus:#247eaf;
  --shadow:0 12px 35px rgb(20 45 65 / 7%);
  color:var(--text); background:var(--page); line-height:1.55;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --page:#101923; --surface:#182532; --raised:#203140; --text:#edf4fa;
  --muted:#b7c8d6; --border:#425b6d; --brand:#a2ddfa; --brand-hover:#c2eaff;
  --notice:#203748; --danger:#ffb0b9; --focus:#a2ddfa;
  --shadow:0 12px 35px rgb(0 0 0 / 18%);
}
*{box-sizing:border-box}
body{margin:0}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:18px max(24px,5%);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
header img{width:190px;height:auto;background:#fff;padding:8px;border-radius:8px}
header>span{border-left:1px solid var(--border);padding-left:22px;font-weight:650}
#identity{margin-left:auto;overflow-wrap:anywhere;font-size:14px}
.theme-control{display:flex;align-items:center;gap:8px}
.theme-control label{margin:0;font-size:13px;color:var(--muted)}
.theme-control select{width:auto;min-height:40px;padding:6px 10px}
main{max-width:1000px;margin:44px auto;padding:0 24px}
h1{font-size:clamp(25px,4vw,34px);line-height:1.2;letter-spacing:-.025em;margin:0 0 16px}
h2{font-size:22px;line-height:1.3}
form,#application>section,#signin{background:var(--surface);padding:28px;margin:24px 0;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
label,legend{font-weight:650;display:block;margin:14px 0 8px}
select,textarea,input[type="search"]{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;font:inherit;color:var(--text);background:var(--surface)}
input[type="search"]{margin-bottom:12px}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type="checkbox"]{width:18px;height:18px;accent-color:var(--brand);flex:none;margin:3px 0 0}
fieldset{border:0;padding:0;margin:24px 0;min-width:0}
.task{padding:16px;background:var(--raised);border:1px solid var(--border);border-radius:10px;margin:12px 0;overflow-wrap:anywhere}
.task label{display:flex;align-items:flex-start;gap:12px;margin:0;cursor:pointer;min-height:28px}
.task p{margin:8px 0;font-size:14px}
.task details{margin-top:12px;font-size:14px}
.task summary{cursor:pointer;font-weight:600}
button,.button{background:var(--brand);color:#fff;border:1px solid transparent;border-radius:8px;padding:11px 17px;min-height:44px;cursor:pointer;font:inherit;font-weight:600;display:inline-block;text-decoration:none;transition:background .15s ease,box-shadow .15s ease}
[data-theme="dark"] button,[data-theme="dark"] .button{color:#10202d}
button:hover,.button:hover{background:var(--brand-hover)}
button:disabled{opacity:.6;cursor:not-allowed}
button.secondary,.task .remove-task{background:var(--surface);border-color:var(--border);color:var(--text)}
.secondary{margin-left:10px}
.task .remove-task{float:right;margin-left:12px;padding:7px 12px;font-size:13px}
.notice{background:var(--notice);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:8px;padding:16px;line-height:1.6}
.card{border-top:1px solid var(--border);padding:20px 0}
.card p{white-space:pre-wrap;overflow-wrap:anywhere}
.badge{font-size:12px;font-weight:700;color:var(--brand)}
.small{font-size:13px;color:var(--muted)}
#route{padding:12px;background:var(--raised);border-radius:8px;font-size:14px}
#task-count{margin-left:12px}
#message{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--danger)}
#message:empty{display:none}
footer{text-align:center;color:var(--muted);padding:25px;font-size:13px}
a{color:var(--brand);text-underline-offset:3px}
[hidden]{display:none!important}
dialog{width:min(740px,calc(100% - 32px));max-height:85vh;max-height:85dvh;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
dialog::backdrop{background:rgb(4 15 25 / 65%)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dialog-heading h2{margin:0}
#task-options{max-height:48vh;overflow:auto;overscroll-behavior:contain;margin-bottom:16px;padding-right:4px}
:where(button,input,select,textarea,summary,a):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:640px){header{gap:12px;padding:16px}header img{width:145px}header>span{font-size:14px;padding-left:12px}#identity{margin-left:0;width:100%}main{margin-top:28px;padding:0 16px}form,#application>section,#signin{padding:20px}.theme-control{margin-left:auto}.theme-control label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{padding:20px}.task .remove-task{float:none;display:block;margin:0 0 10px auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}