.habit-page-heading{align-items:flex-end;margin-bottom:20px}.habit-page-heading .heading-add{white-space:nowrap;flex-shrink:0}.habit-summary{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:14px;border:1px solid #e7e6d9;border-radius:13px;background:#f8f8ef}.habit-summary-icon{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:10px;background:#e7ecd9;color:#788966}.habit-summary-icon>.icon{width:18px;height:18px}.habit-summary>div{min-width:0}.habit-summary>div>b{display:block;font-size:12px;color:#676857}.habit-summary>div>small{display:block;margin-top:4px;font-size:9px;line-height:1.6;color:#a19c89}.habit-summary>strong{margin-left:auto;color:#788966;font-size:22px;font-weight:600;white-space:nowrap}.habit-summary>strong small{font-size:10px;margin-left:3px;font-weight:500}.habit-list{display:grid;gap:12px}.habit-card{padding:17px 18px;background:var(--tint,#f0f0e7);border:1px solid color-mix(in srgb,var(--accent,#829570) 20%,white);box-shadow:0 3px 12px #6b613708}.habit-card.sage{--tint:#f0f3e8;--accent:#81946d}.habit-card.peach{--tint:#faf0e9;--accent:#b99179}.habit-card.lavender{--tint:#f4f1f7;--accent:#9a8eae}.habit-card.yellow{--tint:#fbf6e6;--accent:#ad9859}.habit-card.sky{--tint:#edf5f6;--accent:#799da2}.habit-card.rose{--tint:#f9eef0;--accent:#b58791}.habit-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.habit-kind{font-size:9px;color:var(--accent);font-weight:600;letter-spacing:.02em}.habit-card-heading h2{margin:5px 0 0;font-size:17px;line-height:1.45;overflow-wrap:anywhere}.habit-color-dot{width:12px;height:12px;margin-top:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);flex-shrink:0}.habit-reward-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:10px;color:#817e6e;line-height:1.6}.habit-difficulty{flex-shrink:0;border-radius:20px;padding:3px 8px;background:#fffdf5a8;color:#8c8060;font-size:9px}.habit-progress-meta{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:10px;color:#8c8978}.habit-progress-meta b{color:var(--accent);font-size:11px}.habit-progress-track{height:7px;margin-top:7px;border-radius:10px;background:#fffdf2c9;overflow:hidden}.habit-progress-track i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .2s ease}.habit-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.habit-status{font-size:10px;line-height:1.6;color:#8c8978}.habit-status.is-done{color:var(--accent);font-weight:600}.habit-action{min-height:36px;padding:8px 11px;white-space:nowrap}.habit-action>.icon{width:15px;height:15px}.habit-empty{padding:32px 16px}.habit-empty .feature-symbol{margin:0 auto 13px}.habit-empty .primary,.habit-empty .secondary{margin-top:5px}.habit-footnote{margin:14px 2px 0;font-size:9px;line-height:1.8;color:#a09b89}.habit-form{display:grid;gap:0}.habit-form>label small{font-size:9px;line-height:1.6;color:#aaa38d}.habit-form [data-field="period"],.habit-form [data-field="target"]{display:flex}.habit-form [data-field="period"][hidden],.habit-form [data-field="target"][hidden]{display:none}.habit-color-field{min-width:0;margin:0 0 16px;padding:0;border:0}.habit-color-field legend{margin-bottom:9px;font-size:11px;color:#8c856f}.habit-color-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.habit-color-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 3px;border:1px solid transparent;border-radius:10px;cursor:pointer;background:#fffef99c}.habit-color-choice input{position:absolute;width:1px;height:1px;opacity:0}.habit-color-choice>span{width:21px;height:21px;border-radius:50%;background:var(--choice);box-shadow:inset 0 0 0 1px #00000010}.habit-color-choice small{font-size:8px;color:#928d7b}.habit-color-choice:has(input:checked){border-color:var(--choice);background:#fffdf9}.habit-color-choice:has(input:focus-visible){outline:3px solid #aebc8b;outline-offset:2px}.habit-color-choice.sage{--choice:#b9c7a6}.habit-color-choice.peach{--choice:#e5c5ad}.habit-color-choice.lavender{--choice:#c9bddb}.habit-color-choice.yellow{--choice:#e8d796}.habit-color-choice.sky{--choice:#b8d3d7}.habit-color-choice.rose{--choice:#e2bcc5}.habit-reward-preview{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:9px;background:#f7f0dc;color:#927e48;font-size:10px;line-height:1.6}.habit-reward-note{margin:8px 0 15px;font-size:9px;line-height:1.7;color:#a19a85}.habit-form .form-error{margin:0 0 9px}
@media(max-width:420px){.habit-page-heading{align-items:flex-start}.habit-page-heading .heading-add{min-height:38px;padding:8px 10px;font-size:10px}.habit-page-heading .heading-add>.icon{width:14px;height:14px}.habit-summary{padding:12px}.habit-summary>div>small{font-size:8px}.habit-card{padding:15px}.habit-card-heading h2{font-size:15px}.habit-card-footer{align-items:flex-start}.habit-status{max-width:55%;font-size:9px}.habit-action{font-size:9px;padding:8px}.habit-color-options{gap:4px}.habit-color-choice small{font-size:7px}}
.habit-date-navigation{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 13px;padding:9px 11px;border:1px solid #e7e6d9;border-radius:13px;background:#fffef8}.habit-date-step{width:34px;height:34px;display:grid;place-items:center;border:1px solid #e6e4d9;border-radius:9px;color:#899374;background:#fbfaf3}.habit-date-step:hover:not(:disabled){background:#eef1e5;border-color:#d3dbc3}.habit-date-step:disabled{opacity:.35}.habit-date-step>.icon{width:16px;height:16px}.habit-date-step:first-child>.icon{transform:rotate(180deg)}.habit-date-input-wrap{display:flex;align-items:center;justify-content:center;gap:7px;min-height:35px;padding:0 8px;color:#74815f}.habit-date-input-wrap>.icon{width:16px;height:16px}.habit-date-input-wrap input{width:138px;border:0;background:transparent;color:#696b59;font-size:12px;font-weight:600;text-align:center;min-height:34px;padding:3px}.habit-date-today{min-height:32px;padding:0 11px;border-radius:8px;background:#edf0e5;color:#71805e;font-size:10px;font-weight:600}.habit-date-today:hover{background:#e3e8d7}.habit-action-group{display:flex;align-items:center;gap:6px;flex-shrink:0}.habit-action.is-cancel{min-height:36px;padding:8px 11px;color:#8f766d;border-color:#e8dcd5;background:#fffaf6;font-size:11px}.habit-action.is-cancel:hover{background:#f9eee8}.habit-action.is-cancel>.icon{width:14px;height:14px}.habit-undo-button{display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;border-color:#dfe2d4;color:#8c9679;background:#fffef8}.habit-undo-button>.icon{width:15px;height:15px}.habit-undo-button:hover:not(:disabled){background:#f0f2e8;border-color:#c9d1b8}.habit-date-loading{padding:40px 12px;display:grid;gap:8px;justify-items:center}.habit-date-loading>.text-button{font-size:10px}
@media(max-width:420px){.habit-date-navigation{gap:5px;padding:7px}.habit-date-input-wrap{gap:4px;padding:0 2px}.habit-date-input-wrap input{width:130px;font-size:11px}.habit-date-step{width:31px;height:32px}.habit-date-today{padding:0 8px;font-size:9px}.habit-action-group{gap:4px}.habit-undo-button{width:31px;height:33px}.habit-action.is-cancel{font-size:9px;padding:8px 9px}}