:root,[data-theme=light]{--color-surface: #FFFFFF;--color-surface-variant: #F5F5F5;--color-on-surface: #1A1A1A;--color-on-surface-variant: #666666;--color-primary: #1A1A1A;--color-on-primary: #FFFFFF;--color-outline: #E0E0E0;--color-outline-variant: #CCCCCC;--color-error: #B3261E;--color-on-error: #FFFFFF;--color-success: #2E7D32;--color-accent: #0066CC}[data-theme=dark]{--color-surface: #121212;--color-surface-variant: #1E1E1E;--color-on-surface: #E0E0E0;--color-on-surface-variant: #A0A0A0;--color-primary: #E0E0E0;--color-on-primary: #121212;--color-outline: #333333;--color-outline-variant: #444444;--color-error: #CF6679;--color-on-error: #121212;--color-success: #81C784;--color-accent: #82B1FF}:root{--font-family: Inter, system-ui, -apple-system, sans-serif;--text-title: 600 24px/32px var(--font-family);--text-heading: 600 18px/24px var(--font-family);--text-body: 400 16px/24px var(--font-family);--text-caption: 400 14px/20px var(--font-family);--text-label: 500 12px/16px var(--font-family);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-none: 0px;--radius-sm: 4px;--elevation-0: none;--elevation-1: 0 1px 2px rgba(0,0,0,.08);--elevation-2: 0 2px 4px rgba(0,0,0,.12);--elevation-3: 0 4px 8px rgba(0,0,0,.16);--motion-quick: .1s ease-out;--motion-standard: .2s ease-in-out;--motion-emphasis: .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--color-surface);color:var(--color-on-surface);line-height:1.5}.app{max-width:640px;margin:0 auto;padding:var(--space-2xl) var(--space-md)}.app-header{margin-bottom:var(--space-lg)}.app-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.app-title{font:var(--text-title);color:var(--color-on-surface)}.theme-selector{display:flex;gap:4px;background:var(--color-surface-variant);padding:4px;border-radius:var(--radius-sm)}.theme-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--color-on-surface-variant);cursor:pointer;border-radius:var(--radius-sm);transition:background-color var(--motion-quick),color var(--motion-quick)}.theme-btn:hover{background:var(--color-outline)}.theme-btn--active{background:var(--color-surface);color:var(--color-on-surface);box-shadow:var(--elevation-1)}.app-nav{display:flex;gap:var(--space-sm)}.app-nav-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:none;background:transparent;font:var(--text-body);color:var(--color-on-surface-variant);cursor:pointer;border-radius:var(--radius-sm);transition:background-color var(--motion-quick),color var(--motion-quick)}.app-nav-btn:hover{background-color:var(--color-surface-variant)}.app-nav-btn--active{color:var(--color-on-surface);background-color:var(--color-surface-variant);font-weight:600}.app-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background-color:var(--color-primary);color:var(--color-on-primary);font:var(--text-label);border-radius:10px}.app-main{display:flex;flex-direction:column;gap:var(--space-lg)}.task-input-container{display:flex;gap:var(--space-sm)}.task-input{flex:1;height:48px;padding:0 var(--space-md);border:1px solid var(--color-outline);border-radius:var(--radius-sm);background-color:var(--color-surface-variant);font:var(--text-body);color:var(--color-on-surface);transition:border-color var(--motion-quick),box-shadow var(--motion-quick),background-color var(--motion-quick)}.task-input::placeholder{color:var(--color-on-surface-variant)}.task-input:focus{outline:none;border-color:var(--color-accent);background-color:var(--color-surface);box-shadow:var(--elevation-1)}.task-input-button{height:48px;padding:0 var(--space-lg);border:none;border-radius:var(--radius-sm);background-color:var(--color-primary);color:var(--color-on-primary);font:var(--text-label);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background-color var(--motion-quick)}.task-input-button:hover{background-color:#333}.task-input-button:focus{outline:2px solid var(--color-accent);outline-offset:2px}.task-input-button:active{background-color:#000}.task-list{display:flex;flex-direction:column}.task-list-empty{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) 0;text-align:center}.task-list-empty-icon{color:var(--color-on-surface-variant);opacity:.4;margin-bottom:var(--space-md)}.task-list-empty-title{font:var(--text-heading);color:var(--color-on-surface);margin-bottom:var(--space-sm)}.task-list-empty-description{font:var(--text-body);color:var(--color-on-surface-variant)}.task-item{display:flex;align-items:center;min-height:56px;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-outline);transition:background-color var(--motion-quick)}.task-item:hover{background-color:var(--color-surface-variant)}.task-item--completed{opacity:.6}.task-item--completed .task-item-text{text-decoration:line-through}.task-item-drag-handle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:var(--color-on-surface-variant);cursor:grab;transition:background-color var(--motion-quick);border-radius:var(--radius-sm)}.task-item-drag-handle:hover{background-color:var(--color-surface-variant)}.task-item-drag-handle:active{cursor:grabbing}.task-item--dragging{box-shadow:var(--elevation-3);background-color:var(--color-surface)}.task-item-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer}.task-item-checkbox input{position:absolute;opacity:0;width:24px;height:24px;cursor:pointer}.task-item-checkbox-visual{width:24px;height:24px;border:2px solid var(--color-on-surface-variant);border-radius:var(--radius-sm);transition:background-color var(--motion-quick),border-color var(--motion-quick)}.task-item-checkbox input:checked+.task-item-checkbox-visual{background-color:var(--color-primary);border-color:var(--color-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");background-size:18px;background-position:center;background-repeat:no-repeat}.task-item-checkbox input:focus+.task-item-checkbox-visual{border-color:var(--color-accent)}.task-item-checkbox:hover .task-item-checkbox-visual{border-color:var(--color-on-surface)}.task-item-text{flex:1;font:var(--text-body);color:var(--color-on-surface);padding:0 var(--space-sm);cursor:text;border-radius:var(--radius-sm);transition:background-color var(--motion-quick)}.task-item-text:hover{background-color:#0000000a}.task-item-text:focus{outline:2px solid var(--color-accent);outline-offset:2px}.task-item-edit-input{flex:1;height:36px;padding:0 var(--space-sm);border:1px solid var(--color-accent);border-radius:var(--radius-sm);background-color:var(--color-surface);font:var(--text-body);color:var(--color-on-surface);box-shadow:var(--elevation-1)}.task-item-edit-input:focus{outline:none;border-color:var(--color-accent)}.task-item-delete{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:var(--color-on-surface-variant);cursor:pointer;transition:background-color var(--motion-quick);border-radius:var(--radius-sm)}.task-item-delete:hover{background-color:var(--color-surface-variant)}.task-item-delete:focus{outline:2px solid var(--color-accent);outline-offset:-2px}.repository{display:flex;flex-direction:column;gap:var(--space-md)}.repository-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0}.repository-count{font:var(--text-caption);color:var(--color-on-surface-variant)}.repository-clear-btn{padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-outline);border-radius:var(--radius-sm);background:transparent;font:var(--text-caption);color:var(--color-error);cursor:pointer;transition:background-color var(--motion-quick)}.repository-clear-btn:hover{background-color:#b3261e14}.repository-empty{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) 0;text-align:center}.repository-empty-icon{color:var(--color-on-surface-variant);opacity:.4;margin-bottom:var(--space-md)}.repository-empty-title{font:var(--text-heading);color:var(--color-on-surface);margin-bottom:var(--space-sm)}.repository-empty-description{font:var(--text-body);color:var(--color-on-surface-variant)}.repository-group{margin-bottom:var(--space-md)}.repository-group-title{font:var(--text-caption);color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-sm) 0;border-bottom:1px solid var(--color-outline);margin-bottom:var(--space-sm)}.repository-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-outline);transition:background-color var(--motion-quick)}.repository-item:hover{background-color:var(--color-surface-variant)}.repository-item-text{flex:1;font:var(--text-body);color:var(--color-on-surface-variant);text-decoration:line-through}.repository-item-actions{display:flex;gap:var(--space-xs)}.repository-item-restore,.repository-item-delete{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--color-on-surface-variant);cursor:pointer;border-radius:var(--radius-sm);transition:background-color var(--motion-quick)}.repository-item-restore:hover{background-color:#2e7d321a;color:var(--color-success)}.repository-item-delete:hover{background-color:#b3261e1a;color:var(--color-error)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}