:root{--bg:#fafafa;--panel:#fff;--fg:#222;--border:#ddd;--accent:#1db954;--radius:10px;--muted:#555}body.dark{--bg:#222;--panel:#1e1e1e;--fg:#eaeaea;--border:#333;--muted:#aaa}body{background:var(--bg);color:var(--fg);justify-content:center;min-height:100vh;margin:0;padding:2rem;font-family:system-ui,sans-serif;transition:background .3s,color .3s;display:flex}.container{background:var(--panel);border-radius:var(--radius);width:100%;max-width:600px;height:100%;padding:2rem;transition:background .3s;box-shadow:0 2px 12px #00000026}h1{text-align:center;color:var(--accent);letter-spacing:.3px;margin-bottom:1.5rem;font-size:1.3rem}form{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}form>button{grid-column:1/-1}label{color:var(--muted);flex-direction:column;gap:.4rem;font-size:.9rem;font-weight:500;display:flex}input,select,button{border-radius:var(--radius);border:1px solid var(--border);color:var(--fg);background:0 0;outline:none;padding:.6rem .8rem;font-size:.9rem}input:focus,select:focus{border-color:var(--accent)}button{background:var(--accent);color:#fff;cursor:pointer;border:none;font-weight:600;transition:background .2s,transform .1s}button:hover{background:#17a84a}button:active{transform:scale(.97)}h2{color:var(--accent);margin-top:2rem;font-size:1rem}pre{border-radius:var(--radius);word-break:break-all;border:1px solid var(--border);background:#0000000d;min-height:2rem;padding:1rem;font-size:.9rem;transition:background .3s}body.dark pre{background:#181818}.copy{justify-content:flex-end;margin-top:.5rem;display:flex}.copy button{color:var(--accent);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;align-items:center;gap:.4rem;padding:.3rem .6rem;font-size:.85rem;transition:background .3s;display:flex}.copy button.active{background:var(--accent);color:#fff;animation:.6s pulse}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.copy svg{fill:currentColor;width:14px;height:14px}.theme-toggle{cursor:pointer;background:var(--panel);border:1px solid var(--border);border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:background .3s;display:flex;position:absolute;top:1rem;right:1rem}.theme-toggle svg{width:18px;height:18px;fill:var(--accent)}