:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--accent: #e94560;--accent-light: #ff6b85;--success: #00d26a;--success-light: #4ade80;--warning: #fbbf24;--text-primary: #ffffff;--text-secondary: #94a3b8;--text-muted: #64748b;--border: #334155;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 50%;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:80px}.loading-screen,.error-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-lg);text-align:center}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.screen{padding:var(--spacing-md)}.screen-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.screen-header h1{font-size:1.5rem;font-weight:600}.back-button{background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:var(--spacing-xs)}.nav-bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:var(--spacing-sm) 0;max-width:480px;margin:0 auto;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--text-muted);font-size:.7rem;cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);transition:color .2s}.nav-item.active{color:var(--accent)}.nav-item span:first-child{font-size:1.25rem}.card{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);box-shadow:var(--shadow-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);border:none;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-light)}.btn-primary:disabled{background:var(--text-muted);cursor:not-allowed}.btn-success{background:var(--success);color:#fff}.btn-success:disabled{background:var(--success-light);opacity:.7}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-primary)}.btn-full{width:100%}.form-group{margin-bottom:var(--spacing-md)}.form-label{display:block;margin-bottom:var(--spacing-xs);font-size:.875rem;color:var(--text-secondary)}.form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:1rem}.form-input:focus{outline:none;border-color:var(--accent)}.mini-calendar{display:flex;justify-content:space-between;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--spacing-md)}.mini-calendar-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:var(--spacing-xs)}.mini-calendar-day .day-name{font-size:.625rem;color:var(--text-muted);text-transform:uppercase}.mini-calendar-day .day-num{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:.875rem;font-weight:500}.mini-calendar-day.today .day-num{background:var(--accent);color:#fff}.mini-calendar-day.completed .day-num{background:var(--success);color:#fff}.mini-calendar-day.missed .day-num{background:var(--text-muted);color:var(--text-secondary)}.mini-calendar-day.pending .day-num{background:var(--bg-card);color:var(--text-secondary)}.habit-card{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.habit-info{flex:1}.habit-name{font-size:1.125rem;font-weight:500;margin-bottom:var(--spacing-xs)}.habit-streak{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.875rem;color:var(--warning)}.habit-streak .streak-icon{font-size:1rem}.checkin-btn{width:56px;height:56px;border-radius:var(--radius-full);font-size:1.5rem;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s}.checkin-btn.available{background:var(--accent);color:#fff}.checkin-btn.available:hover{transform:scale(1.05);background:var(--accent-light)}.checkin-btn.completed{background:var(--success);color:#fff;cursor:default}.swipeable-habit-card{position:relative;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-sm);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y;transition:transform .1s,box-shadow .2s;overflow:hidden}.swipeable-habit-card.swiping{cursor:grabbing;transform:scale(1.02);box-shadow:var(--shadow-md)}.swipeable-habit-card.completed{border:2px solid var(--success)}.swipeable-habit-card .habit-content{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.swipeable-habit-card .habit-info{flex:1}.swipeable-habit-card .habit-name{font-size:1rem;font-weight:600;margin-bottom:2px;color:var(--text-primary)}.swipeable-habit-card .habit-streak{display:flex;align-items:center;gap:2px;font-size:.75rem;color:var(--warning)}.habit-progress-display{display:flex;align-items:baseline;gap:2px}.habit-progress-display .progress-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.habit-progress-display .progress-divider{font-size:1rem;color:var(--text-muted);margin:0 1px}.habit-progress-display .progress-goal{font-size:1rem;color:var(--text-secondary)}.swipe-progress-bar{height:4px;background:#ffffff1a;border-radius:2px;margin-top:var(--spacing-xs);overflow:hidden;position:relative;z-index:1}.swipe-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:3px;transition:width .05s linear}.swipeable-habit-card.completed .swipe-progress-fill{background:linear-gradient(90deg,var(--success),var(--success-light))}.swipe-hint{text-align:center;font-size:.7rem;color:var(--text-muted);margin-top:var(--spacing-xs);position:relative;z-index:1}.swipe-hint .swiping-indicator{color:var(--accent-light);font-weight:500;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.7}to{opacity:1}}.month-calendar{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md)}.month-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.month-title{font-size:1.125rem;font-weight:600}.month-nav{display:flex;gap:var(--spacing-sm)}.month-nav button{background:var(--bg-card);border:none;color:var(--text-primary);width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--spacing-sm)}.calendar-weekday{text-align:center;font-size:.75rem;color:var(--text-muted);padding:var(--spacing-xs)}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:.875rem;cursor:pointer;transition:all .2s}.calendar-day.empty{cursor:default}.calendar-day.today{border:2px solid var(--accent)}.calendar-day.completed{background:var(--success);color:#fff}.calendar-day.missed{background:var(--text-muted);color:var(--text-secondary)}.calendar-day.pending{background:var(--bg-card);color:var(--text-secondary)}.progress-item{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.progress-item.locked{opacity:.6}.progress-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.progress-icon{font-size:1.5rem}.progress-title{font-weight:500}.progress-bar{height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden;margin-top:var(--spacing-sm)}.progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}.progress-text{font-size:.75rem;color:var(--text-muted);margin-top:var(--spacing-xs)}.empty-state{text-align:center;padding:var(--spacing-xl)}.empty-state .icon{font-size:3rem;margin-bottom:var(--spacing-md)}.empty-state p{color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);max-width:300px;text-align:center}.modal h3{margin-bottom:var(--spacing-sm)}.modal .status{font-size:2rem;margin-bottom:var(--spacing-md)}.modal button{margin-top:var(--spacing-md)}.modal-content{background:var(--bg-secondary);border-radius:var(--radius-lg);width:90%;max-width:360px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border)}.modal-header h2{font-size:1.25rem;font-weight:600}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;padding:0;line-height:1}.modal-body{padding:var(--spacing-md)}.modal-body .form-group{margin-bottom:var(--spacing-lg)}.modal-body .form-group label{display:block;font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.modal-footer{padding:var(--spacing-md);border-top:1px solid var(--border)}.stepper{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-md);padding:var(--spacing-md)}.stepper-btn{width:44px;height:44px;border-radius:var(--radius-full);background:var(--accent);color:#fff;border:none;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.stepper-btn:hover:not(:disabled){background:var(--accent-light);transform:scale(1.05)}.stepper-btn:disabled{background:var(--text-muted);cursor:not-allowed}.stepper-value{font-size:1.25rem;font-weight:600;min-width:60px;text-align:center}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:var(--bg-card);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:1000;animation:slideUp .3s ease}.toast.error{background:var(--accent)}.toast.success{background:var(--success)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.settings-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm)}.settings-label{font-weight:500}.settings-value{color:var(--text-secondary);font-size:.875rem}.day-selector{display:flex;gap:6px;flex-wrap:wrap}.day-btn{flex:1;min-width:38px;padding:8px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.day-btn:hover{border-color:var(--accent)}.day-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}