@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg-color:#f5f5f7;--panel-bg:#fff;--panel-border:#00000014;--shadow-color:#00000008;--card-shadow:0 4px 20px 0 var(--shadow-color);--text-primary:#1d1d1f;--text-secondary:#86868b;--text-muted:#a1a1a6;--primary:#0071e3;--primary-hover:#0077ed;--primary-light:#0071e30f;--primary-border:#0071e326;--success:#34c759;--success-hover:#2ec052;--success-light:#34c75914;--danger:#ff3b30;--danger-hover:#f53126;--danger-light:#ff3b3014;--warning:#ff9500;--warning-light:#ff950014;--info:#5ac8fa;--info-light:#5ac8fa14;--cat-health-bg:#34c75914;--cat-health-text:#24b149;--cat-study-bg:#0071e314;--cat-study-text:#0071e3;--cat-sports-bg:#ff950014;--cat-sports-text:#e07b00;--cat-life-bg:rgba(255, 4d, 94, .08);--cat-life-text:#ff2d55;--cat-other-bg:#8e8e9314;--cat-other-text:#8e8e93;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.25, 1, .5, 1)}.dark-theme{--bg-color:#000;--panel-bg:#1c1c1e;--panel-border:#ffffff14;--shadow-color:#00000080;--card-shadow:0 4px 24px 0 var(--shadow-color);--text-primary:#f5f5f7;--text-secondary:#a1a1a6;--text-muted:#626266;--primary:#0a84ff;--primary-hover:#208eff;--primary-light:#0a84ff1f;--primary-border:#0a84ff40;--success:#30d158;--success-hover:#40d766;--success-light:#30d1581f;--danger:#ff453a;--danger-hover:#ff554c;--danger-light:#ff453a1f;--warning:#ff9f0a;--warning-light:#ff9f0a1f;--info:#64d2ff;--info-light:#64d2ff1f;--cat-health-bg:#30d1581f;--cat-health-text:#30d158;--cat-study-bg:#0a84ff1f;--cat-study-text:#0a84ff;--cat-sports-bg:#ff9f0a1f;--cat-sports-text:#ff9f0a;--cat-life-bg:#ff375f1f;--cat-life-text:#ff375f;--cat-other-bg:#8e8e931f;--cat-other-text:#98989d}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:flex-start;padding:50px 20px;display:flex}#app{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);width:100%;max-width:900px;box-shadow:var(--card-shadow);min-height:calc(100vh - 100px);transition:background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);flex-direction:column;padding:40px 48px;display:flex}@media (width<=768px){body{padding:16px 8px}#app{border-radius:var(--radius-md);min-height:calc(100vh - 32px);padding:24px 20px}}header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.brand-section{align-items:center;gap:14px;display:flex}.app-logo{background:var(--primary);color:#fff;border-radius:var(--radius-md);justify-content:center;align-items:center;width:42px;height:42px;display:flex;box-shadow:0 4px 10px #0071e326}.brand-title{text-align:left}.brand-title h1{letter-spacing:-.5px;color:var(--text-primary);font-size:22px;font-weight:600;line-height:1.2}.brand-title p{color:var(--text-secondary);font-size:13px;font-weight:400}.actions-section{align-items:center;gap:12px;display:flex}.btn{font-family:var(--font-sans);border-radius:var(--radius-full);cursor:pointer;z-index:1;transition:transform var(--transition-fast) var(--transition-normal);background:0 0;border:none;justify-content:center;align-items:center;gap:6px;padding:8px 18px;font-size:14px;font-weight:500;display:inline-flex;position:relative;overflow:hidden}.btn:active{transform:scale(.97)}.btn-primary{color:#fff}.btn-primary:before{content:"";border-radius:inherit;z-index:-1;filter:url(#liquid-glass);transition:all var(--transition-normal);background:linear-gradient(135deg,#0071e3d9 0%,#0050b4f2 100%);border:1px solid #ffffff40;position:absolute;inset:0;box-shadow:inset 0 1px 1px #fff6,inset 0 -1px 2px #00000026,0 4px 12px #0071e326}.btn-primary:hover:before{filter:url(#liquid-glass)brightness(1.1);background:linear-gradient(135deg,#0071e3f2 0%,#0050b4 100%);box-shadow:inset 0 1.5px 2px #ffffff80,inset 0 -1.5px 2px #0003,0 6px 16px #0071e340}.btn-secondary{color:var(--text-primary)}.btn-secondary:before{content:"";-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:inherit;z-index:-1;filter:url(#liquid-glass);transition:all var(--transition-normal);background:#ffffff8c;position:absolute;inset:0;box-shadow:inset 0 1px 1.5px #ffffffb3,inset 0 -1px 1.5px #0000000d,0 2px 8px #00000005}.dark-theme .btn-secondary:before{background:#2c2c2ea6;box-shadow:inset 0 1px 1.5px #ffffff1a,inset 0 -1px 1.5px #0000004d,0 2px 8px #0003}.btn-secondary:hover:before{filter:url(#liquid-glass)brightness(1.03);background:#ffffffbf}.dark-theme .btn-secondary:hover:before{filter:url(#liquid-glass)brightness(1.1);background:#2c2c2ed9}.btn-icon-only{border-radius:var(--radius-full);width:38px;height:38px;color:var(--text-secondary);padding:0}.btn-icon-only:before{content:"";-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:inherit;z-index:-1;filter:url(#liquid-glass);transition:all var(--transition-normal);background:#ffffff8c;position:absolute;inset:0;box-shadow:inset 0 1px 1px #fff9,0 2px 6px #00000005}.dark-theme .btn-icon-only:before{background:#2c2c2ea6}.btn-icon-only:hover{color:var(--text-primary)}.btn-icon-only:hover:before{filter:url(#liquid-glass)brightness(1.05);background:#ffffffbf}.dark-theme .btn-icon-only:hover:before{filter:url(#liquid-glass)brightness(1.1);background:#2c2c2ed9}.stats-container{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px;display:grid}@media (width<=768px){.stats-container{grid-template-columns:1fr;gap:12px}}.stats-card{background-color:var(--bg-color);border:1px solid var(--panel-border);border-radius:var(--radius-md);transition:background-color var(--transition-normal), border-color var(--transition-normal);align-items:center;gap:16px;padding:20px;display:flex}.stats-card:hover{border-color:#00000026}.dark-theme .stats-card:hover{border-color:#ffffff26}.progress-circular-wrapper{width:70px;height:70px;position:relative}.progress-text-center{color:var(--text-primary);font-size:14px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stats-info{text-align:left;flex-grow:1}.stats-info .label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-size:12px;font-weight:500}.stats-info .value{color:var(--text-primary);font-size:20px;font-weight:700}.stats-info .sub{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;max-width:150px;margin-top:2px;font-size:11px;overflow:hidden}.stats-icon-box{border-radius:var(--radius-full);justify-content:center;align-items:center;width:40px;height:40px;display:flex}.stats-icon-box.success{background-color:var(--success-light);color:var(--success)}.stats-icon-box.primary{background-color:var(--primary-light);color:var(--primary)}.presets-section{text-align:left;margin-bottom:32px}.presets-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:12px;font-weight:600}.presets-list{flex-wrap:wrap;gap:8px;display:flex}.preset-chip{background-color:var(--bg-color);border:1px solid var(--panel-border);border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:5px;padding:6px 14px;font-size:13px;font-weight:400;display:inline-flex}.preset-chip:hover{background-color:var(--primary-light);border-color:var(--primary-border);color:var(--primary)}.filter-controls{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.search-input-wrapper{flex-grow:1;min-width:200px;position:relative}.form-input{border-radius:var(--radius-sm);border:1px solid var(--panel-border);background-color:var(--bg-color);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition-fast);padding:10px 14px;font-size:14px}.form-input:focus{background-color:var(--panel-bg);border-color:var(--primary);outline:none}.search-input-wrapper .form-input{border-radius:var(--radius-full);padding-left:36px}.segmented-control{background-color:var(--bg-color);border:1px solid var(--panel-border);border-radius:var(--radius-full);padding:3px;display:flex}.segmented-control-btn{font-family:var(--font-sans);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;padding:6px 14px;font-size:13px;font-weight:500}.segmented-control-btn.active{background-color:var(--panel-bg);color:var(--text-primary);box-shadow:0 1px 3px #00000014}.category-select{border-radius:var(--radius-full);cursor:pointer;padding-right:28px}.habits-list{flex-grow:1;grid-template-columns:1fr;gap:12px;margin-bottom:32px;display:grid}.habit-card{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);transition:all var(--transition-fast);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.habit-card:hover{background-color:var(--bg-color)}.habit-card.is-completed{opacity:.85}.habit-card.is-completed .habit-name{color:var(--text-secondary);text-decoration:line-through}.habit-details{text-align:left;flex-grow:1;padding-right:16px}.habit-name{color:var(--text-primary);font-size:15px;font-weight:600}.habit-meta{align-items:center;gap:8px;margin-top:6px;display:flex}.badge{border-radius:var(--radius-full);padding:2px 8px;font-size:11px;font-weight:500}.badge-health{background-color:var(--cat-health-bg);color:var(--cat-health-text)}.badge-study{background-color:var(--cat-study-bg);color:var(--cat-study-text)}.badge-sports{background-color:var(--cat-sports-bg);color:var(--cat-sports-text)}.badge-life{background-color:var(--cat-life-bg);color:var(--cat-life-text)}.badge-other{background-color:var(--cat-other-bg);color:var(--cat-other-text)}.frequency-badge{color:var(--text-secondary);border:1px solid var(--panel-border);background-color:#00000008}.dark-theme .frequency-badge{background-color:#ffffff08}.habit-actions{align-items:center;gap:4px;display:flex}.check-btn{border-radius:var(--radius-full);border:2px solid var(--text-muted);cursor:pointer;width:28px;height:28px;transition:all var(--transition-fast);color:#0000;background:0 0;justify-content:center;align-items:center;margin-left:8px;display:flex}.check-btn:hover{border-color:var(--primary);color:var(--primary);background-color:var(--primary-light)}.check-btn.completed{border-color:var(--success);background-color:var(--success);color:#fff}.check-btn.completed:hover{background-color:var(--success-hover);border-color:var(--success-hover)}.action-btn-sm{border-radius:var(--radius-full);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.action-btn-sm:hover{color:var(--text-primary);background-color:#0000000d}.dark-theme .action-btn-sm:hover{background-color:#ffffff0d}.action-btn-sm.delete:hover{background-color:var(--danger-light);color:var(--danger)}.empty-state{text-align:center;background-color:var(--bg-color);border:1px dashed var(--panel-border);border-radius:var(--radius-md);color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;padding:48px 24px;display:flex}.empty-state-icon{color:var(--text-muted);margin-bottom:12px}.empty-state h3{color:var(--text-primary);margin-bottom:4px;font-size:16px;font-weight:600}.empty-state p{margin-bottom:16px;font-size:13px}.modal-overlay{-webkit-backdrop-filter:blur(10px);z-index:1000;animation:fadeIn var(--transition-fast) ease-out;background-color:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);width:90%;max-width:440px;animation:slideUp var(--transition-normal) cubic-bezier(.2, .8, .2, 1);text-align:left;padding:28px;box-shadow:0 10px 40px #00000026}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-header h3{letter-spacing:-.3px;color:var(--text-primary);font-size:18px;font-weight:600}.close-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-full);background:0 0;background-color:var(--bg-color);border:none;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.close-btn:hover{color:var(--text-primary)}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.form-input-text{border-radius:var(--radius-sm);border:1px solid var(--panel-border);background-color:var(--bg-color);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition-fast);padding:10px 14px;font-size:14px}.form-input-text:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #0071e326}.category-options{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.category-radio{display:none}.category-label{border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--panel-border);background-color:var(--bg-color);color:var(--text-secondary);transition:all var(--transition-fast);justify-content:center;align-items:center;padding:8px;font-size:12px;font-weight:500;display:flex}.category-label:hover{color:var(--text-primary)}.category-radio:checked+.category-label{background-color:var(--primary);color:#fff;border-color:var(--primary)}.modal-footer{justify-content:flex-end;gap:8px;margin-top:24px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}footer{border-top:1px solid var(--panel-border);color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:auto;padding-top:20px;font-size:12px;display:flex}.footer-links{gap:12px;display:flex}.footer-links a{color:var(--text-muted);text-decoration:none}.footer-links a:hover{color:var(--text-secondary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}