:root{--color-bg: #f9fafb;--color-surface: #ffffff;--color-surface-hover: #f3f4f6;--color-border: #e5e7eb;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-muted: #9ca3af;--color-brand-start: #111827;--color-brand-rgb: 17, 24, 39;--color-brand-end: #374151;--color-brand-text: #ffffff;--color-success: #10b981;--color-danger: #ef4444;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-card: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .2s ease-in-out}[data-theme=dark]{--color-bg: #111827;--color-surface: #1f2937;--color-surface-hover: #374151;--color-border: #374151;--color-text-primary: #f9fafb;--color-text-secondary: #9ca3af;--color-text-muted: #6b7280;--color-brand-start: #ffffff;--color-brand-rgb: 255, 255, 255;--color-brand-end: #e5e7eb;--color-brand-text: #111827}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100%;display:flex;flex-direction:column}button{cursor:pointer;font-family:inherit;border:none;background:transparent}input,button,textarea,select{font:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-surface-hover);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.settings-overlay{position:fixed;inset:0;background:transparent;z-index:40}.settings-menu{position:absolute;top:60px;right:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:240px;padding:var(--space-4);z-index:50;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-section{margin-bottom:var(--space-4)}.settings-section:last-child{margin-bottom:0}.settings-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:500}.theme-toggle-btn{width:100%;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-sm);transition:all .2s}.theme-toggle-btn:hover{background:var(--color-surface-hover)}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.color-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}.color-btn:hover{transform:scale(1.1)}.color-btn.active{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-text-primary)}.layout{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;background-color:var(--color-bg);color:var(--color-text-primary)}.navbar{width:100%;height:64px;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);z-index:10}.brand{display:flex;align-items:center;gap:var(--space-2);margin-bottom:0}.brand-icon{width:32px;height:32px;background:var(--color-text-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff}.brand-text{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-primary)}.nav{display:flex;flex-direction:row;gap:var(--space-4);align-items:center}.nav-actions{display:flex;align-items:center;gap:var(--space-2)}.nav-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast);font-weight:500;font-size:var(--font-size-sm)}.nav-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.nav-item.active{background:rgba(var(--color-brand-rgb),.1);color:var(--color-brand-start);font-weight:600}.main-content{flex:1;overflow-y:auto;position:relative;background-color:var(--color-bg)}@media(max-width:768px){.nav-item span{display:none}}.footer{width:100%;padding:var(--space-4);text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-top:auto;opacity:.7}.habit-chart-container{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8);box-shadow:var(--shadow-sm)}.chart-header{margin-bottom:var(--space-6);display:flex;justify-content:space-between;align-items:flex-start}.chart-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary)}.chart-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:var(--color-border);stroke-dasharray:4 4}.recharts-tooltip-wrapper{outline:none}.habit-row{display:grid;grid-template-columns:200px max-content;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);transition:background-color var(--transition-fast);min-width:max-content}.habit-row:hover,.habit-row:hover .habit-name{background-color:var(--color-surface-hover)}.habit-name{font-weight:500;color:var(--color-text-primary);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:sticky;left:0;background:var(--color-surface);z-index:5;transition:background-color var(--transition-fast)}.days-grid{display:flex;gap:4px;padding-bottom:0}.days-grid::-webkit-scrollbar{height:4px}.day-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:28px}.day-label{font-size:.7rem;color:var(--color-text-secondary);margin-bottom:var(--space-1)}.text-brand{color:var(--color-text-primary);font-weight:700}.label-today{color:var(--color-text-primary);font-weight:800;font-size:.8rem}.checkbox{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.checkbox:hover{border-color:var(--color-text-secondary)}.checkbox.checked{background:var(--color-brand-start);border-color:var(--color-brand-start);color:#fff}.checkbox-icon{color:currentColor;width:14px;height:14px;opacity:0;transform:scale(.5);transition:all var(--transition-fast)}.checkbox.checked .checkbox-icon{opacity:1;transform:scale(1)}.checkbox.checkbox-today{border:1px solid var(--color-text-primary)}.checkbox-future{background-color:var(--color-bg);border-color:var(--color-border);opacity:.5;cursor:not-allowed}.checkbox-future:hover{border-color:var(--color-border)}.checkbox.weekly-complete{background:var(--color-brand-start);border-color:var(--color-brand-start);color:#fff;opacity:.5}.checkbox.weekly-complete .checkbox-icon{opacity:1;transform:scale(1)}.habit-list-container{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);overflow:hidden}.habit-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);padding-bottom:0;border-bottom:none}.habit-list-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary)}.add-habit-form{display:flex;gap:var(--space-2)}.habit-input{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);width:100%;min-width:200px;transition:all var(--transition-fast);font-size:var(--font-size-sm)}.habit-input:focus{outline:none;border-color:var(--color-text-primary);box-shadow:0 0 0 1px var(--color-text-primary)}.habit-input::placeholder{color:var(--color-text-muted)}.btn-add{background:var(--color-text-primary);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:500;font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-2);transition:opacity var(--transition-fast)}.btn-add:hover{opacity:.9}.habit-table-scroll{overflow-x:auto;padding-bottom:var(--space-2);margin-right:0;position:relative;padding-bottom:0}.habit-header-row{display:grid;grid-template-columns:200px max-content;gap:var(--space-4);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-2);margin-bottom:0;min-width:max-content}.habit-header-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);position:sticky;left:0;background:var(--color-surface);z-index:10;display:flex;align-items:center}.empty-state{padding:var(--space-12);text-align:center;color:var(--color-text-secondary);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);position:sticky;left:0}.habit-manage-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-2);transition:all var(--transition-fast)}.habit-manage-row:hover{border-color:var(--color-text-secondary)}.habit-manage-name{font-weight:500;color:var(--color-text-primary)}.btn-delete{display:flex;align-items:center;justify-content:center;padding:var(--space-2);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.btn-delete:hover{color:var(--color-danger);background:#ef44441a}.btn-edit{display:flex;align-items:center;justify-content:center;padding:var(--space-2);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);margin-right:var(--space-1)}.btn-edit:hover{color:var(--color-text-primary);background:var(--color-surface-hover)}.edit-actions{display:flex;align-items:center;gap:var(--space-1)}.edit-input{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text-primary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-right:var(--space-2);width:100%}.edit-input:focus{outline:none;border-color:var(--color-text-primary)}.habit-manager-container{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.manager-header{margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.add-habit-section{display:flex;gap:var(--space-2);margin-bottom:var(--space-6)}.habit-list-manage{display:flex;flex-direction:column}