*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-panel: #ffffff;--text-primary: #1f2937;--text-heading: #ffffff;--text-secondary: #6b7280;--text-label: #1f2937;--border-color: #e5e7eb;--input-bg: #ffffff;--input-border: #e5e7eb;--focus-color: #2563eb;--focus-shadow: rgba(37, 99, 235, .1);--button-primary: #2563eb;--button-primary-hover: #1d4ed8;--button-secondary: #6c757d;--button-secondary-hover: #5a6268;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #e5e7eb;--shadow-sm: 0 10px 40px rgba(0, 0, 0, .1);--shadow-md: 0 10px 40px rgba(0, 0, 0, .15);--border-radius: 12px;--border-width: 2px;--panel-padding: 24px;--heading-weight: 600;--heading-spacing: 0px}body.theme-dark{--bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);--bg-panel: #1e1e2e;--text-primary: #e4e4e7;--text-heading: #ffffff;--text-secondary: #a1a1aa;--text-label: #d4d4d8;--border-color: #3f3f46;--input-bg: #27272a;--input-border: #3f3f46;--focus-color: #60a5fa;--focus-shadow: rgba(96, 165, 250, .2);--button-primary: #3b82f6;--button-primary-hover: #2563eb;--button-secondary: #4b5563;--button-secondary-hover: #374151;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #3f3f46;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2);--shadow-md: 0 10px 20px rgba(0, 0, 0, .4), 0 3px 6px rgba(0, 0, 0, .3)}body.theme-dark-blue{--bg-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--bg-panel: #1e293b;--text-primary: #e2e8f0;--text-heading: #f1f5f9;--text-secondary: #94a3b8;--text-label: #cbd5e1;--border-color: #334155;--input-bg: #0f172a;--input-border: #334155;--focus-color: #3b82f6;--focus-shadow: rgba(59, 130, 246, .3);--button-primary: #2563eb;--button-primary-hover: #1d4ed8;--button-secondary: #475569;--button-secondary-hover: #334155;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #334155;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 10px 20px rgba(0, 0, 0, .5), 0 3px 6px rgba(0, 0, 0, .4)}body.theme-dark-green{--bg-primary: linear-gradient(135deg, #0a1f0a 0%, #1a2e1a 100%);--bg-panel: #1a2e1a;--text-primary: #d1fae5;--text-heading: #ecfdf5;--text-secondary: #86efac;--text-label: #a7f3d0;--border-color: #166534;--input-bg: #0a1f0a;--input-border: #166534;--focus-color: #10b981;--focus-shadow: rgba(16, 185, 129, .3);--button-primary: #059669;--button-primary-hover: #047857;--button-secondary: #065f46;--button-secondary-hover: #064e3b;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #166534;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 10px 20px rgba(0, 0, 0, .5), 0 3px 6px rgba(0, 0, 0, .4)}body.theme-dark-purple{--bg-primary: linear-gradient(135deg, #1e1b2e 0%, #2d1b3d 100%);--bg-panel: #2d1b3d;--text-primary: #e9d5ff;--text-heading: #f3e8ff;--text-secondary: #c084fc;--text-label: #d8b4fe;--border-color: #7c3aed;--input-bg: #1e1b2e;--input-border: #7c3aed;--focus-color: #a855f7;--focus-shadow: rgba(168, 85, 247, .3);--button-primary: #9333ea;--button-primary-hover: #7e22ce;--button-secondary: #6b21a8;--button-secondary-hover: #581c87;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #7c3aed;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 10px 20px rgba(0, 0, 0, .5), 0 3px 6px rgba(0, 0, 0, .4)}body.theme-dark-red{--bg-primary: linear-gradient(135deg, #2a0f0f 0%, #3d1a1a 100%);--bg-panel: #3d1a1a;--text-primary: #fee2e2;--text-heading: #fef2f2;--text-secondary: #fca5a5;--text-label: #fecaca;--border-color: #991b1b;--input-bg: #2a0f0f;--input-border: #991b1b;--focus-color: #ef4444;--focus-shadow: rgba(239, 68, 68, .3);--button-primary: #dc2626;--button-primary-hover: #b91c1c;--button-secondary: #991b1b;--button-secondary-hover: #7f1d1d;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #991b1b;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 10px 20px rgba(0, 0, 0, .5), 0 3px 6px rgba(0, 0, 0, .4)}body.theme-dark-high-contrast{--bg-primary: #000000;--bg-panel: #0a0a0a;--text-primary: #ffffff;--text-heading: #ffffff;--text-secondary: #cccccc;--text-label: #ffffff;--border-color: #ffffff;--input-bg: #000000;--input-border: #ffffff;--focus-color: #00ff00;--focus-shadow: rgba(0, 255, 0, .5);--button-primary: #ffffff;--button-primary-hover: #cccccc;--button-secondary: #333333;--button-secondary-hover: #555555;--button-danger: #ff0000;--button-danger-hover: #cc0000;--divider-color: #ffffff;--shadow-sm: 0 0 0 2px rgba(255, 255, 255, .3);--shadow-md: 0 0 0 3px rgba(255, 255, 255, .5);--border-radius: 0px;--border-width: 2px;--heading-weight: 700;--heading-spacing: 1px}body.theme-dark-soft{--bg-primary: linear-gradient(135deg, #2d2d30 0%, #3e3e42 100%);--bg-panel: #3e3e42;--text-primary: #e8e8e8;--text-heading: #ffffff;--text-secondary: #b0b0b0;--text-label: #d4d4d4;--border-color: #505050;--input-bg: #484848;--input-border: #505050;--focus-color: #7cb8ff;--focus-shadow: rgba(124, 184, 255, .15);--button-primary: #5a9fd4;--button-primary-hover: #4a8fc4;--button-secondary: #6a6a6a;--button-secondary-hover: #5a5a5a;--button-danger: #ef4444;--button-danger-hover: #dc2626;--divider-color: #505050;--shadow-sm: 0 8px 16px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .15);--shadow-md: 0 16px 32px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .2);--border-radius: 16px;--border-width: 1px;--heading-weight: 500;--heading-spacing: .3px}body.theme-dark-minimal{--bg-primary: #0d1117;--bg-panel: #161b22;--text-primary: #c9d1d9;--text-heading: #f0f6fc;--text-secondary: #8b949e;--text-label: #c9d1d9;--border-color: #30363d;--input-bg: #0d1117;--input-border: #21262d;--focus-color: #58a6ff;--focus-shadow: rgba(88, 166, 255, .1);--button-primary: #238636;--button-primary-hover: #2ea043;--button-secondary: #21262d;--button-secondary-hover: #30363d;--button-danger: #da3633;--button-danger-hover: #f85149;--divider-color: #21262d;--shadow-sm: none;--shadow-md: 0 1px 3px rgba(0, 0, 0, .2);--border-radius: 6px;--border-width: 1px;--panel-padding: 48px;--heading-weight: 600;--heading-spacing: 0px}body.theme-dark-neon{--bg-primary: #0a0a0f;--bg-panel: #0f0f1a;--text-primary: #e0e0ff;--text-heading: #ffffff;--text-secondary: #a0a0ff;--text-label: #c0c0ff;--border-color: #4a00ff;00ff;--input-bg: #0a0a0f;--input-border: #4a00ff;--focus-color: #00ffff;--focus-shadow: 0 0 10px rgba(0, 255, 255, .5), 0 0 20px rgba(0, 255, 255, .3);--button-primary: #00ffff;--button-primary-hover: #00cccc;--button-secondary: #4a00ff;--button-secondary-hover: #6a20ff;--button-danger: #ff0080;--button-danger-hover: #ff0066;--divider-color: #4a00ff;--shadow-sm: 0 0 10px rgba(74, 0, 255, .3), 0 0 5px rgba(74, 0, 255, .2);--shadow-md: 0 0 20px rgba(74, 0, 255, .5), 0 0 10px rgba(0, 255, 255, .3);--border-radius: 4px;--border-width: 1px;--heading-weight: 600;--heading-spacing: 1px}body.theme-dark-terminal{--bg-primary: #1e1e1e;--bg-panel: #252526;--text-primary: #d4d4d4;--text-heading: #ffffff;--text-secondary: #858585;--text-label: #cccccc;--border-color: #3e3e42;--input-bg: #1e1e1e;--input-border: #3e3e42;--focus-color: #007acc;--focus-shadow: rgba(0, 122, 204, .2);--button-primary: #0e639c;--button-primary-hover: #1177bb;--button-secondary: #3e3e42;--button-secondary-hover: #505050;--button-danger: #f48771;--button-danger-hover: #ff6b5a;--divider-color: #3e3e42;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--border-radius: 0px;--border-width: 1px;--heading-weight: 600;--heading-spacing: 0px}body.theme-dark-neon .app{box-shadow:0 0 15px #4a00ff66,0 0 5px #4a00ff33,inset 0 0 10px #4a00ff1a}body.theme-dark-neon .add-todo button,body.theme-dark-neon .delete-btn{box-shadow:0 0 10px #00ffff80}body.theme-dark-neon .add-todo button:hover:not(:disabled),body.theme-dark-neon .delete-btn:hover:not(:disabled){box-shadow:0 0 20px #0ffc,0 0 10px #0ff6}body.theme-dark-neon .add-todo input:focus{box-shadow:0 0 15px #0ff9,0 0 5px #00ffff4d}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;padding:20px;transition:background .3s ease,color .3s ease}.app{max-width:600px;margin:0 auto;background:var(--bg-panel);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);overflow:hidden;position:relative;transition:background .3s ease,box-shadow .3s ease,border-radius .3s ease}header{background:var(--button-primary);color:var(--text-heading);padding:var(--panel-padding);text-align:center;transition:background .3s ease,color .3s ease}header h1{font-size:28px;font-weight:var(--heading-weight);letter-spacing:var(--heading-spacing);transition:font-weight .3s ease,letter-spacing .3s ease}main{padding:var(--panel-padding);transition:padding .3s ease}.theme-selector{position:absolute;top:20px;right:20px;z-index:10}.theme-selector label{font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-right:8px;letter-spacing:.3px}.theme-selector select{padding:8px 12px;border:var(--border-width) solid var(--border-color);border-radius:4px;font-size:.875rem;font-family:inherit;background:var(--input-bg);color:var(--text-primary);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,border-width .3s ease,background .3s ease,color .3s ease}.theme-selector select:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 3px var(--focus-shadow)}.add-todo{display:flex;gap:12px;margin-bottom:24px}.add-todo input{flex:1;padding:12px 16px;border:var(--border-width) solid var(--input-border);border-radius:8px;font-size:16px;background:var(--input-bg);color:var(--text-primary);transition:border-color .2s ease,background .3s ease,color .3s ease,border-width .3s ease}.add-todo input:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 3px var(--focus-shadow)}.add-todo input:disabled{opacity:.6;cursor:not-allowed}.add-todo input::placeholder{color:var(--text-secondary)}.add-todo button{padding:12px 24px;background:var(--button-primary);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:background .2s ease}.add-todo button:hover:not(:disabled){background:var(--button-primary-hover)}.add-todo button:disabled{background:var(--button-secondary);cursor:not-allowed}.loading{text-align:center;padding:24px;color:var(--text-secondary);transition:color .3s ease}.todo-list{list-style:none}.todo-list li{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:var(--border-width) solid var(--divider-color);transition:background .2s ease,border-color .3s ease,border-width .3s ease}.todo-list li:hover{background:var(--input-bg)}.todo-list li:last-child{border-bottom:none}.todo-list li.completed{opacity:.6}.todo-list input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--focus-color)}.todo-text{flex:1;font-size:16px;color:var(--text-primary);transition:color .3s ease}.todo-list li.completed .todo-text{text-decoration:line-through;color:var(--text-secondary)}.delete-btn{padding:6px 12px;background:var(--button-danger);color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background .2s ease}.delete-btn:hover:not(:disabled){background:var(--button-danger-hover)}.delete-btn:disabled{background:var(--button-secondary);cursor:not-allowed}.empty{text-align:center;padding:48px 24px;color:var(--text-secondary);font-size:16px;transition:color .3s ease}@media (max-width: 640px){body{padding:12px}.theme-selector{position:relative;top:auto;right:auto;margin-bottom:16px;text-align:right}header h1{font-size:24px}.add-todo{flex-direction:column}.add-todo button{width:100%}}