:root{--bg:#f8f9fa;--fg:#1a1a2e;--muted:#6b7280;--accent:#6366f1;--card:#fff;--border:#e5e7eb;--radius:12px}
[data-theme="dark"]{--bg:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--accent:#818cf8;--card:#1e293b;--border:#334155}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;transition:background .3s,color .3s}
.container{max-width:800px;margin:0 auto;padding:0 20px}
.header{background:var(--card);border-bottom:1px solid var(--border);padding:16px 0;position:sticky;top:0;z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.3rem;font-weight:700}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:1.1rem}
.subtitle{color:var(--muted);margin:20px 0}
.controls{background:var(--card);border-radius:var(--radius);padding:24px;margin-bottom:24px;border:1px solid var(--border)}
.control-group{margin-bottom:16px}
.control-group label{display:block;font-weight:600;margin-bottom:8px;font-size:.9rem}
.mode-btns{display:flex;gap:8px;flex-wrap:wrap}
.mode-btn{padding:8px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer;font-size:.9rem;transition:all .2s}
.mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mode-btn:hover{border-color:var(--accent)}
.control-row{display:flex;gap:16px}
.control-row .control-group{flex:1}
select,input[type="number"]{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg);font-size:1rem}
.btn-gen{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-gen:hover{opacity:.9}
.output-section{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:24px}
.output-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.output-header h2{font-size:1rem}
.output-actions{display:flex;gap:12px;align-items:center}
#char-count{color:var(--muted);font-size:.85rem}
.btn-copy{padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem}
.output-box{padding:20px;min-height:200px;white-space:pre-wrap;line-height:1.8}
.placeholder{color:var(--muted);font-style:italic}
.ad-slot{text-align:center;padding:16px;border:1px dashed var(--border);border-radius:var(--radius);margin-bottom:24px}
.ad-label{font-size:.7rem;color:var(--muted)}
.ad-ph{color:var(--muted);font-size:.85rem;padding:12px}
.footer{text-align:center;padding:24px 0;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border)}
.footer a{color:var(--accent);text-decoration:none}
@media(max-width:600px){.control-row{flex-direction:column}.mode-btns{gap:4px}.mode-btn{padding:6px 12px;font-size:.8rem}}