:root{--color-bg:linear-gradient(135deg,#f5f7fa 0%,#e4e8f0 100%);--color-bg-solid:#f5f7fa;--color-bg-card:#fff;--color-bg-secondary:#e9ecef;--color-text:#1a1a2e;--color-text-secondary:#4a4a68;--color-text-muted:#8b8ba7;--color-primary:#6366f1;--color-primary-light:#818cf8;--color-primary-dark:#4f46e5;--color-primary-gradient:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);--color-success:#10b981;--color-success-light:#6ee7b7;--color-success-bg:#d1fae5;--color-success-gradient:linear-gradient(135deg,#10b981 0%,#34d399 100%);--color-fail:#ef4444;--color-fail-light:#fca5a5;--color-fail-bg:#fee2e2;--color-fail-gradient:linear-gradient(135deg,#ef4444 0%,#f87171 100%);--color-warning:#f59e0b;--color-warning-gradient:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);--color-border:#e2e8f0;--color-accent-1:#8b5cf6;--color-accent-2:#ec4899;--color-accent-3:#06b6d4;--color-accent:#a855f7;--gradient-hero:linear-gradient(135deg,#6366f10d 0%,#a855f70d 50%,#ec48990d 100%);--gradient-card-hover:linear-gradient(135deg,#6366f108 0%,#a855f708 100%);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--shadow-sm:0 1px 3px #00000014,0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012,0 2px 4px #0000000f;--shadow-lg:0 10px 25px #0000001a,0 6px 10px #00000014;--shadow-xl:0 20px 40px #00000026;--shadow-glow-primary:0 4px 20px #6366f14d;--shadow-glow-success:0 4px 20px #10b9814d;--shadow-glow-fail:0 4px 20px #ef44444d;--transition-fast:.15s ease;--transition-normal:.25s ease;--safe-area-top:env(safe-area-inset-top);--safe-area-bottom:env(safe-area-inset-bottom)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5}body:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(circle at 10% 20%,#6366f114 0%,#0000 40%),radial-gradient(circle at 90% 80%,#a855f714 0%,#0000 40%),radial-gradient(circle,#ec48990a 0%,#0000 50%);position:fixed;inset:0}body{min-height:100vh;overscroll-behavior:none;min-height:100dvh}#root{min-height:100vh;flex-direction:column;min-height:100dvh;display:flex}.app-layout{min-height:100vh;min-height:100dvh;padding-bottom:calc(70px + var(--safe-area-bottom));flex-direction:column;display:flex}.page{padding:var(--space-md);padding-top:calc(var(--space-md) + var(--safe-area-top));flex:1;width:100%;max-width:600px;margin:0 auto}.page-title{margin-bottom:var(--space-lg);background:linear-gradient(135deg,var(--color-primary)0%,var(--color-accent-1)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:800}.page-subtitle{color:var(--color-text-secondary);margin-top:calc(-1*var(--space-md));margin-bottom:var(--space-lg);font-size:1rem}.card{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--transition-normal),box-shadow var(--transition-normal);border:1px solid #fffc}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-title{margin-bottom:var(--space-sm);font-size:1rem;font-weight:600}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);touch-action:manipulation;border:none;font-size:1rem;font-weight:500;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--color-primary-gradient);color:#fff;box-shadow:var(--shadow-glow-primary)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px #6366f166}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text)}.btn-secondary:hover{background:var(--color-border)}.btn-success{background:var(--color-success-gradient);color:#fff;box-shadow:var(--shadow-glow-success)}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 25px #10b98166}.btn-danger{background:var(--color-fail-gradient);color:#fff;box-shadow:var(--shadow-glow-fail)}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 25px #ef444466}.btn-ghost{color:var(--color-text);background:0 0}.btn-ghost:hover{background:var(--color-bg-secondary)}.btn-lg{padding:var(--space-md)var(--space-lg);font-size:1.1rem}.btn-sm{padding:var(--space-xs)var(--space-sm);font-size:.875rem}.btn-icon{border-radius:var(--radius-sm);width:44px;height:44px;padding:0}.btn-block{width:100%}.form-group{margin-bottom:var(--space-md)}.form-label{margin-bottom:var(--space-xs);color:var(--color-text-secondary);font-size:.875rem;font-weight:500;display:block}.form-input{width:100%;padding:var(--space-sm)var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast);font-size:1rem}.form-input:focus{border-color:var(--color-primary);outline:none}.form-input::placeholder{color:var(--color-text-muted)}textarea.form-input{resize:vertical;min-height:100px}.emoji-suggestions{flex-wrap:wrap;flex:1;gap:4px;display:flex}.emoji-btn{border-radius:var(--radius-sm);background:var(--color-bg-secondary);cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);border:2px solid #0000;font-size:1.25rem}.emoji-btn:hover{background:var(--color-bg-card);transform:scale(1.15)}.emoji-btn.active{border-color:var(--color-primary);box-shadow:var(--shadow-glow-primary);background:linear-gradient(135deg,#6366f11a,#a855f71a)}.toggle-group{gap:var(--space-sm);flex-wrap:wrap;display:flex}.toggle-btn{padding:var(--space-sm)var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card);cursor:pointer;transition:all var(--transition-normal);font-size:.875rem;font-weight:500}.toggle-btn:hover{border-color:var(--color-primary-light);transform:translateY(-2px)}.toggle-btn.active{background:var(--color-primary-gradient);color:#fff;box-shadow:var(--shadow-glow-primary);border-color:#0000}.nav-bottom{-webkit-backdrop-filter:blur(20px);padding:var(--space-sm)var(--space-md);padding-bottom:calc(var(--space-sm) + var(--safe-area-bottom));z-index:100;background:#ffffffe6;border-top:1px solid #ffffff80;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 30px #0000001a}.nav-item{padding:var(--space-xs)var(--space-sm);color:var(--color-text-muted);border-radius:var(--radius-md);transition:all var(--transition-normal);flex-direction:column;align-items:center;gap:2px;font-size:.75rem;text-decoration:none;display:flex}.nav-item.active{color:var(--color-primary);background:#6366f11a}.nav-item.active svg{filter:drop-shadow(0 2px 4px #6366f14d)}.nav-item svg{width:24px;height:24px}.list{gap:var(--space-sm);flex-direction:column;display:flex}.list-item{align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);border:1px solid #fffc;display:flex}.list-item:hover{box-shadow:var(--shadow-md);border-left:3px solid var(--color-primary);transform:translate(4px)}.list-item-emoji{filter:drop-shadow(0 2px 4px #0000001a);font-size:1.75rem}.list-item-content{flex:1;min-width:0}.list-item-title{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.list-item-subtitle{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;overflow:hidden}.status-dot{border-radius:50%;width:12px;height:12px}.status-dot.success{background:var(--color-success)}.status-dot.fail{background:var(--color-fail)}.status-dot.empty{background:var(--color-border)}.stats-row{gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.stat-card{text-align:center;padding:var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:transform var(--transition-normal),box-shadow var(--transition-normal);border:1px solid #fffc;flex:1}.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)scale(1.02)}.stat-value{font-size:1.75rem;font-weight:800;line-height:1.2}.stat-value.success{background:var(--color-success-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.stat-value.fail{background:var(--color-fail-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.stat-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.week-table{background:var(--color-bg-card);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-lg);border:1px solid #fffc;overflow:hidden}.week-header{background:var(--color-primary-gradient);text-align:center;color:#fff;grid-template-columns:1fr repeat(7,40px);gap:1px;font-size:.75rem;font-weight:600;display:grid}.week-header>div{padding:var(--space-sm);background:0 0}.week-row{background:var(--color-border);grid-template-columns:1fr repeat(7,40px);gap:1px;display:grid}.week-row>div{background:var(--color-bg-card);padding:var(--space-sm)}.week-habit-name{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;overflow:hidden}.week-cell{cursor:pointer;touch-action:manipulation;min-height:40px;transition:all var(--transition-fast);border-radius:var(--radius-sm);justify-content:center;align-items:center;display:flex}.week-cell:hover{background:var(--color-bg-secondary);transform:scale(1.1)}.week-cell-icon{transition:transform var(--transition-fast);font-size:1rem}.week-cell-icon.success{color:var(--color-success);filter:drop-shadow(0 2px 4px #10b98166)}.week-cell-icon.fail{color:var(--color-fail);filter:drop-shadow(0 2px 4px #ef444466)}.swipe-container{perspective:1000px;height:320px;position:relative}.swipe-card{border-radius:var(--radius-xl);width:100%;height:100%;padding:var(--space-xl);text-align:center;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y;background:linear-gradient(145deg,#fff 0%,#f0f4ff 50%,#faf5ff 100%);border:2px solid #ffffffe6;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;overflow:hidden;box-shadow:0 20px 50px #6366f126,0 10px 20px #a855f71a,inset 0 1px #ffffffe6}.swipe-card:before{content:"";background:var(--color-primary-gradient);border-radius:var(--radius-xl)var(--radius-xl)0 0;height:5px;position:absolute;top:0;left:0;right:0}.swipe-card:after{content:"";pointer-events:none;background:radial-gradient(circle at 30% 30%,#6366f114 0%,#0000 50%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.swipe-card:active{cursor:grabbing}.swipe-card-emoji{margin-bottom:var(--space-md);filter:drop-shadow(0 4px 8px #0000001a);z-index:1;font-size:4rem;animation:3s ease-in-out infinite float;position:relative}.swipe-card-title{margin-bottom:var(--space-md);background:linear-gradient(135deg,#1e293b 0%,#6366f1 100%);-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700;position:relative}.swipe-card-description{color:var(--color-text-secondary);z-index:1;font-size:1rem;line-height:1.6;position:relative}.swipe-hint{padding:var(--space-md);color:var(--color-text-muted);justify-content:space-between;font-size:.875rem;display:flex}.swipe-hint-left{color:var(--color-fail)}.swipe-hint-right{color:var(--color-success)}.swipe-buttons{justify-content:center;gap:var(--space-xl);padding:var(--space-lg);display:flex}.swipe-btn{cursor:pointer;width:68px;height:68px;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.swipe-btn:active{transform:scale(.9)}.swipe-btn.fail{background:var(--color-fail-gradient);color:#fff;box-shadow:var(--shadow-glow-fail)}.swipe-btn.fail:hover{transform:scale(1.1);box-shadow:0 8px 30px #ef444480}.swipe-btn.success{background:var(--color-success-gradient);color:#fff;box-shadow:var(--shadow-glow-success)}.swipe-btn.success:hover{transform:scale(1.1);box-shadow:0 8px 30px #10b98180}.swipe-btn.undo{color:#fff;background:linear-gradient(135deg,#64748b 0%,#94a3b8 100%);width:52px;height:52px;box-shadow:0 4px 15px #64748b4d}.swipe-btn.undo:hover{transform:scale(1.1)}.progress-indicator{text-align:center;margin-bottom:var(--space-md);color:var(--color-text-secondary);font-size:.875rem}.progress-bar{height:8px;margin-top:var(--space-xs);background:linear-gradient(90deg,#6366f11a,#a855f71a);border-radius:4px;position:relative;overflow:hidden}.progress-bar:before{content:"";background:repeating-linear-gradient(90deg,#0000,#0000 10px,#ffffff1a 10px 20px);position:absolute;inset:0}.progress-bar-fill{background:var(--color-primary-gradient);height:100%;transition:width var(--transition-normal);border-radius:4px;position:relative;overflow:hidden;box-shadow:0 0 15px #6366f199,inset 0 1px #ffffff4d}.progress-bar-fill:after{content:"";background:linear-gradient(90deg,#0000,#fff6,#0000);width:100%;height:100%;animation:2s infinite shimmer;position:absolute;top:0;left:-100%}@keyframes shimmer{to{left:100%}}.results-card{text-align:center;padding:var(--space-xl);background:linear-gradient(145deg,var(--color-bg-card),var(--color-bg-secondary));position:relative;overflow:hidden}.results-card:before{content:"";background:radial-gradient(circle,#6366f11a 0%,#0000 50%);width:200%;height:200%;animation:3s ease-in-out infinite pulse-glow;position:absolute;top:-50%;left:-50%}@keyframes pulse-glow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.results-emoji{margin-bottom:var(--space-md);z-index:1;filter:drop-shadow(0 10px 20px #0003);font-size:5rem;animation:1s ease-in-out bounce,3s ease-in-out 1s infinite float;position:relative}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.results-title{margin-bottom:var(--space-sm);background:var(--color-primary-gradient);-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:700;position:relative}.results-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.results-stats{justify-content:center;gap:var(--space-xl);margin-bottom:var(--space-xl);display:flex}.results-stat{text-align:center}.results-stat-value{font-size:2.5rem;font-weight:800}.results-stat-value.text-fail{background:var(--color-fail-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.results-stat-value.text-success{background:var(--color-success-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.results-stat-label{color:var(--color-text-secondary);text-transform:uppercase;font-size:.75rem}.fails-list{text-align:left;margin-top:var(--space-lg)}.fails-list-title{color:var(--color-text-secondary);margin-bottom:var(--space-sm);font-size:.875rem}.fails-list-item{align-items:center;gap:var(--space-sm);padding:var(--space-sm)0;border-bottom:1px solid var(--color-border);display:flex}.fails-list-item:last-child{border-bottom:none}.chart-container{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-sm);margin-bottom:var(--space-md)}.chart-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.chart-title{font-size:1rem;font-weight:600}.chart-type-toggle{background:var(--color-bg-secondary);border-radius:var(--radius-sm);gap:4px;padding:4px;display:flex}.chart-type-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.chart-type-btn:hover{color:var(--color-text)}.chart-type-btn.active{background:var(--color-bg-card);color:var(--color-primary);box-shadow:var(--shadow-sm)}.line-chart-container{padding:var(--space-sm)0}.line-chart-svg{width:100%;height:180px}.chart-legend{justify-content:center;gap:var(--space-lg);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border);display:flex}.legend-item{align-items:center;gap:var(--space-xs);color:var(--color-text-secondary);font-size:.75rem;display:flex}.legend-dot{border-radius:50%;width:10px;height:10px}.legend-dot.fail{background:var(--color-fail)}.legend-dot.success{background:var(--color-success);box-shadow:0 0 0 2px var(--color-success-light)}.bar-chart{align-items:flex-end;gap:var(--space-xs);height:120px;padding-top:var(--space-sm);display:flex}.bar{background:linear-gradient(180deg,var(--color-fail-light)0%,var(--color-fail)100%);border-radius:var(--radius-sm)var(--radius-sm)0 0;min-height:4px;transition:transform var(--transition-fast);flex:1;position:relative}.bar:hover{filter:brightness(1.1);transform:scaleY(1.05)}.bar-label{color:var(--color-text-muted);font-size:.625rem;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}.bar-value{font-size:.75rem;font-weight:500;position:absolute;top:-18px;left:50%;transform:translate(-50%)}.modal-overlay{z-index:1000;padding:var(--space-md);background:#00000080;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal{background:var(--color-bg-card);border-radius:var(--radius-lg)var(--radius-lg)0 0;padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + var(--safe-area-bottom));width:100%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:1.25rem;font-weight:600}.modal-close{padding:var(--space-sm);cursor:pointer;color:var(--color-text-secondary);background:0 0;border:none}.onboarding{min-height:100vh;padding:var(--space-xl);padding-top:calc(var(--space-xl) + var(--safe-area-top));padding-bottom:calc(var(--space-xl) + var(--safe-area-bottom));background:radial-gradient(circle at 20% 30%,#6366f126 0%,transparent 40%),radial-gradient(circle at 80% 70%,#a855f726 0%,transparent 40%),radial-gradient(circle at 50% 100%,#ec48991a 0%,transparent 40%),var(--color-bg);flex-direction:column;display:flex}.onboarding-content{text-align:center;flex-direction:column;flex:1;justify-content:center;display:flex}.onboarding-emoji{margin-bottom:var(--space-lg);filter:drop-shadow(0 10px 30px #6366f14d);font-size:7rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-15px)rotate(5deg)}}.onboarding-title{margin-bottom:var(--space-md);background:linear-gradient(135deg,var(--color-primary)0%,var(--color-accent)50%,var(--color-accent-2)100%);-webkit-text-fill-color:transparent;text-shadow:none;-webkit-background-clip:text;background-clip:text;font-size:2.25rem;font-weight:800}.onboarding-text{color:var(--color-text-secondary);margin-bottom:var(--space-xl);font-size:1.1rem;line-height:1.7}.onboarding-actions,.template-list{gap:var(--space-md);flex-direction:column;display:flex}.template-card{padding:var(--space-md);background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-align:left;position:relative;overflow:hidden}.template-card:before{content:"";background:var(--color-primary-gradient);height:3px;transition:transform var(--transition-normal);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.template-card:hover:before{transform:scaleX(1)}.template-card.selected{border-color:var(--color-primary);box-shadow:var(--shadow-glow-primary);background:linear-gradient(135deg,#6366f10d 0%,#8b5cf60d 100%)}.template-card.selected:before{transform:scaleX(1)}.template-description{color:var(--color-text-secondary);font-size:.875rem}.template-count{color:var(--color-text-muted);margin-top:var(--space-xs);font-size:.75rem}.week-nav{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.week-nav-title{font-weight:600}.week-nav-btn{padding:var(--space-sm);cursor:pointer;color:var(--color-text-secondary);border-radius:var(--radius-sm);background:0 0;border:none}.week-nav-btn:hover{background:var(--color-bg-secondary)}.period-selector{gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.period-btn{padding:var(--space-sm);background:var(--color-bg-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:none;flex:1;font-size:.875rem}.period-btn.active{background:var(--color-primary-gradient);color:#fff;box-shadow:var(--shadow-glow-primary)}.settings-section{margin-bottom:var(--space-xl)}.settings-section-title{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-sm);font-size:.875rem}.settings-item{padding:var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-md);margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.settings-item-label{font-weight:500}.settings-item-value{color:var(--color-text-secondary)}.toggle-switch{background:var(--color-bg-secondary);cursor:pointer;width:50px;height:28px;transition:background var(--transition-fast);border-radius:14px;position:relative}.toggle-switch.active{background:var(--color-primary-gradient);box-shadow:var(--shadow-glow-primary)}.toggle-switch-handle{width:24px;height:24px;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.toggle-switch.active .toggle-switch-handle{transform:translate(22px)}.templates-list{gap:var(--space-sm);flex-direction:column;max-height:100vh;display:flex;overflow:hidden auto}.template-card{align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--gradient-card-hover);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);display:flex}.template-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translate(4px)}.template-emojis{flex-wrap:wrap;flex-shrink:0;width:80px;padding:4px;font-size:1.5rem;display:flex}.template-emojis span{text-align:center;width:32px;height:32px;margin:2px;line-height:32px;display:inline-block}.template-info{flex:1;min-width:0}.template-name{margin-bottom:2px;font-weight:600}.template-description{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.75rem;overflow:hidden}.template-count{color:var(--color-primary);font-size:.7rem;font-weight:500}.habits-select-list{gap:var(--space-xs);flex-direction:column;max-height:50vh;display:flex;overflow-y:auto}.habit-select-item{align-items:center;gap:var(--space-sm);padding:var(--space-sm)var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:2px solid #0000;display:flex}.habit-select-item:hover:not(.exists){background:var(--gradient-card-hover)}.habit-select-item.selected{border-color:var(--color-primary);background:linear-gradient(135deg,#6366f10d,#a855f70d)}.habit-select-item.exists{opacity:.5;cursor:not-allowed}.habit-select-emoji{text-align:center;width:40px;font-size:1.5rem}.habit-select-info{flex:1;min-width:0}.habit-select-name{font-size:.9rem;font-weight:500}.habit-select-desc{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.habit-select-check{border:2px solid var(--color-border);width:22px;height:22px;transition:all var(--transition-fast);border-radius:50%}.habit-select-check.checked{background:var(--color-primary-gradient);border-color:var(--color-primary);box-shadow:var(--shadow-glow-primary)}.habit-select-check.checked:after{content:"✓";color:#fff;justify-content:center;align-items:center;height:100%;font-size:.75rem;font-weight:700;display:flex}.habit-exists-badge{background:var(--color-bg-secondary);color:var(--color-text-muted);border-radius:var(--radius-sm);padding:2px 8px;font-size:.65rem}.empty-state{text-align:center;padding:var(--space-xl)var(--space-lg);color:var(--color-text-secondary);border-radius:var(--radius-xl);border:2px dashed var(--color-border);background:linear-gradient(145deg,#6366f108,#a855f708)}.empty-state-emoji{margin-bottom:var(--space-md);filter:grayscale(.3);font-size:4rem;animation:3s ease-in-out infinite float}.empty-state-title{margin-bottom:var(--space-sm);color:var(--color-text);font-size:1.25rem;font-weight:600}.empty-state-text{margin-bottom:var(--space-lg);line-height:1.6}.loading{justify-content:center;align-items:center;gap:var(--space-lg);background:radial-gradient(circle,#6366f11a 0%,#0000 50%);flex-direction:column;min-height:100vh;display:flex}.loading-spinner{background:conic-gradient(from 0deg,var(--color-primary),var(--color-accent),var(--color-accent-2),var(--color-accent-3),var(--color-primary));border-radius:50%;width:56px;height:56px;animation:1s linear infinite spin;box-shadow:0 0 30px #6366f166;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 5px))}.loading-text{color:var(--color-text-secondary);font-size:1rem;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.drag-handle{cursor:grab;padding:var(--space-sm);color:var(--color-text-muted)}.drag-handle:active{cursor:grabbing}.toast-container{bottom:calc(80px + var(--safe-area-bottom));z-index:1100;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--color-text);color:#fff;padding:var(--space-sm)var(--space-md);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);font-size:.875rem}.text-success{color:var(--color-success)}.text-fail{color:var(--color-fail)}.text-muted{color:var(--color-text-muted)}.mt-sm{margin-top:var(--space-sm)}.mt-lg{margin-top:var(--space-lg)}.mb-sm{margin-bottom:var(--space-sm)}.mb-lg{margin-bottom:var(--space-lg)}.flex-1{flex:1}@media (prefers-color-scheme:dark){:root{--color-bg:linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 100%);--color-bg-solid:#0f0f1a;--color-bg-card:#1e1e2ecc;--color-bg-secondary:#2d2d44;--color-text:#e0e0e0;--color-text-secondary:#a0a0b0;--color-text-muted:#666680;--color-border:#3d3d5c}.nav-bottom{background:#1e1e2ee6}.card,.list-item,.stat-card{border-color:#ffffff1a}.swipe-card{background:linear-gradient(145deg,#1e1e2e 0%,#2d2d44 100%)}.swipe-card:before{background:linear-gradient(90deg,var(--color-accent-1),var(--color-accent-2),var(--color-accent-3))}}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.mb-md{margin-bottom:var(--space-md)}.mt-md{margin-top:var(--space-md)}.text-center{text-align:center}.animate-spin{animation:1s linear infinite spin}