*{box-sizing:border-box}html{min-height:100%}body{color:#4c2002;background:#f7f3e8;min-height:100%;margin:0;font-family:Manrope,sans-serif}button,input{font:inherit}button{cursor:pointer}#root{min-height:100vh}:root{--main-color:#998628;--color-dark:#4c2002;--color-bg:#f7f3e8;--color-border:#ddd2aa;--color-text:#4c2002;--color-muted:#8a775c;--color-success:#5f7f3a;--color-surface:#fffaf0}.app{min-height:100vh;overflow:clip}.app__container{border:2px solid var(--color-border);border-radius:10px;flex-direction:column;width:100%;max-width:960px;min-height:100vh;margin:0 auto;padding:20px;display:flex}.app__main{flex-grow:1}.header{background-color:var(--color-dark);color:#fff;border-radius:8px 8px 0 0;align-items:center;gap:clamp(10px,2vw,20px);margin:-20px -20px 24px;padding:18px 24px;display:flex}.header__icon{color:var(--main-color);flex-shrink:0}.header__title{color:#fff;font-size:clamp(24px,3vw,34px);font-weight:800}.header__text{color:var(--main-color);border-left:1px solid #ffffff40;padding-left:20px;font-weight:600}.toolbar{justify-content:space-between;align-items:center;gap:10px;padding-block-end:20px;display:flex}.habit-search{flex:1;max-width:320px;display:flex;position:relative}.habit-search__input{border:1px solid var(--color-border);border-radius:8px;width:100%;padding:8px 16px 8px 42px}.habit-search__input:focus{border-color:var(--main-color);outline:none}.habit-search__icon{color:var(--color-muted);pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.add-form{border-top:1px solid var(--color-border);align-items:center;gap:10px;padding-block-start:20px;display:flex}.add-form__input{border:2px solid var(--color-border);border-radius:8px;flex-grow:1;padding:8px 25px}.add-form__input:focus{border-color:var(--main-color);outline:none}.add-form__button{white-space:nowrap;background-color:var(--main-color);color:#fff;border:2px solid var(--color-border);border-radius:8px;min-width:150px;padding:8px 25px;font-size:clamp(13px,2vw,18px);transition:all .2s ease-in-out}.add-form__button:hover{background-color:var(--color-success);border-color:var(--color-success)}.habit-list{flex-direction:column;gap:10px;padding-block-start:20px;display:flex}.habit-list__empty{text-align:center;color:var(--color-muted);border:1px dashed var(--color-border);background-color:var(--color-surface);border-radius:12px;padding:24px}.habit-card{border:1px solid var(--color-border);background:#fff;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}.habit-card--completed{border-color:var(--color-success);background-color:#5f7f3a1f}.habit-card--completed .habit-card__title{color:var(--color-muted);text-decoration:line-through}.habit-card__title{flex-grow:1;font-size:clamp(17px,1.4vw,24px);line-height:1.25}.habit-card__button{border:1px solid var(--color-border);width:36px;height:36px;color:var(--color-dark);background:0 0;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.habit-card__button:hover{background:#9986281f}.habit-card__checkbox{width:20px;height:20px;accent-color:var(--color-success);cursor:pointer;margin-inline-end:10px}.habit-filter{display:flex}.habit-filter__button{border:1px solid var(--color-border);padding:8px 25px}.habit-filter__button--active{background-color:var(--main-color);color:#fff;border-color:var(--main-color)}.stats{border:1px solid var(--color-border);background-color:var(--color-surface);border-radius:16px;margin-top:24px;padding:20px}.stats__header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;display:flex}.stats__title{color:var(--color-text);margin:0 0 4px;font-size:20px;font-weight:700}.stats__text{color:var(--color-muted);margin:0}.stats__percent{color:var(--main-color);margin:0;font-size:28px;font-weight:800}.stats__progress{background-color:var(--color-border);border-radius:999px;width:100%;height:12px;overflow:hidden}.stats__progress-fill{background-color:var(--color-success);border-radius:inherit;height:100%;transition:width .3s}.stats__footer{justify-content:space-between;gap:16px;margin-top:12px;display:flex}.stats__meta{color:var(--color-muted);margin:0}.footer{background-color:var(--color-dark);color:#fff;border-radius:0 0 8px 8px;justify-content:space-between;margin:20px -20px -20px;padding:8px 30px;font-size:clamp(8px,2vw,20px);display:flex}.footer__calendar{align-items:center;gap:10px;display:flex}.footer__icon{color:var(--main-color)}.footer__heart{align-items:center;gap:10px;display:flex}@media (width<=428px){.toolbar{flex-direction:column}.habit-search{width:100%}.add-form{flex-wrap:wrap}.add-form__button{flex-grow:1}}