:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400}html,body,#root{margin:0;min-height:100%}*{box-sizing:border-box}.app-shell{--top-nav-height: 3.4rem;min-height:100vh;background:#f3f4f6;color:#111827}.loading-shell{display:grid;place-items:center}.top-nav{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;min-height:var(--top-nav-height);padding:.5rem .85rem;border-bottom:1px solid #d1d5db;background:#fff}.top-left,.top-right{display:flex;align-items:center;gap:.5rem}.icon-button,.ghost-button,.brand-button,.tab-button,.primary-button,.task-menu button,.task-color,.label-trigger,.label-option,.task-label-selector button{border:0;background:transparent;cursor:pointer;font:inherit}.icon-button{width:2rem;height:2rem;border-radius:.5rem;border:1px solid #d1d5db;background:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:1.15rem}.brand-button{font-weight:700;font-size:1.05rem}.ghost-button{padding:.4rem .65rem;border-radius:.5rem;border:1px solid #d1d5db;background:#fff}.menu-wrap{position:relative}.menu-popover{position:absolute;top:2.3rem;left:0;width:min(90vw,240px);padding:.7rem;border-radius:.5rem;border:1px solid #d1d5db;background:#fff;box-shadow:0 10px 30px #0000001a;display:grid;gap:.5rem}.menu-popover label{font-size:.9rem;font-weight:600}.menu-popover select{width:100%;height:2rem}.progress-ring{position:relative;width:36px;height:36px;display:grid;place-items:center;font-size:.67rem;color:#374151}.progress-ring svg{position:absolute;inset:0}.ring-track{stroke:#d1d5db}.ring-progress{stroke:#2563eb;transition:stroke-dashoffset .18s ease}.tab-bar{position:sticky;top:var(--top-nav-height);z-index:55;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #d1d5db;background:#fff}.tab-button{padding:.7rem .35rem;border-bottom:2px solid transparent;font-weight:600}.tab-button.active{color:#2563eb;border-bottom-color:#2563eb}.content{display:grid;gap:.8rem;padding:.8rem;max-width:900px;margin:0 auto}.composer-card,.task-list{background:#fff;border:1px solid #d1d5db;border-radius:.75rem;padding:.8rem}.composer-card h1{font-size:1rem;margin:0 0 .65rem}.composer{display:grid;gap:.6rem}.composer input[type=text],.composer input[type=date]{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.55rem .65rem;font:inherit}.composer-text-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5rem}.composer-text-row input[type=text]{min-width:0}.composer-meta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem}.composer-meta-row input[type=date]{min-width:0}.recurring-menu-wrap{position:relative}.recurring-trigger.active{border-color:#2563eb;color:#2563eb}.recurring-menu{position:absolute;top:2.1rem;left:0;right:auto;z-index:30}.task-menu.recurring-menu button,.task-frequency-submenu button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:.55rem .8rem}.task-menu.recurring-menu button:hover,.task-menu.recurring-menu button.active,.task-frequency-submenu button:hover{background:#f3f4f6}.recurring-option-check{width:1rem;text-align:right}.primary-button{border-radius:.5rem;background:#2563eb;color:#fff;padding:.6rem;font-weight:600}.primary-button:disabled{background:#9ca3af;cursor:not-allowed}.today-label{margin:.6rem 0 0;font-size:.88rem;color:#4b5563}.label-select-wrap{position:relative;display:inline-flex;align-items:center;gap:.35rem}.label-trigger,.label-option,.task-label-selector button{display:inline-flex;align-items:center;gap:.5rem}.label-trigger{justify-content:flex-start;width:auto;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem .65rem;background:#fff;white-space:nowrap}.label-dropdown,.task-label-selector{position:absolute;top:calc(100% + .25rem);left:0;width:max-content;min-width:100%;max-width:min(22rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow-y:auto;overflow-x:hidden;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;box-shadow:0 10px 24px #0000001f;z-index:30}.label-option,.task-label-selector button{width:100%;text-align:left;padding:.45rem .6rem}.label-option{justify-content:flex-start;gap:.4rem}.label-option:hover,.task-label-selector button:hover{background:#f9fafb}.label-dot,.task-color{width:1rem;height:1rem;border-radius:999px;border:2px solid rgba(17,24,39,.2);flex-shrink:0}.task-list{display:grid;gap:.6rem}.task-row-shell{position:relative;overflow:visible}.task-row-shell.menu-open{z-index:200}.task-row-shell.menu-open .task-row{z-index:210}.task-row-shell.menu-open .task-menu-wrap{position:relative;z-index:220}.swipe-hint{position:absolute;inset:0;border-radius:.65rem;display:flex;align-items:center;justify-content:center;font-size:.84rem;font-weight:600;pointer-events:none;z-index:0;opacity:0;transition:opacity .1s ease}.swipe-hint span{white-space:nowrap}.swipe-hint.show{opacity:1}.swipe-hint.move-done{background:#22c55e;color:#111827;justify-content:flex-end;padding-right:.75rem}.swipe-hint.delete{background:#ef4444;color:#fff;justify-content:flex-end;padding-right:.75rem}.swipe-hint.save-later{background:#f97316;color:#111827;justify-content:flex-start;padding-left:.75rem}.swipe-hint.undo{background:#facc15;color:#111827;justify-content:flex-start;padding-left:.75rem}.task-row{position:relative;z-index:1;display:grid;grid-template-columns:auto auto auto 1fr auto;align-items:center;gap:.5rem;border:1px solid #e5e7eb;border-radius:.65rem;padding:.6rem;background:#fff}.task-main{min-width:0}.task-date,.task-edit-input{border:1px solid #d1d5db;border-radius:.4rem;padding:.3rem .45rem}.task-edit-input{width:100%;font:inherit}.task-text{margin:0;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.task-text.done{color:#6b7280;text-decoration:line-through}.recurring-badge{color:#4b5563;font-size:.83rem}.task-menu-wrap,.task-label-selector-wrap{position:relative}.task-menu,.task-label-selector{right:0;left:auto;width:12.5rem}.recurring-menu-wrap .task-menu.recurring-menu{left:0;right:auto;width:min(16rem,calc(100vw - 2rem))}.task-menu{position:absolute;top:2.1rem;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;box-shadow:0 10px 24px #0000001f;z-index:230;overflow:visible}.task-menu.open-up{top:auto;bottom:calc(100% + .35rem)}.task-menu button{display:block;width:100%;text-align:left;padding:.55rem .8rem}.task-menu button:hover{background:#f3f4f6}.task-label-selector-wrap{z-index:95}.task-label-selector{position:absolute;top:.15rem}.task-frequency-submenu{position:absolute;top:2.3rem;right:calc(100% + .35rem);width:12.5rem;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;box-shadow:0 10px 24px #0000001f;z-index:240}.task-frequency-submenu.open-up{top:auto;bottom:calc(100% + .25rem)}.task-edit-modal{position:fixed;z-index:260;transform:translateY(-100%);background:#fff;border:1px solid #d1d5db;border-radius:.65rem;padding:.65rem;box-shadow:0 14px 28px #0000002e;display:grid;gap:.55rem}.task-edit-modal-input{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.55rem .65rem;font:inherit}.task-edit-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}.empty-state{margin:0;color:#4b5563;text-align:center;padding:1.2rem}.toast-layer{position:fixed;top:calc(var(--top-nav-height) + .45rem);left:0;right:0;z-index:80;display:grid;justify-items:center;gap:.4rem;pointer-events:none}.toast{background:#111827;color:#fff;border-radius:999px;padding:.42rem .7rem;font-size:.86rem;box-shadow:0 8px 22px #0003}.swatch-hint{position:fixed;z-index:85;transform:translate(-50%,-100%);background:#111827;color:#fff;border-radius:.5rem;padding:.32rem .5rem;font-size:.78rem;line-height:1.15;box-shadow:0 8px 18px #0003;pointer-events:none}@media(min-width:768px){.content{padding:1rem}.composer{grid-template-columns:1fr auto auto auto;align-items:end}.composer-meta-row{display:contents}.label-trigger{width:100%}.label-select-wrap{display:grid;gap:.4rem}}@media(max-width:640px){.app-shell{--top-nav-height: 3.2rem}.task-row{grid-template-columns:auto auto auto 1fr}.task-menu-wrap{grid-column:1 / -1;justify-self:end;position:relative}.task-label-selector{width:min(90vw,16rem);right:0}.recurring-menu-wrap .task-menu.recurring-menu{position:absolute;top:calc(100% + .35rem);left:0;right:auto;max-height:min(65dvh,18rem);overflow-y:auto}.task-row-shell .task-menu{position:absolute;top:calc(100% + .35rem);right:0;left:auto;width:min(90vw,16rem);max-height:min(70dvh,24rem);overflow-y:auto;z-index:95}.task-row-shell .task-menu.open-up{top:auto;bottom:calc(100% + .35rem)}.task-row-shell .task-frequency-submenu{position:absolute;top:calc(100% + .25rem);right:0;left:auto;width:min(90vw,16rem);box-shadow:0 10px 24px #0000001f;border-color:#d1d5db;z-index:240}.task-row-shell .task-frequency-submenu.open-up{top:auto;bottom:calc(100% + .25rem)}.task-edit-modal{max-width:calc(100vw - 1rem)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}