*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0a0b;--bg-secondary: #111113;--bg-tertiary: #18181b;--bg-hover: #1f1f23;--border-color: #27272a;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #22c55e;--accent-hover: #16a34a;--priority-high: #ef4444;--priority-medium: #f59e0b;--priority-low: #3b82f6;--danger: #dc2626;--danger-hover: #b91c1c;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3);--transition: .15s ease}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh}#root{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 1rem 2rem;width:100%;max-width:600px;margin:0 auto}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.navbar-brand{display:flex;align-items:center;gap:.5rem}.logo{font-size:1.25rem}.brand-text{font-size:1.125rem;font-weight:600;letter-spacing:-.025em}.navbar-stats{display:flex;align-items:center;gap:.375rem;font-size:.875rem}.stat{display:flex;align-items:baseline;gap:.25rem}.stat-value{font-weight:600;color:var(--accent)}.stat-label{color:var(--text-muted);font-size:.75rem}.stat-divider{color:var(--text-muted)}.hero{text-align:center;padding:3rem 0 2rem}.hero-date{color:var(--text-muted);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.hero-greeting{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.25rem}.hero-subtitle{color:var(--text-secondary);font-size:1rem}.todo-container{width:100%}.todo-input-form{margin-bottom:1rem}.input-wrapper{display:flex;gap:.5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:.5rem}.todo-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:.9375rem;padding:.5rem .75rem;outline:none}.todo-input::placeholder{color:var(--text-muted)}.priority-select{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;padding:.375rem .5rem;cursor:pointer;outline:none;transition:border-color var(--transition)}.priority-select:hover,.priority-select:focus{border-color:var(--accent)}.add-btn{background:var(--accent);border:none;border-radius:var(--radius-sm);color:var(--bg-primary);font-size:1.25rem;font-weight:600;width:40px;height:40px;cursor:pointer;transition:background-color var(--transition)}.add-btn:hover{background:var(--accent-hover)}.filter-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem}.filter-buttons{display:flex;gap:.25rem;background:var(--bg-secondary);border-radius:var(--radius-md);padding:.25rem}.filter-btn{background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.8125rem;padding:.5rem .875rem;cursor:pointer;transition:all var(--transition)}.filter-btn:hover{color:var(--text-primary)}.filter-btn.active{background:var(--bg-tertiary);color:var(--text-primary)}.clear-btn{background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.75rem;padding:.5rem .75rem;cursor:pointer;transition:all var(--transition)}.clear-btn:hover{border-color:var(--danger);color:var(--danger)}.todo-list{display:flex;flex-direction:column;gap:.5rem}.todo-list-empty{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}.empty-text{font-size:.9375rem}.todo-item{display:flex;align-items:center;gap:.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.875rem 1rem;transition:all var(--transition)}.todo-item:hover{background:var(--bg-hover);border-color:var(--bg-hover)}.todo-item.completed{opacity:.6}.checkbox{width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0;padding:0}.checkbox:hover{border-color:var(--accent)}.checkbox.checked{background:var(--accent);border-color:var(--accent)}.checkbox svg{width:12px;height:12px;color:var(--bg-primary)}.todo-text{flex:1;font-size:.9375rem;word-break:break-word}.todo-text.line-through{text-decoration:line-through;color:var(--text-muted)}.priority-badge{font-size:.625rem;font-weight:600;padding:.25rem .5rem;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em}.priority-high{background:#ef444426;color:var(--priority-high)}.priority-medium{background:#f59e0b26;color:var(--priority-medium)}.priority-low{background:#3b82f626;color:var(--priority-low)}.delete-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;opacity:0;transition:all var(--transition)}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{color:var(--danger)}.delete-btn svg{width:16px;height:16px}.footer{padding:1.5rem;text-align:center;border-top:1px solid var(--border-color);background:var(--bg-secondary)}.footer p{color:var(--text-muted);font-size:.8125rem}.footer kbd{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:.125rem .375rem;font-family:inherit;font-size:.75rem}@media (max-width: 480px){.hero-greeting{font-size:1.5rem}.filter-bar{flex-direction:column;align-items:stretch}.filter-buttons{justify-content:center}.clear-btn{text-align:center}.todo-item .delete-btn{opacity:1}}