@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";:root{--ink:#1d2b26;--muted:#778078;--line:#e4e9e2;--paper:#fff;--mint-dark:#47745a;--sage:#86a88e}*{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer}#root{min-height:100svh}.app-shell{width:min(100%,620px);margin:0 auto;padding:28px 24px 38px}.topbar{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding-bottom:28px;display:flex}.brand-mark{background:var(--ink);color:#d6eed9;border-radius:8px;place-items:center;width:28px;height:28px;display:grid}.brand-mark svg{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;width:16px}.brand-name{color:var(--ink);letter-spacing:-.04em;font-size:17px;font-weight:700}.date-label{color:var(--muted);margin-left:auto;font-size:12px}.refresh-button{border:1px solid var(--line);background:var(--paper);width:31px;height:31px;color:var(--ink);border-radius:8px;flex:0 0 31px;place-items:center;padding:0;display:grid}.refresh-button:hover{border-color:var(--sage)}.refresh-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9px;width:16px}.habits-section{padding:52px 0 34px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:18px;display:flex}.section-kicker,.add-form label{color:var(--sage);letter-spacing:.16em;text-transform:uppercase;font-size:10px;font-weight:700}h1,h2,h3,p{margin:0}h1{color:var(--ink);letter-spacing:-.06em;margin-top:8px;font-size:38px;font-weight:600;line-height:1}.habit-count{color:var(--muted);font-size:12px}.habit-list{gap:10px;display:grid}.habit-card{border:1px solid var(--line);background:var(--paper);border-radius:12px;align-items:center;gap:14px;padding:15px 16px;transition:border-color .2s,background .2s;display:flex}.habit-card:hover{border-color:#c6d8c9}.habit-card.is-complete{background:#f7fbf7;border-color:#c4dfca}.check-button{color:#fff;background:0 0;border:2px solid #cbd5cc;border-radius:50%;flex:0 0 26px;place-items:center;width:26px;height:26px;padding:0;transition:all .2s;display:grid}.check-button:hover{border-color:var(--mint-dark)}.check-button:disabled{cursor:wait;opacity:.7}.check-button svg{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;width:15px}.is-complete .check-button{border-color:var(--mint-dark);background:var(--mint-dark)}.habit-details{flex:1;min-width:0}.habit-details.is-editing{display:flex}.habit-details h3{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.is-complete .habit-details h3{-webkit-text-decoration:line-through #99b89f;text-decoration:line-through #99b89f}.habit-details span{color:var(--muted);margin-top:3px;font-size:11px;display:block}.streak{text-align:left;background:0 0;border:0;align-items:baseline;gap:4px;min-width:56px;padding:3px 0;display:flex}.streak:hover .streak-number{color:var(--mint-dark)}.streak-number{color:var(--ink);font-size:19px;font-weight:600}.streak-label{color:var(--muted);font-size:10px;line-height:1.05}.habit-actions{position:relative}.habit-menu-button{color:#a2ada4;background:0 0;border:0;border-radius:6px;place-items:center;width:27px;height:27px;padding:0;display:grid}.habit-menu-button:hover,.habit-menu-button[aria-expanded=true]{color:var(--ink);background:#eef4ee}.habit-menu-button svg{fill:currentColor;width:16px}.habit-menu{z-index:2;border:1px solid var(--line);background:var(--paper);border-radius:8px;min-width:126px;padding:4px;position:absolute;top:31px;right:0;box-shadow:0 8px 20px #2e46341f}.habit-menu button{width:100%;color:var(--ink);text-align:left;white-space:nowrap;background:0 0;border:0;border-radius:5px;padding:7px 8px;font-size:11px}.habit-menu button:hover{background:#f1f6f1}.edit-name-input{border:1px solid var(--sage);width:100%;min-width:0;color:var(--ink);border-radius:6px;outline:0;padding:5px 7px;font-size:16px}.edit-actions{align-items:center;gap:5px;display:flex}.edit-actions button{color:var(--muted);background:0 0;border:0;border-radius:5px;padding:5px 6px;font-size:10px}.edit-actions button:hover{color:var(--ink)}.edit-actions .save-edit{background:var(--ink);color:#fff}.edit-actions .save-edit:disabled{cursor:not-allowed;opacity:.35}.dialog-backdrop{z-index:10;background:#1d2b2640;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.reminder-dialog{background:var(--paper);border-radius:14px;width:min(100%,360px);padding:22px;box-shadow:0 18px 50px #1d2b262e}.dialog-heading{align-items:center;gap:11px;display:flex}.dialog-icon{width:32px;height:32px;color:var(--mint-dark);background:#edf5ed;border-radius:9px;place-items:center;display:grid}.dialog-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:17px}.dialog-heading h2{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:17px;font-weight:600;overflow:hidden}.dialog-copy{color:var(--muted);margin:18px 0;font-size:12px;line-height:1.5}.time-label{color:var(--sage);letter-spacing:.14em;font-size:10px;font-weight:700;display:block}.time-input{border:1px solid var(--line);width:100%;color:var(--ink);background:#fbfcfa;border-radius:8px;outline:0;margin-top:8px;padding:11px 12px;font-size:15px}.time-input:focus{border-color:var(--sage);box-shadow:0 0 0 3px #86a88e24}.dialog-actions{align-items:center;gap:7px;margin-top:22px;display:flex}.dialog-actions button{border:0;border-radius:7px;padding:9px 10px;font-size:11px}.cancel-dialog{color:var(--muted);background:#f2f5f1}.save-reminder{background:var(--ink);color:#fff}.save-reminder:disabled,.cancel-dialog:disabled,.remove-reminder:disabled{cursor:wait;opacity:.45}.remove-reminder{color:#a35f5f;background:0 0;margin-right:auto;padding-left:0!important}.form-feedback{color:#a35f5f;margin-top:8px;font-size:11px;line-height:1.4}.empty-state{text-align:center;background:#fcfdf9;border:1px dashed #ccd9ce;border-radius:12px;padding:34px 20px}.empty-state h2{color:var(--ink);font-size:16px;font-weight:600}.empty-state p{color:var(--muted);margin-top:5px;font-size:13px}.add-form{border-top:1px solid var(--line);padding:24px 0 0}.add-form label{margin-bottom:9px;display:block}.input-row{gap:9px;display:flex}.input-row input{border:1px solid var(--line);min-width:0;color:var(--ink);background:var(--paper);border-radius:9px;outline:0;flex:1;padding:12px 13px;font-size:16px;transition:border-color .2s,box-shadow .2s}.input-row input::placeholder{color:#a7b0a9}.input-row input:focus{border-color:var(--sage);box-shadow:0 0 0 3px #86a88e24}.add-button{background:var(--ink);color:#fff;border:0;border-radius:9px;place-items:center;width:44px;height:44px;transition:background .2s,transform .2s;display:grid}.add-button:hover:not(:disabled){background:#385044;transform:translateY(-1px)}.add-button:disabled{cursor:not-allowed;opacity:.35}.add-button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:18px}.form-feedback{color:#9b4b3f;margin-top:10px;font-size:12px}.back-button{color:var(--muted);background:0 0;border:0;align-items:center;gap:5px;padding:0;font-size:12px;display:inline-flex}.back-button:hover{color:var(--ink)}.back-button svg,.month-arrow svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:17px}.arrow-right{transform:rotate(180deg)}.calendar-section{padding:52px 0 0}.calendar-section h1{text-overflow:ellipsis;white-space:nowrap;margin-bottom:28px;overflow:hidden}.month-navigation{justify-content:space-between;align-items:center;margin-bottom:17px;display:flex}.month-navigation strong{color:var(--ink);font-size:15px;font-weight:600}.month-arrow{border:1px solid var(--line);background:var(--paper);width:31px;height:31px;color:var(--ink);border-radius:8px;place-items:center;padding:0;display:grid}.month-arrow:hover:not(:disabled){border-color:var(--sage)}.month-arrow:disabled{cursor:default;opacity:.3}.calendar{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:18px 12px 15px}.weekday-row,.calendar-grid{grid-template-columns:repeat(7,1fr);display:grid}.weekday-row{margin-bottom:8px}.weekday-row span{color:var(--muted);text-align:center;font-size:10px;font-weight:600}.calendar-grid{row-gap:7px}.calendar-day{min-height:48px;color:var(--ink);justify-content:center;align-items:center;font-size:13px;display:flex;position:relative}.calendar-day>span{z-index:1;border-radius:50%;place-items:center;width:29px;height:29px;display:grid;position:relative}.calendar-day i{background:#d5ddd5;border-radius:50%;width:4px;height:4px;position:absolute;bottom:2px}.calendar-day.is-checked>span{background:var(--mint-dark);color:#fff;font-weight:600}.calendar-day.is-checked i{background:var(--mint-dark)}.calendar-day.is-today>span{box-shadow:0 0 0 2px #b8d5bd}.calendar-day.is-checked.is-today>span{box-shadow:0 0 0 2px #b8d5bd,0 0 0 4px #fff,0 0 0 5px #b8d5bd}.calendar-day.is-empty{min-height:48px}.calendar-summary{color:var(--muted);align-items:center;gap:16px;margin-top:14px;font-size:11px;display:flex}.calendar-summary span{align-items:center;gap:5px;display:flex}.calendar-summary strong{color:var(--ink);margin-left:auto;font-weight:600}.legend-dot{background:0 0;border:1px solid #d5ddd5;border-radius:50%;width:7px;height:7px}.legend-dot.is-checked{border-color:var(--mint-dark);background:var(--mint-dark)}@media (width<=520px){.app-shell{padding:22px 18px 30px}.topbar{gap:8px}.date-label{font-size:11px}.habits-section,.calendar-section{padding-top:40px}.calendar{padding-inline:6px}.calendar-day,.calendar-day.is-empty{min-height:44px}.calendar-summary{gap:10px;font-size:10px}}html{background:#f4f6f1}body{color:#1d2b26;-webkit-font-smoothing:antialiased;background:#f4f6f1;min-width:320px;min-height:100vh;margin:0;font-family:DM Sans,Arial,sans-serif}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #47745a59}