:root{--bg: var(--tg-theme-bg-color, #ffffff);--secondary-bg: var(--tg-theme-secondary-bg-color, #efeff4);--section-bg: var(--tg-theme-section-bg-color, #ffffff);--text: var(--tg-theme-text-color, #000000);--hint: var(--tg-theme-hint-color, #636368);--section-header: var(--tg-theme-section-header-text-color, #636368);--link: var(--tg-theme-link-color, #1f6fb2);--button: var(--tg-theme-button-color, #1f6fb2);--button-text: var(--tg-theme-button-text-color, #ffffff);--separator: var(--tg-theme-section-separator-color, #d9d9de);--destructive: var(--tg-theme-destructive-text-color, #c62828);--taken: #176e33;--taken-bg: #e3f4e8;--missed: #b3261e;--missed-bg: #fbe4e2;--due: #8a5300;--due-bg: #fff1d6;--pending: #55555b;--pending-bg: #ededf0;--space-xs: 4px;--space-s: 8px;--space-m: 12px;--space-l: 16px;--space-xl: 20px;--space-2xl: 24px;--radius-s: 8px;--radius-m: 10px;--radius-l: 12px;--target-min: 44px;--font: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}:root[data-scheme=dark]{color-scheme:dark;--taken: #7bd88f;--taken-bg: #173d23;--missed: #ff8a80;--missed-bg: #4a1d1a;--due: #ffc56b;--due-bg: #45320f;--pending: #c2c2c8;--pending-bg: #2e2e33}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font);font-size:17px;line-height:26px;color:var(--text);background:var(--secondary-bg);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}a{color:var(--link);text-decoration:none}img{display:block}.title-l{font-size:24px;line-height:32px;font-weight:700}.title-m{font-size:20px;line-height:28px;font-weight:600}.body-l{font-size:17px;line-height:26px}.strong{font-weight:600}.body-m{font-size:15px;line-height:22px}.label-m{font-size:15px;line-height:20px;font-weight:500}.caption{font-size:14px;line-height:20px;color:var(--hint)}.hint{color:var(--hint)}.page{min-height:100vh;display:flex;flex-direction:column;background:var(--secondary-bg)}.page-header{position:sticky;top:0;z-index:5;height:56px;display:grid;grid-template-columns:88px 1fr 88px;align-items:center;background:var(--bg);border-bottom:1px solid var(--separator);padding:0 8px}.page-header h1{margin:0;text-align:center;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-link{display:flex;align-items:center;gap:2px;min-height:var(--target-min);background:none;border:0;color:var(--link);cursor:pointer;padding:0 4px}.content{flex:1;padding:var(--space-l);display:flex;flex-direction:column;gap:var(--space-xl)}.content.tight{gap:var(--space-l)}.with-main-button{padding-bottom:96px}.with-tabbar{padding-bottom:80px}.group{display:flex;flex-direction:column;gap:6px}.group-header{font-size:14px;line-height:20px;font-weight:500;color:var(--section-header);padding:0 4px}.group-footer{font-size:14px;line-height:20px;color:var(--hint);padding:0 4px}.section{background:var(--section-bg);border-radius:var(--radius-l);overflow:hidden}.section>*+*{border-top:1px solid var(--separator)}.cell{width:100%;min-height:52px;display:flex;align-items:center;gap:8px;padding:13px 12px 13px 16px;background:none;border:0;text-align:left}button.cell{cursor:pointer}button.cell:active,button.pill-row:active{background:var(--secondary-bg)}.cell-label{flex:1}.cell-value{color:var(--hint)}.cell.destructive .cell-label{color:var(--destructive)}.chevron{color:var(--hint);flex:none}.pill-row{width:100%;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:none;border:0;text-align:left}button.pill-row{cursor:pointer}.pill-photo{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--secondary-bg)}.pill-text{flex:1;min-width:0;display:flex;flex-direction:column}.pill-name{font-weight:600}.pill-detail{font-size:15px;line-height:22px;color:var(--hint)}.chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;font-size:14px;font-weight:500;white-space:nowrap;flex:none}.chip svg{width:16px;height:16px}.chip.taken{color:var(--taken);background:var(--taken-bg)}.chip.missed{color:var(--missed);background:var(--missed-bg)}.chip.due{color:var(--due);background:var(--due-bg)}.chip.pending,.chip.skipped{color:var(--pending);background:var(--pending-bg)}.card{background:var(--section-bg);border-radius:var(--radius-l);padding:16px;display:flex;flex-direction:column;gap:8px}.banner{border-radius:var(--radius-l);padding:10px 14px;display:flex;flex-direction:column;gap:2px}.banner.missed{background:var(--missed-bg)}.banner.missed .banner-title{color:var(--missed)}.banner.taken{background:var(--taken-bg)}.banner.taken .banner-title{color:var(--taken)}.banner.due{background:var(--due-bg)}.banner.due .banner-title{color:var(--due)}.banner-title{font-weight:600}.progress{height:8px;border-radius:4px;background:var(--secondary-bg);overflow:hidden}.progress>div{height:100%;background:var(--taken)}.dot{width:8px;height:8px;border-radius:4px;display:inline-block;margin-right:6px}.link-row{display:flex;align-items:center;gap:8px;min-height:var(--target-min);color:var(--link);background:none;border:0;padding:0;cursor:pointer;width:100%;text-align:left}.link-row:disabled{opacity:.45;cursor:default}.link-row .grow{flex:1}.segmented{display:flex;gap:4px;padding:4px;background:var(--secondary-bg);border-radius:var(--radius-m)}.segmented button{flex:1;min-height:44px;border:0;border-radius:var(--radius-s);background:none;cursor:pointer;color:var(--text)}.segmented button[aria-pressed=true]{background:var(--section-bg);font-weight:600;box-shadow:0 1px 3px #00000029}.segmented.primary{background:var(--section-bg)}.segmented.primary button[aria-pressed=true]{background:var(--button);color:var(--button-text);box-shadow:none}.stepper{display:flex;align-items:center;background:var(--secondary-bg);border-radius:var(--radius-m)}.stepper button{width:44px;height:44px;border:0;background:none;color:var(--link);font-size:22px;cursor:pointer}.stepper button:disabled{color:var(--hint);opacity:.5}.stepper span{min-width:44px;text-align:center;font-weight:600}.time-input,.text-input,.select-input{font:inherit;color:var(--text);background:var(--secondary-bg);border:0;border-radius:var(--radius-s);min-height:44px;padding:0 10px}.text-input{width:100%}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:51px;height:31px;border-radius:16px;background:var(--separator);position:relative;cursor:pointer;flex:none;margin:0}.switch:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:14px;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .15s}.switch:checked{background:var(--taken)}.switch:checked:after{transform:translate(20px)}.radio{width:24px;height:24px;flex:none}.main-button-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:12px 16px calc(24px + env(safe-area-inset-bottom));background:var(--bg)}.main-button{width:100%;min-height:48px;border:0;border-radius:var(--radius-l);background:var(--button);color:var(--button-text);font-weight:600;cursor:pointer}.main-button:disabled{opacity:.5;cursor:default}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;background:var(--bg);border-top:1px solid var(--separator);padding-bottom:env(safe-area-inset-bottom)}.tabbar a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--hint);font-size:12px;line-height:16px}.tabbar a.active{color:var(--link)}.tabbar svg{width:24px;height:24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 11px}.grid-card{background:var(--section-bg);border-radius:var(--radius-l);padding:8px;border:2px solid transparent;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer}.grid-card[aria-pressed=true]{border-color:var(--link)}.grid-card img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius-s)}.grid-card .name{font-size:14px;line-height:20px}.search{display:flex;align-items:center;gap:8px;background:var(--section-bg);border-radius:var(--radius-m);padding:0 12px;min-height:44px;color:var(--hint)}.search input{flex:1;border:0;background:none;font:inherit;color:var(--text);outline:none;min-height:44px}.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px}.bar{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;font-size:13px}.bar .fill{width:100%;max-width:28px;border-radius:6px 6px 2px 2px}.bar .fill.full{background:var(--taken)}.bar .fill.part{background:var(--due)}.code-boxes{display:flex;gap:8px;position:relative}.code-boxes span{width:44px;height:52px;border-radius:var(--radius-m);background:var(--section-bg);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600}.code-boxes span.active{outline:2px solid var(--link)}.code-boxes input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;font-size:16px}.snapshot-img{width:100%;border-radius:var(--radius-l);background:#111;aspect-ratio:4 / 3;object-fit:cover}.loading{display:flex;align-items:center;justify-content:center;gap:10px;aspect-ratio:4 / 3;border-radius:var(--radius-l);background:#111;color:#fff}.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.spinner.dark{border-color:var(--separator);border-top-color:var(--link)}@keyframes spin{to{transform:rotate(360deg)}}.center{display:flex;justify-content:center;align-items:center;min-height:40vh}.mock-note{font-size:12px;text-align:center;color:var(--hint);padding:4px 0 0}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:20;display:flex;align-items:flex-end}.sheet{width:100%;background:var(--secondary-bg);border-radius:16px 16px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}