:root{--color-bg:#f1f5f9;--color-surface:#fff;--color-primary:#6366f1;--color-primary-dark:#4f46e5;--color-text:#0f172a;--color-text-muted:#64748b;--color-border:#e2e8f0;--color-success:#22c55e;--color-danger:#ef4444;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 32px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;height:100%}body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}#root{flex-direction:column;min-height:100dvh;display:flex}input,textarea,select{font-size:16px}button{-webkit-tap-highlight-color:transparent;font-family:inherit}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:2rem;height:2rem;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.auth-wrapper{background:var(--color-bg);justify-content:center;align-items:center;min-height:100dvh;padding:1.5rem;display:flex}.auth-card{background:var(--color-surface);border-radius:var(--radius-xl);width:100%;max-width:400px;box-shadow:var(--shadow-lg);padding:2rem 1.5rem}.auth-logo{text-align:center;margin-bottom:2rem}.auth-logo__icon{color:var(--color-primary);margin-bottom:.5rem;font-size:2.5rem;display:inline-block}.auth-logo__title{color:var(--color-text);margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.auth-logo__sub{color:var(--color-text-muted);margin:0;font-size:.8125rem}.auth-tabs{background:var(--color-bg);border-radius:var(--radius-md);gap:.25rem;margin-bottom:1.5rem;padding:.25rem;display:flex}.auth-tab{border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;flex:1;padding:.625rem;font-size:.9375rem;font-weight:500;transition:background .15s,color .15s}.auth-tab--active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}.auth-form{flex-direction:column;gap:1rem;display:flex}.auth-field{flex-direction:column;gap:.375rem;display:flex}.auth-label{color:var(--color-text);font-size:.875rem;font-weight:500}.auth-input{border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface);outline:none;padding:.75rem 1rem;font-size:1rem;transition:border-color .15s}.auth-input:focus{border-color:var(--color-primary)}.auth-error{color:var(--color-danger);background:color-mix(in srgb, var(--color-danger) 10%, transparent);border-radius:var(--radius-sm);margin:0;padding:.625rem .875rem;font-size:.875rem}.auth-message{color:var(--color-success);background:color-mix(in srgb, var(--color-success) 10%, transparent);border-radius:var(--radius-sm);margin:0;padding:.625rem .875rem;font-size:.875rem}.auth-submit{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;margin-top:.25rem;padding:.875rem;font-size:1rem;font-weight:600;transition:background .15s,opacity .15s}.auth-submit:hover:not(:disabled){background:var(--color-primary-dark)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.header{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:10;padding:1rem 1rem .875rem;position:sticky;top:0}.header__top{justify-content:space-between;align-items:center;margin-bottom:.25rem;display:flex}.header__brand{align-items:center;gap:.5rem;display:flex}.header__icon{color:var(--color-primary);font-size:1.25rem}.header__title{color:var(--color-text);font-size:1.25rem;font-weight:700}.header__signout{border-radius:var(--radius-sm);width:2.25rem;height:2.25rem;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.header__signout:hover{background:var(--color-bg);color:var(--color-text)}.header__date-row{justify-content:space-between;align-items:baseline;display:flex}.header__date{color:var(--color-text);margin:0;font-size:.9375rem;font-weight:500}.header__email{color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:160px;margin:0;font-size:.75rem;overflow:hidden}.week-progress{background:var(--color-surface);border-radius:var(--radius-xl);margin-bottom:1rem;padding:1rem}.week-progress__title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .875rem;font-size:.75rem;font-weight:600}.week-progress__grid{grid-template-columns:repeat(7,1fr);align-items:end;gap:.25rem;display:grid}.week-progress__col{flex-direction:column;align-items:center;gap:.375rem;display:flex}.week-progress__day{color:var(--color-text-muted);text-transform:uppercase;font-size:.6875rem;font-weight:600}.week-progress__col--today .week-progress__day{color:var(--color-primary)}.week-progress__bar-track{background:var(--color-bg);border-radius:var(--radius-sm);align-items:flex-end;width:100%;height:56px;display:flex;overflow:hidden}.week-progress__col--today .week-progress__bar-track{background:color-mix(in srgb, var(--color-primary) 12%, transparent)}.week-progress__bar-fill{background:var(--color-primary);border-radius:var(--radius-sm);width:100%;min-height:0;transition:height .4s}.week-progress__col--today .week-progress__bar-fill{background:var(--color-primary)}.week-progress__count{color:var(--color-text-muted);min-height:1em;font-size:.6875rem;font-weight:500}.week-progress__col--today .week-progress__count{color:var(--color-primary);font-weight:600}.habit-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:.875rem 1rem .75rem}.habit-card__main{align-items:center;gap:.625rem;margin-bottom:.75rem;display:flex}.habit-card__check{border:2.5px solid var(--hc,var(--color-border));cursor:pointer;color:#fff;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;transition:background .15s,border-color .15s;display:flex}.habit-card__check--done{background:var(--hc,var(--color-primary));border-color:var(--hc,var(--color-primary))}.habit-card__dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.habit-card__name{color:var(--color-text);flex:1;font-size:1rem;font-weight:500;transition:color .15s}.habit-card__name--done{color:var(--color-text-muted);text-decoration:line-through;-webkit-text-decoration-color:var(--color-border);text-decoration-color:var(--color-border)}.habit-card__delete{border-radius:var(--radius-sm);width:2rem;height:2rem;color:var(--color-text-muted);cursor:pointer;opacity:0;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .15s,background .15s,color .15s;display:flex}.habit-card:hover .habit-card__delete,.habit-card:focus-within .habit-card__delete{opacity:1}@media (hover:none){.habit-card__delete{opacity:1}}.habit-card__delete:hover{background:color-mix(in srgb, var(--color-danger) 10%, transparent);color:var(--color-danger)}.habit-card__week{grid-template-columns:repeat(7,1fr);display:grid}.habit-card__day-col{flex-direction:column;align-items:center;gap:.3rem;display:flex}.habit-card__day-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:.625rem;font-weight:600}.habit-card__day-label--today{color:var(--color-primary)}.habit-card__dot-btn{border:2px solid var(--color-border);cursor:pointer;background:0 0;border-radius:50%;width:1.5rem;height:1.5rem;padding:0;transition:background .15s,border-color .15s,transform .1s}.habit-card__dot-btn--done{border-color:#0000}.habit-card__dot-btn--today:not(.habit-card__dot-btn--done){border-width:2px}.habit-card__dot-btn--future{opacity:.25;cursor:default}.habit-card__dot-btn:not(:disabled):active{transform:scale(.88)}.sheet-backdrop{z-index:40;opacity:0;pointer-events:none;background:#0006;transition:opacity .25s;position:fixed;inset:0}.sheet-backdrop--visible{opacity:1;pointer-events:all}.sheet{background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;z-index:50;max-width:480px;margin:0 auto;padding:.75rem 1.25rem 2rem;transition:transform .3s cubic-bezier(.32,.72,0,1);position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.sheet--open{transform:translateY(0)}.sheet__handle{background:var(--color-border);border-radius:2px;width:2.5rem;height:4px;margin:0 auto 1.25rem}.sheet__title{color:var(--color-text);margin:0 0 1.25rem;font-size:1.125rem;font-weight:700}.sheet__form{flex-direction:column;gap:1.125rem;display:flex}.sheet__field{flex-direction:column;gap:.5rem;display:flex}.sheet__label{color:var(--color-text);font-size:.875rem;font-weight:500}.sheet__input{border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface);outline:none;padding:.75rem 1rem;font-size:1rem;transition:border-color .15s}.sheet__input:focus{border-color:var(--color-primary)}.sheet__colors{flex-wrap:wrap;gap:.625rem;display:flex}.sheet__color-swatch{cursor:pointer;border:3px solid #0000;border-radius:50%;outline:none;width:2.25rem;height:2.25rem;padding:0;transition:transform .15s,box-shadow .15s}.sheet__color-swatch:hover{transform:scale(1.1)}.sheet__color-swatch--selected{box-shadow:0 0 0 3px var(--color-surface), 0 0 0 5px currentColor;transform:scale(1.05)}.sheet__error{color:var(--color-danger);margin:0;font-size:.875rem}.sheet__actions{gap:.75rem;margin-top:.25rem;display:flex}.sheet__cancel{border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;background:0 0;flex:1;padding:.875rem;font-size:1rem;font-weight:500;transition:background .15s}.sheet__cancel:hover{background:var(--color-bg)}.sheet__submit{border-radius:var(--radius-md);background:var(--color-primary);color:#fff;cursor:pointer;border:none;flex:1.5;padding:.875rem;font-size:1rem;font-weight:600;transition:background .15s,opacity .15s}.sheet__submit:hover:not(:disabled){background:var(--color-primary-dark)}.sheet__submit:disabled{opacity:.6;cursor:not-allowed}.fab{background:var(--color-primary);color:#fff;cursor:pointer;width:3.5rem;height:3.5rem;box-shadow:0 4px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);z-index:30;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.75rem;line-height:1;transition:background .15s,transform .15s;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.fab:hover{background:var(--color-primary-dark);transform:scale(1.05)}.fab:active{transform:scale(.95)}.empty-state{text-align:center;flex-direction:column;align-items:center;padding:3rem 1.5rem;display:flex}.empty-state__icon{margin-bottom:1rem;font-size:3.5rem;line-height:1}.empty-state__title{color:var(--color-text);margin:0 0 .5rem;font-size:1.125rem;font-weight:600}.empty-state__text{color:var(--color-text-muted);max-width:240px;margin:0 0 1.5rem;font-size:.9375rem;line-height:1.5}.empty-state__btn{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;transition:background .15s}.empty-state__btn:hover{background:var(--color-primary-dark)}.app{flex-direction:column;min-height:100dvh;display:flex}.app__main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:1rem 1rem 6rem}.app-loading,.app__spinner{justify-content:center;align-items:center;min-height:50dvh;display:flex}.app__habit-list{flex-direction:column;gap:.75rem;display:flex}@media (width>=600px){.app__main{padding:1.5rem 1.5rem 6rem}}