@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);:root{--bg-primary:#0a0e27;--bg-secondary:#161b33;--bg-tertiary:#1e2541;--text-primary:#e4e7f0;--text-secondary:#9ca3b8;--text-tertiary:#6b7280;--accent-green:#10b981;--accent-green-dark:#059669;--border-color:#252b42}*{box-sizing:border-box}body,html{overflow-x:hidden;max-width:100vw}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-green)}*{scrollbar-width:thin;scrollbar-color:var(--bg-tertiary) var(--bg-secondary)}.app-container{min-height:100vh;max-width:100vw;overflow-x:hidden;background:var(--bg-primary);padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text-primary);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:100}.btn-language,.btn-menu:hover,.btn-settings:hover{background:var(--bg-tertiary)!important}.btn-language{color:var(--text-primary)!important;border:1px solid var(--border-color)!important;padding:8px 16px;border-radius:12px;font-size:14px;white-space:nowrap;transition:background .2s}.btn-language:hover{background:var(--bg-primary)!important}.dropdown-menu{background:var(--bg-secondary)!important;border:1px solid var(--border-color)!important;border-radius:12px;padding:8px;min-width:150px}.dropdown-item{color:var(--text-primary)!important;padding:8px 12px;border-radius:8px;font-size:14px;transition:background .2s}.dropdown-item.active,.dropdown-item:hover{background:var(--bg-tertiary)!important}.dropdown-item.active{color:var(--accent-green)!important}.search-bar{background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--border-color)}.search-bar i{color:var(--text-tertiary);font-size:16px}.search-bar input::-moz-placeholder{color:var(--text-tertiary)!important}.search-bar input::placeholder{color:var(--text-tertiary)!important}.search-bar input{color:var(--text-primary)!important}.btn-add{width:56px;height:56px;box-shadow:0 4px 12px hsla(0,0%,100%,.3);transition:transform .2s,box-shadow .2s;z-index:1000}.btn-add:hover{transform:scale(1.05);box-shadow:0 6px 16px hsla(0,0%,100%,.4)!important}.btn-add:active{transform:scale(.95)}.habit-card{background:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;transition:transform .2s,background .2s,border-color .2s;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.habit-card:hover{background:var(--bg-tertiary)!important;border-color:var(--habit-color,#10b981)!important;transform:scale(1.01)!important}.habit-icon{width:64px;height:64px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--habit-color,#10b981);font-size:28px;flex-shrink:0}.progress-bar-container{width:64px}.progress-bar-bg{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--habit-color,#10b981);border-radius:2px;transition:width .3s ease}.habit-content h3{color:var(--habit-color,#ff006e);font-size:20px;font-weight:700}.stat span:first-child{color:var(--text-tertiary);font-size:10px}.stat span:last-child{color:var(--habit-color,#10b981);font-size:18px;font-weight:700}.progress-info{font-size:12px;color:var(--text-secondary)}.progress{background:var(--bg-tertiary)!important}.progress-fill{background:var(--habit-color,#10b981)!important;box-shadow:0 0 10px var(--habit-color,#10b981)}.empty-state,.empty-state i{color:var(--text-tertiary)}.empty-state i{opacity:.3}.empty-state p{color:var(--text-secondary)}.detail-view{min-height:100vh;animation:slideIn .3s ease;background:var(--bg-primary)}.detail-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:100;flex-wrap:nowrap}.btn-back,.btn-icon{width:44px;height:44px;min-width:44px;background:var(--bg-tertiary)!important;color:var(--text-primary)!important;transition:background .2s,transform .2s;display:flex;align-items:center;justify-content:center;font-size:18px}.btn-back:hover,.btn-icon:hover{background:var(--bg-primary)!important;transform:scale(1.05)}.btn-back:active,.btn-icon:active{transform:scale(.95)}.detail-header h2{color:var(--habit-color,#10b981);font-size:20px;font-weight:700}.habit-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@media (max-width:400px){.habit-title{white-space:normal;word-break:break-word;line-height:1.3}.detail-header{align-items:flex-start!important}}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-color);transition:transform .2s}.stat-card:hover{transform:translateY(-2px);border-color:var(--habit-color,#10b981)}.stat-value{color:var(--habit-color,#10b981)}.stat-label{color:var(--text-tertiary)}.calendar-section,.progress-section-detail,.relapses-section{background:var(--bg-secondary);border:1px solid var(--border-color)}.calendar-section h3,.progress-section-detail h3,.relapses-section h3{color:var(--text-secondary);font-weight:500}.calendar-section h3 i,.progress-section-detail h3 i,.relapses-section h3 i{color:var(--habit-color,#10b981)}.calendar-grid{display:grid;grid-template-rows:repeat(7,10px);grid-auto-flow:column;gap:3px;justify-content:start;overflow-x:hidden}.calendar-day{width:10px;height:10px;border-radius:2px;background:var(--bg-tertiary);transition:all .2s;cursor:pointer}.calendar-day.clean{background:var(--accent-green);box-shadow:0 0 6px rgba(16,185,129,.4)}.calendar-day.relapse{background:var(--habit-color,#10b981);box-shadow:0 0 6px var(--habit-color,rgba(16,185,129,.4))}.calendar-day.empty{background:var(--bg-tertiary);border:1px solid var(--border-color)}.calendar-day.month-even.clean{background:var(--accent-green);opacity:1}.calendar-day.month-odd.clean{background:var(--accent-green-dark);opacity:1}.calendar-day.month-even.relapse{background:#ef4444!important;filter:brightness(1)}.calendar-day.month-odd.relapse{background:#ef4444!important;filter:brightness(.85)}.calendar-day.month-even.empty{background:var(--bg-tertiary)}.calendar-day.month-odd.empty{background:var(--bg-primary)}.calendar-day:hover{transform:scale(1.3);z-index:10;position:relative}.btn-relapse-large{background:var(--habit-color,#10b981)!important;border:none!important;transition:transform .2s,opacity .2s}.btn-relapse-large:hover:not(:disabled){transform:scale(1.02)!important;filter:brightness(1.1)}.btn-relapse-large:active:not(:disabled){transform:scale(.98)!important}.btn-relapse-large:disabled{opacity:.3;cursor:not-allowed}.relapse-item{background:var(--bg-primary);transition:background .2s}.relapse-item:hover{background:var(--bg-tertiary)!important}.relapse-item:hover .btn-delete-relapse{opacity:1}.relapse-icon{width:8px;height:8px;color:#ef4444;font-size:8px}.relapse-date{color:var(--text-primary)}.relapse-time{color:var(--text-tertiary)}.relapse-comment{color:var(--text-secondary);font-style:italic}.relapse-days{color:var(--habit-color,#10b981)}.btn-delete-relapse{background:var(--bg-tertiary)!important;color:var(--text-tertiary)!important;border:none!important;transition:all .2s;opacity:1}.btn-delete-relapse:hover{background:#ef4444!important;color:#fff!important}.empty-relapses,.empty-relapses i{color:var(--text-tertiary)}.empty-relapses p{color:var(--text-secondary)}.custom-modal{background:var(--bg-secondary)!important;border:1px solid var(--border-color);color:var(--text-primary)}.custom-modal .modal-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);padding:1.25rem 1.5rem}.custom-modal .modal-title{font-weight:600;font-size:1.125rem;letter-spacing:-.01em}.custom-modal .modal-body{padding:1.5rem}.custom-modal .modal-footer{background:var(--bg-tertiary);border-top:1px solid var(--border-color);padding:1rem 1.5rem}.custom-input{background:var(--bg-tertiary)!important;border:1px solid var(--border-color)!important;color:var(--text-primary)!important;padding:.75rem 1rem;border-radius:.5rem;font-size:.9375rem;transition:border-color .2s}.custom-input:focus{background:var(--bg-primary)!important;border-color:var(--accent-green)!important;box-shadow:0 0 0 3px rgba(16,185,129,.1)!important}.custom-input::-moz-placeholder{color:var(--text-tertiary)!important}.custom-input::placeholder{color:var(--text-tertiary)!important}.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.icon-option{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:.75rem;cursor:pointer;transition:all .2s;font-size:1.25rem;color:var(--text-secondary)}.icon-option:hover{background:var(--bg-primary);transform:scale(1.05)}.icon-option.active{color:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.2)}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.color-option{aspect-ratio:1;border-radius:.75rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;border:3px solid transparent;color:#fff;font-size:1rem}.color-option:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.3)}.color-option.active{border-color:#fff;box-shadow:0 0 0 3px hsla(0,0%,100%,.3)}.btn-cancel{background:var(--bg-tertiary)!important;border:1px solid var(--border-color)!important;color:var(--text-secondary)!important;padding:.625rem 1.25rem;border-radius:.5rem;font-weight:500;transition:all .2s}.btn-cancel:hover{background:var(--bg-primary)!important;color:var(--text-primary)!important}.btn-save{padding:.625rem 1.25rem;border-radius:.5rem;font-weight:600;border:none!important;transition:all .2s}.btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}.modal.show{display:block!important}.modal-backdrop.show{opacity:.85!important;background:#000}.loading-screen{min-height:100vh;background:var(--bg-primary)}.loading-screen .spinner-border{border-color:var(--accent-green);border-right-color:transparent}.loading-screen p{color:var(--text-secondary);font-size:16px}.badges-section{background:var(--bg-secondary);border:1px solid var(--border-color)}.badges-section h3{color:var(--text-secondary);font-weight:500}.badges-section h3 i{color:#f59e0b}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:1rem}.badge-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;border-radius:.75rem;background:var(--bg-primary);transition:all .3s ease;cursor:pointer}.badge-item.locked{opacity:.4;filter:grayscale(1)}.badge-item.unlocked{animation:badgeUnlock .5s ease}.badge-item.unlocked:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.3)}@keyframes badgeUnlock{0%{transform:scale(.8) rotate(-10deg);opacity:0}50%{transform:scale(1.1) rotate(5deg)}to{transform:scale(1) rotate(0deg);opacity:1}}.badge-icon-wrapper{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.2)}.badge-item.unlocked .badge-icon-wrapper{box-shadow:0 0 20px currentColor}.badge-name{font-size:11px;font-weight:600;text-align:center;color:var(--text-primary);line-height:1.2}.badge-milestone{font-size:10px;color:var(--text-tertiary);text-align:center}