:root{--bg-color: #ffffff;--text-color: #000000;--border-color: #e0e0e0;--input-bg: #ffffff;--input-border: #ccc;--button-bg: #007bff;--button-hover: #0056b3;--button-text: #ffffff}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #ffffff;--border-color: #404040;--input-bg: #2d2d2d;--input-border: #555;--button-bg: #0056b3;--button-hover: #004085;--button-text: #ffffff}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;line-height:1.6;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}main{padding:2rem;max-width:800px;margin:0 auto}h1{margin-bottom:2rem;color:var(--text-color)}input{background-color:var(--input-bg);color:var(--text-color);border:1px solid var(--input-border);padding:.75rem;border-radius:4px;font-size:1rem}input::placeholder{color:var(--text-color);opacity:.6}button{background-color:var(--button-bg);color:var(--button-text);border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .2s ease}button:hover{background-color:var(--button-hover)}.theme-toggle{position:fixed;top:1rem;right:1rem;background-color:var(--button-bg);color:var(--button-text);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s ease}.theme-toggle:hover{background-color:var(--button-hover)}