:root { color-scheme: light dark; --bg:#f7faf9; --card:#fff; --ink:#152523; --muted:#6e7d7a; --line:#e8efed; --accent:#1e9d8b; --soft:#e6f7f3; }
@media (prefers-color-scheme: dark) { :root { --bg:#101817; --card:#182220; --ink:#eff8f5; --muted:#aebbb8; --line:#293735; --soft:#1b3834; } }
body[data-theme="light"] { --bg:#f7faf9; --card:#fff; --ink:#152523; --muted:#6e7d7a; --line:#e8efed; --soft:#e6f7f3; }
body[data-theme="dark"] { --bg:#101817; --card:#182220; --ink:#eff8f5; --muted:#aebbb8; --line:#293735; --soft:#1b3834; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { max-width:680px; min-height:100dvh; margin:auto; padding:max(20px,env(safe-area-inset-top)) 20px calc(88px + env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:start; margin-bottom:22px; } h1,h2,p { margin:0; } h1 { font-size:32px; letter-spacing:-1.2px; } h2 { letter-spacing:-.5px; } .eyebrow,.muted { color:var(--muted); font-size:14px; } .icon-button { border:1px solid var(--line); color:var(--ink); background:var(--card); border-radius:14px; height:42px; min-width:42px; font-weight:650; }
.screen { display:none; animation:appear .32s ease both; } .screen.active { display:block; } @keyframes appear { from { opacity:.2; transform:translateY(7px) } to { opacity:1; transform:none } }
.card { background:var(--card); border:1px solid var(--line); border-radius:26px; box-shadow:0 10px 35px rgba(32,68,62,.05); } .progress-card { display:flex; align-items:center; gap:22px; padding:21px; } .progress-card h2 { font-size:21px; margin:4px 0; } .progress-ring { --progress:0deg; width:136px; height:136px; flex:0 0 136px; padding:12px; border-radius:50%; background:conic-gradient(var(--accent) var(--progress),var(--soft) 0); transform:rotate(-90deg); transition:background .6s cubic-bezier(.2,.9,.2,1); }.progress-center { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--card); border-radius:50%; transform:rotate(90deg); }.progress-center strong { font-size:26px; letter-spacing:-1px; }.progress-center span { font-size:13px; color:var(--muted); }.success { color:var(--accent); margin-top:7px; font-size:14px; font-weight:650; }
.primary-button,.secondary-button { border:0; border-radius:20px; width:100%; padding:17px; font-weight:700; transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s; }.primary-button { background:var(--accent); color:white; margin:18px 0; display:flex; justify-content:center; align-items:center; gap:10px; }.primary-button svg { fill:currentColor; width:20px; height:26px; }.primary-button:active { transform:scale(.97); }.secondary-button { color:var(--accent); background:var(--soft); }.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.stat { min-height:98px; padding:17px; display:flex; flex-direction:column; gap:8px; }.stat strong { font-size:25px; }.reminder-card { display:flex; align-items:center; gap:12px; padding:17px; margin-top:12px; }.reminder-card div { display:flex; flex-direction:column; gap:3px; }.small-icon { width:23px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
nav { position:fixed; z-index:5; display:flex; justify-content:space-around; align-items:center; bottom:0; left:0; right:0; height:calc(68px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(16px); border-top:1px solid var(--line); }.nav-item { min-width:75px; color:var(--muted); background:none; border:0; display:flex; gap:4px; flex-direction:column; align-items:center; font-size:11px; }.nav-item.active { color:var(--accent); font-weight:700; }.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#history-screen h2,#settings-screen h2 { margin:8px 0 18px; }.history-day { margin:0 0 18px; }.day-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--muted); margin:0 4px 8px; }.record-list { overflow:hidden; }.record { display:flex; padding:15px 17px; align-items:center; border-bottom:1px solid var(--line); }.record:last-child { border:0; }.record button { color:var(--muted); background:none; border:0; margin-left:auto; }.empty { color:var(--muted); text-align:center; padding:55px 20px; }.settings-list { overflow:hidden; }.settings-list label { min-height:58px; padding:11px 17px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }.settings-list label span { margin-right:auto; }.settings-list input[type=number],.settings-list select { max-width:130px; text-align:right; color:var(--ink); background:transparent; border:0; outline:0; }.settings-list em { color:var(--muted); font-style:normal; }.settings-list input[type=checkbox] { width:42px; height:25px; accent-color:var(--accent); }.text-button { border:0; background:none; color:var(--accent); padding:15px 17px; font-weight:650; text-align:left; }.footnote { color:var(--muted); font-size:13px; line-height:1.45; margin:15px 5px; }
dialog { border:0; padding:0; border-radius:30px; background:transparent; color:var(--ink); width:min(92vw,420px); box-shadow:0 25px 70px rgba(0,0,0,.25); } dialog::backdrop { background:rgba(15,30,27,.36); backdrop-filter:blur(4px); }.dialog-card { position:relative; padding:30px 23px 24px; background:var(--card); text-align:center; }.dialog-card h2 { margin:10px 0 16px; font-size:22px; }.drop-illustration svg { width:49px; height:63px; fill:var(--accent); animation:drop .8s cubic-bezier(.2,.9,.2,1) infinite alternate; } @keyframes drop { to { transform:translateY(4px) scale(.96) } }.dialog-close { position:absolute; right:15px; top:12px; color:var(--muted); background:none; border:0; font-size:27px; }.dialog-card .primary-button { margin:0 0 10px; }.custom-row { display:flex; gap:8px; margin-top:10px; }.custom-row input { min-width:0; flex:1; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px; }.custom-row .text-button { padding:10px 4px; white-space:nowrap; }
@media (min-width:650px) { .app-shell { padding-top:40px; }.progress-card { padding:28px; }.screen.active { max-width:620px; margin:auto; } }