*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,sans-serif;background:#0f1117;color:#e2e8f0;min-height:100vh;padding:2rem 1rem}h1{font-size:2rem;margin-bottom:1.5rem}h2{font-size:1.3rem}h4{font-size:1rem;color:#94a3b8;margin-bottom:.75rem}.title-container{display:flex}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.add-habit-form{margin-bottom:1.5rem}.form-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.form-row input[type=text]{flex:1;min-width:200px;padding:.6rem .9rem;border-radius:8px;border:1px solid #2d3748;background:#1a202c;color:#e2e8f0;font-size:.95rem}.frequency-value-input{width:60px;padding:.6rem .5rem;border-radius:8px;border:1px solid #2d3748;background:#1a202c;color:#e2e8f0;text-align:center;font-size:.95rem}.form-row select{padding:.6rem .75rem;border-radius:8px;border:1px solid #2d3748;background:#1a202c;color:#e2e8f0;font-size:.95rem}.atomic-section{margin-top:1rem;background:#1a202c;border:1px solid #2d3748;border-radius:10px;padding:1rem}.atomic-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.atomic-field label{display:block;font-size:.8rem;color:#94a3b8;margin-bottom:.3rem}.atomic-field input{width:100%;padding:.5rem .75rem;border-radius:8px;border:1px solid #2d3748;background:#0f1117;color:#e2e8f0;font-size:.9rem}.btn-primary{padding:.6rem 1.1rem;background:#6366f1;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}.btn-primary:hover{background:#4f46e5}.btn-atomic{padding:.6rem 1rem;background:#1e293b;color:#a78bfa;border:1px solid #4c1d95;border-radius:8px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}.btn-atomic:hover{background:#2d1b69}.btn-calendar{padding:.4rem .8rem;background:#1e293b;color:#60a5fa;border:1px solid #1d4ed8;border-radius:8px;cursor:pointer;font-size:.85rem;white-space:nowrap;transition:background .2s}.btn-calendar:hover{background:#1e3a5f}.btn-danger{padding:.4rem .7rem;background:transparent;color:#f87171;border:1px solid #7f1d1d;border-radius:8px;cursor:pointer;font-size:.85rem;transition:background .2s}.btn-danger:hover{background:#450a0a}.btn-close{background:transparent;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer;line-height:1;padding:.25rem}.btn-close:hover{color:#e2e8f0}.card{background:#1a202c;border:1px solid #2d3748;border-radius:12px;padding:.9rem 1.1rem;margin-bottom:.6rem;transition:border-color .2s}.habit-item{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.habit-item.done{border-color:#22c55e44;background:#14261e}.habit-left{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0}.status-dot{width:10px;height:10px;border-radius:50%;background:#4b5563;flex-shrink:0;transition:background .2s}.status-dot.active{background:#22c55e;box-shadow:0 0 6px #22c55e88}.habit-name{font-size:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.habit-meta{display:flex;align-items:center;gap:.6rem}.badge{padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase}.badge.daily{background:#1e3a5f;color:#60a5fa}.badge.weekly{background:#1e1b4b;color:#a78bfa}.badge.monthly{background:#1c1917;color:#fb923c}.streak{font-size:.85rem;color:#fbbf24}.habit-actions{display:flex;gap:.5rem;align-items:center}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:#1a202c;border:1px solid #2d3748;border-radius:16px;padding:1.5rem;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:1.25rem}.modal-header{display:flex;justify-content:space-between;align-items:flex-start}.modal-title{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.frequency-badge{background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:999px;padding:.2rem .7rem;font-size:.8rem;font-weight:600}.calendar-nav{display:flex;justify-content:space-between;align-items:center}.calendar-nav button{background:#2d3748;border:none;color:#e2e8f0;font-size:1.2rem;width:32px;height:32px;border-radius:8px;cursor:pointer;transition:background .2s}.calendar-nav button:hover:not(:disabled){background:#4a5568}.calendar-nav button:disabled{opacity:.3;cursor:default}.month-label{font-weight:600;font-size:1rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.weekday-header{text-align:center;font-size:.7rem;font-weight:700;color:#64748b;padding-bottom:4px;text-transform:uppercase}.calendar-day{aspect-ratio:1;border-radius:8px;background:#0f1117;border:1px solid #2d3748;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s;position:relative;font-size:.8rem}.calendar-day:hover:not(.future):not(.empty){background:#2d3748;border-color:#4a5568}.calendar-day.empty{background:transparent;border:none;cursor:default}.calendar-day.future{opacity:.3;cursor:default}.calendar-day.done{background:#14532d;border-color:#22c55e}.calendar-day.today{border-color:#6366f1;box-shadow:0 0 0 2px #6366f144}.day-number{font-size:.75rem;line-height:1}.checkmark{font-size:.65rem;color:#4ade80;line-height:1}.progress-section{display:flex;flex-direction:column;gap:.5rem}.progress-bar-track{height:8px;background:#2d3748;border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:999px;transition:width .4s ease}.progress-stats{display:flex;justify-content:space-between;font-size:.82rem;color:#94a3b8;flex-wrap:wrap;gap:.25rem}.completed-month{color:#4ade80;font-weight:600}.atomic-loop-section{background:#0f1117;border:1px solid #2d3748;border-radius:12px;padding:1rem}.atomic-loop-grid{display:flex;flex-direction:column;gap:.6rem}.atomic-loop-item{display:flex;align-items:flex-start;gap:.75rem}.atomic-icon{font-size:1.1rem;flex-shrink:0;margin-top:2px}.atomic-loop-item strong{display:block;font-size:.78rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}.atomic-loop-item p{font-size:.9rem;color:#e2e8f0;margin:0}.empty-state{text-align:center;color:#4a5568;padding:3rem 1rem;font-size:1rem}.habit-input,.frequency-value-input,.atomic-input{background:#1a202c;color:#e2e8f0;border:1.5px solid #2d3748;border-radius:10px;padding:.6rem .9rem;font-size:.95rem;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}.habit-input:focus,.frequency-value-input:focus,.atomic-input:focus{border-color:#6366f1;background:#1e1f2e;box-shadow:0 0 0 3px #6366f12e,0 0 16px #6366f11f}.habit-input:not(:placeholder-shown):not(:focus),.atomic-input:not(:placeholder-shown):not(:focus){border-color:#3d4a5c;box-shadow:0 0 0 2px #6366f10f}.frequency-value-input{width:64px;text-align:center;font-weight:700;color:#a5b4fc;border-color:#312e81}.frequency-value-input:focus{border-color:#818cf8;box-shadow:0 0 0 3px #818cf833,0 0 12px #818cf826}.freq-select{position:relative;z-index:100}.freq-trigger{display:flex;align-items:center;gap:.45rem;padding:.6rem .85rem;background:#1a202c;border:1.5px solid #2d3748;border-radius:10px;color:var(--accent, #e2e8f0);font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .2s,box-shadow .2s,background .2s;min-width:110px}.freq-trigger:hover,.freq-trigger.open{background:#1e293b;border-color:var(--accent, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.freq-icon{font-size:1rem}.freq-label{flex:1}.freq-arrow{font-size:.75rem;color:#64748b;transition:transform .2s ease;display:inline-block}.freq-arrow.rotated{transform:rotate(180deg)}.freq-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:140px;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:.35rem;box-shadow:0 10px 40px #00000080,0 0 0 1px #ffffff0a;animation:dropdownFadeIn .15s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.freq-option{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .75rem;background:transparent;border:none;border-radius:8px;color:#cbd5e1;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s;text-align:left}.freq-option:hover{background:#ffffff12;color:var(--accent, #e2e8f0)}.freq-option.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent, #e2e8f0);font-weight:700}.freq-option-icon{font-size:1rem}.freq-option-label{flex:1}.freq-check{font-size:.85rem;color:var(--accent)}.number-stepper{display:flex;align-items:center;gap:0;background:#1a202c;border:1.5px solid #312e81;border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.number-stepper:focus-within{border-color:#818cf8;box-shadow:0 0 0 3px #818cf833,0 0 12px #818cf81f}.stepper-btn{width:32px;height:38px;background:transparent;border:none;color:#a5b4fc;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.stepper-btn:hover:not(:disabled){background:#818cf826;color:#e0e7ff}.stepper-btn:active:not(:disabled){background:#818cf847}.stepper-btn:disabled{color:#374151;cursor:default}.stepper-value{min-width:32px;text-align:center;font-size:.95rem;font-weight:700;color:#a5b4fc;padding:0 4px;-webkit-user-select:none;user-select:none;border-left:1px solid #1e1b4b;border-right:1px solid #1e1b4b;line-height:38px}.start-date-row{display:flex;align-items:center;gap:.75rem;margin-top:.6rem;flex-wrap:wrap}.start-date-label{font-size:.85rem;color:#94a3b8;display:flex;align-items:center;gap:.4rem}.optional-hint{font-size:.75rem;color:#4b5563}.start-date-input{padding:.45rem .75rem;border-radius:8px;border:1.5px solid #2d3748;background:#1a202c;color:#e2e8f0;font-size:.85rem;outline:none;transition:border-color .2s,box-shadow .2s;color-scheme:dark}.start-date-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f12e}.calendar-day.before-start{opacity:.2;cursor:not-allowed;background:transparent;border-color:#1a202c}.calendar-day.before-start:hover{background:transparent;border-color:#1a202c}