:root { --bg:#fff; --fg:#0a0a0a; --muted:#6b6b6b; --border:#eaeaea; --shadow:0 6px 24px rgba(0,0,0,.08); }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; height:100%; overflow:hidden; }
.site-header { position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.logo { width:52px; height:52px; object-fit:contain; }
.logo-link { display:flex; align-items:center; transition:opacity .2s ease; }
.logo-link:hover { opacity:.7; }
.title { font-size:20px; line-height:1.1; margin:0; }
.subtitle { margin:2px 0 0; font-size:12px; color:var(--muted); }
.actions { display:flex; align-items:center; gap:16px; }
.catalog-toggle { display:flex; gap:8px; }
.toggle-btn { padding:8px 16px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; transition:all .2s ease; color:var(--muted); }
.toggle-btn:hover { border-color:#111; }
.toggle-btn.active { background:#0a0a0a; color:#fff; border-color:#0a0a0a; }
.actions .select select { width:min(32vw, 260px); padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; background:#fff; }
.actions .select select:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.06); }

.iframe-container { position:absolute; top:65px; left:0; right:0; bottom:0; width:100%; }
.preview-iframe { width:100%; height:100%; border:0; display:block; }

@media (max-width:600px){
  .subtitle { display:none; }
  .catalog-toggle { display:none; }
}

@media (max-width:800px){
  .actions { flex-direction:column; align-items:stretch; }
  .actions .select select { width:100%; }
}