:root{--bg: #f4f5f7;--panel: #ffffff;--text: #1a1d21;--muted: #5d6570;--border: #d9dde3;--accent: #2563eb;--accent-text: #ffffff;--warning: #b45309;--error: #b91c1c;--success: #15803d;color-scheme:light}[data-theme=dark]{--bg: #14161a;--panel: #1e2127;--text: #e8eaed;--muted: #9aa3ad;--border: #343941;--accent: #3b82f6;--accent-text: #ffffff;--warning: #f59e0b;--error: #f87171;--success: #4ade80;color-scheme:dark}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}.topbar{border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:10}.topbar-inner{max-width:1200px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.topbar h1{font-size:1.15rem;margin:0}.topbar-right{display:flex;align-items:center;gap:.75rem}.privacy-note{font-size:.8rem;color:var(--muted)}.icon-btn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem;padding:.3rem .55rem;cursor:pointer}.layout{max-width:1200px;margin:0 auto;padding:1rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:1rem;align-items:start}.controls{display:flex;flex-direction:column;gap:1rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem}.panel h2{margin:0 0 .75rem;font-size:1rem}.panel h3{margin:1rem 0 .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem;font-size:.85rem;color:var(--muted);flex:1}.field input[type=text],.field input[type=url],.field input[type=email],.field input[type=tel],.field textarea,.field select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;width:100%}.field textarea{resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:-1px}.field input[type=range]{width:100%;accent-color:var(--accent)}.field input[type=color]{width:100%;height:2.2rem;padding:.15rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer}.check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);margin-bottom:.7rem}.check input{accent-color:var(--accent)}.row{display:flex;gap:.75rem;align-items:center}.row input[type=file]{font-size:.8rem;color:var(--muted);min-width:0;flex:1}.hint{font-size:.78rem;color:var(--muted);margin:.25rem 0 .75rem}.warning{font-size:.8rem;color:var(--warning);margin:.5rem 0 0}.error{font-size:.85rem;color:var(--error);margin:.5rem 0 0}.small-btn{font:inherit;font-size:.8rem;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.3rem .6rem;cursor:pointer}.preview-col{position:sticky;top:4rem}.preview-frame{display:flex;align-items:center;justify-content:center;min-height:280px;border:1px dashed var(--border);border-radius:10px;padding:.75rem;overflow:hidden}.preview-frame canvas{max-width:100%;max-height:60vh;height:auto;border-radius:4px}.placeholder{color:var(--muted);font-size:.9rem;text-align:center;padding:1rem}.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.actions button{font:inherit;font-size:.9rem;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}.actions button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.actions button:disabled{opacity:.45;cursor:not-allowed}.copied{font-size:.8rem;color:var(--success);margin:.5rem 0 0}.footer{max-width:1200px;margin:0 auto;padding:0 1rem 2rem;font-size:.78rem;color:var(--muted)}@media (max-width: 860px){.layout{grid-template-columns:1fr}.preview-col{position:static;order:-1}.privacy-note{display:none}}