/* Fonts: Fredoka (logo), Poppins (headings), Inter (body) */
:root{--bg:#f6f7f9;--fg:#1b1f24;--card:#ffffff;--mut:#5b6370;--acc:#1f6fd1;--on-acc:#ffffff;--ok:#1a7f45;--bd:#c9ced6;--focus:#1f6fd1;
--f-logo:'Fredoka',ui-rounded,system-ui,sans-serif;--f-head:'Poppins',system-ui,sans-serif;--f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color-scheme:light}
[data-theme=dark]{--bg:#111418;--fg:#e8eaed;--card:#1c2026;--mut:#a9afb7;--acc:#6aa9f4;--on-acc:#0b1320;--ok:#3ccf7a;--bd:#3a414b;--focus:#8cc0ff;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 var(--f-body);background:var(--bg);color:var(--fg)}
.app{max-width:520px;margin:auto;padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.logo{font-family:var(--f-logo);font-weight:600;font-size:1.75rem;margin:8px 0}
h2,h3{font-family:var(--f-head);font-weight:600}h2{font-size:1.25rem;margin:12px 0 4px}
button{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 14px;cursor:pointer;min-height:44px;min-width:44px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button.small{font-size:.9rem;margin-left:6px}.primary{background:var(--acc);color:var(--on-acc);border:0;flex:1;font-weight:500}
.date,.hint,.progress-text{color:var(--mut);margin:0 0 12px}
.progress-wrap{margin-bottom:16px}.progress{height:10px;background:var(--bd);border-radius:6px;overflow:hidden}
.bar{height:100%;background:var(--ok);transition:width .3s}.progress-text{margin:6px 0 0;font-size:.9rem}
.slot{margin-bottom:16px}.slot h3{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem;margin:0 0 6px}
.remaining{color:var(--mut);font:400 .9rem var(--f-body)}
.med{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-bottom:6px;min-height:52px}
.tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--mut);display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.med.taken .tick{background:var(--ok);border-color:var(--ok)}.med.taken{color:var(--mut);text-decoration:line-through}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px;margin-bottom:10px}
.row{display:flex;gap:8px}input{flex:1;font:inherit;padding:10px;min-height:44px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip{border-radius:22px;font-size:.9rem}
.chip.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}.add{width:100%;margin-bottom:10px;border-style:dashed}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}