*{box-sizing:border-box}body{margin:0;background:#0b1320;color:#e7ecf7;font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif}
.bar{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px;background:#0f1a2f;border-bottom:1px solid #1f2b46}
.group{display:flex;gap:8px;align-items:center}
button{border:0;border-radius:12px;padding:8px 12px;background:#2a5bd7;color:#fff;cursor:pointer}
button.ghost{background:transparent;border:1px solid #38507d}
.lbl{opacity:.8}
.switch{display:flex;gap:6px;align-items:center;border:1px solid #1f2b46;border-radius:999px;padding:4px 8px}
.content{padding:8px}
.preview{width:100%;height:80vh;border:1px solid #1f2b46;background:#fff;border-radius:10px}
.status{padding:8px 12px;border-top:1px solid #1f2b46;background:#0f1a2f;opacity:.9}
.login{display:grid;place-items:center;min-height:100vh}
.card{background:#0f1a2f;border:1px solid #1f2b46;border-radius:16px;padding:24px;max-width:420px;width:92%}
.card .alert{background:#3b1b1f;border:1px solid #7a2b35;color:#ffd6db;padding:10px;border-radius:10px;margin-bottom:10px}
.card form{display:grid;gap:10px}
.card input{padding:10px;border-radius:10px;border:1px solid #273c66;background:#0b1320;color:#e7ecf7;width:100%}
.muted{opacity:.7;font-size:.9em}

select, input[type=range]{background:#0b1320;color:#e7ecf7;border:1px solid #273c66;border-radius:10px;padding:6px}

/* drag/resize handles inside iframe target elements */

select{min-width:180px}