:root {
	--bg: #eef1f3; --surface: #fff; --ink: #16212c; --muted: #5b6b79; --line: #d5dce2;
	--accent: #0b6e66; --on-accent: #fff; --danger: #b3261e; --overdue: #b3261e;
}
@media (prefers-color-scheme: dark) {
	:root { --bg: #0f151b; --surface: #17202a; --ink: #e6ecf1; --muted: #93a3b1; --line: #26323d; --accent: #4fd1c0; --on-accent: #06201d; --danger: #ff8a80; --overdue: #ff8a80; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; }
#app { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
main { flex: 1; padding: 0 16px 96px; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 9px 14px; cursor: pointer; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
button.link { border: 0; background: none; color: var(--muted); padding: 4px 8px; }
button:disabled { opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 4px; }
.day { position: sticky; top: 0; background: var(--bg); padding: 14px 0 6px; font-weight: 700; font-size: 15px; z-index: 1; }
.day.over { color: var(--overdue); }
.task { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; padding-top: 1px; }
.time small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.task h3 { margin: 0; font-size: 16px; font-weight: 600; }
.task p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.check { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; }
.empty { text-align: center; color: var(--muted); padding: 48px 12px; }
.msg { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.err { color: var(--danger); }
nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav div { max-width: 640px; margin: 0 auto; display: flex; }
nav button { flex: 1; border: 0; border-radius: 0; background: none; padding: 14px 4px; color: var(--muted); }
nav button[aria-current="page"] { color: var(--accent); font-weight: 700; }
#toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; max-width: 90%; opacity: 0; pointer-events: none; transition: opacity .2s; font-size: 14px; }
#toast.on { opacity: 1; }
.login { padding: 15vh 20px 20px; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }