:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: rgba(30, 41, 59, .8);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent: #3b82f6;--success: #22c55e;--danger: #ef4444;--border-radius: 16px;--border-radius-sm: 8px;--shadow: 0 8px 32px rgba(0, 0, 0, .3);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100dvh;line-height:1.5}#app{max-width:480px;margin:0 auto;padding:16px 16px 100px}.app-header{padding:24px 0}.header-top{display:flex;justify-content:space-between;align-items:center}.app-header h1{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-date{color:var(--text-secondary);font-size:.9rem;margin-top:4px;text-align:center}.visibility-toggle{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--bg-secondary);border-radius:var(--border-radius-sm);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:var(--transition)}.visibility-toggle:hover{border-color:var(--accent);background:var(--bg-secondary)}.visibility-icon{font-size:1rem}.visibility-label{font-weight:500}.app-nav{display:flex;gap:8px;padding:8px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);margin-bottom:24px}.nav-btn{flex:1;padding:12px;border:none;background:transparent;color:var(--text-secondary);font-size:.9rem;font-weight:600;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition)}.nav-btn:hover{color:var(--text-primary)}.nav-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 16px #3b82f666}.view{display:none;animation:fadeIn .3s ease}.view.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.progress-summary{text-align:center;margin-bottom:32px}.progress-summary.dual{display:flex;justify-content:center;gap:32px}.progress-item{display:flex;flex-direction:column;align-items:center}.progress-ring{width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--success) calc(var(--progress) * 1%),var(--bg-secondary) calc(var(--progress) * 1%));display:flex;align-items:center;justify-content:center;margin:0 auto 12px;position:relative}.progress-ring.negative{background:conic-gradient(var(--danger) calc(var(--progress) * 1%),var(--bg-secondary) calc(var(--progress) * 1%))}.progress-ring:before{content:"";position:absolute;width:75px;height:75px;background:var(--bg-primary);border-radius:50%}.progress-text{position:relative;z-index:1;font-size:1.5rem;font-weight:700}.progress-label{color:var(--text-secondary);font-size:.9rem}.habits-grid{display:flex;flex-direction:column;gap:12px}.habit-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);border:1px solid transparent;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.habit-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--habit-color, var(--accent))}.habit-card:hover{transform:translate(4px);border-color:var(--habit-color, var(--accent))}.habit-card.completed{background:linear-gradient(135deg,#22c55e33,#22c55e1a);border-color:var(--success)}.habit-card.negative.completed{background:linear-gradient(135deg,#ef444433,#ef44441a);border-color:var(--danger)}.habit-card-icon{font-size:2rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:12px}.habit-card-info{flex:1}.habit-card-name{font-size:1.1rem;font-weight:600;margin-bottom:2px}.habit-card-type{font-size:.8rem;color:var(--text-secondary);text-transform:capitalize}.habit-card-check{width:32px;height:32px;border-radius:50%;border:2px solid var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:var(--transition)}.habit-card.completed .habit-card-check{background:var(--success);border-color:var(--success);color:#fff}.habit-card.negative.completed .habit-card-check{background:var(--danger);border-color:var(--danger)}.habits-section{margin-bottom:32px}.section-title{font-size:1.1rem;color:var(--text-secondary);margin-bottom:16px;padding-left:4px}.habits-list{display:flex;flex-direction:column;gap:8px}.habit-list-item{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius-sm);transition:var(--transition)}.habit-list-item:hover{background:var(--bg-secondary)}.habit-icon{font-size:1.5rem}.habit-name{flex:1;font-weight:500}.habit-streak{color:var(--text-secondary);font-size:.9rem}.edit-btn,.delete-btn{background:none;border:none;font-size:1rem;cursor:pointer;padding:8px;border-radius:var(--border-radius-sm);transition:var(--transition)}.edit-btn:hover{background:var(--accent)}.delete-btn:hover{background:var(--danger)}.stats-grid{display:flex;flex-direction:column;gap:16px}.stats-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:20px;border-left:4px solid var(--habit-color, var(--accent))}.stats-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.stats-icon{font-size:1.5rem}.stats-name{font-size:1.1rem;font-weight:600}.stats-streak{display:flex;align-items:center;gap:8px;margin-bottom:20px}.streak-fire{font-size:1.5rem}.streak-count{font-size:2rem;font-weight:700;color:#f59e0b}.streak-label{color:var(--text-secondary)}.stats-week .week-label{font-size:.85rem;color:var(--text-secondary);margin-bottom:12px}.week-chart{display:flex;gap:8px}.week-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}.week-bar{width:100%;height:40px;background:var(--bg-secondary);border-radius:4px;transition:var(--transition)}.week-day.completed .week-bar{background:var(--habit-color, var(--success));box-shadow:0 2px 8px #22c55e66}.week-day .week-label{font-size:.7rem;color:var(--text-secondary)}.fab{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:none;color:#fff;font-size:2rem;cursor:pointer;box-shadow:0 8px 24px #3b82f680;transition:var(--transition);z-index:100}.fab:hover{transform:scale(1.1) rotate(90deg)}.fab:active{transform:scale(.95)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:var(--transition)}.modal-overlay.active{opacity:1;pointer-events:auto}.modal{background:var(--bg-secondary);border-radius:var(--border-radius) var(--border-radius) 0 0;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;padding:24px;transform:translateY(100%);transition:var(--transition)}.modal-overlay.active .modal{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h2{font-size:1.5rem}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;line-height:1}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px;font-weight:500}.form-group input[type=text]{width:100%;padding:14px 16px;background:var(--bg-primary);border:2px solid transparent;border-radius:var(--border-radius-sm);color:var(--text-primary);font-size:1rem;transition:var(--transition)}.form-group input[type=text]:focus{outline:none;border-color:var(--accent)}.type-toggle{display:flex;gap:8px}.type-btn{flex:1;padding:12px;background:var(--bg-primary);border:2px solid transparent;border-radius:var(--border-radius-sm);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:var(--transition)}.type-btn.active{border-color:var(--accent);color:var(--text-primary)}.emoji-picker,.color-picker,.days-picker{display:flex;flex-wrap:wrap;gap:8px}.emoji-btn{width:44px;height:44px;font-size:1.5rem;background:var(--bg-primary);border:2px solid transparent;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition)}.emoji-btn.active{border-color:var(--accent);background:var(--bg-card)}.color-btn{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:var(--transition)}.color-btn.active{border-color:#fff;transform:scale(1.2)}.day-btn{padding:10px 14px;background:var(--bg-primary);border:2px solid transparent;border-radius:var(--border-radius-sm);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:var(--transition)}.day-btn.active{border-color:var(--accent);color:var(--text-primary);background:#3b82f633}.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:none;border-radius:var(--border-radius-sm);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition)}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #3b82f666}.checkbox-label{display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--text-primary);font-size:.95rem}.checkbox-label input[type=checkbox]{display:none}.checkbox-custom{width:22px;height:22px;border:2px solid var(--text-secondary);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.checkbox-label input[type=checkbox]:checked+.checkbox-custom{background:var(--accent);border-color:var(--accent)}.checkbox-label input[type=checkbox]:checked+.checkbox-custom:after{content:"✓";color:#fff;font-size:.8rem;font-weight:700}.empty-state{text-align:center;color:var(--text-secondary);padding:40px 20px;font-size:.95rem}@media (min-width: 640px){#app{padding:24px}.modal{border-radius:var(--border-radius);margin:auto;max-height:90vh}.fab{right:calc(50% - 216px)}}