:root {
  --accent:#0f62fe;
  --accent-strong:#0030c0;
  --text:#1f2937;
  --muted:#64748b;
  --bg:#f4f6f8;
  --surface:#fff;
  --surface-muted:#f8fafc;
  --border:#dfe3ea;
  --success:#067647;
  --danger:#b42318;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; color:var(--text); background:var(--bg); line-height:1.45; }
button, input, select, textarea { font: inherit; }
.topbar { height:64px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px; position:sticky; top:0; z-index:10; }
.brand, .userbar { display:flex; align-items:center; gap:12px; min-width:0; }
.brand strong, .userbar span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.brand-mark { flex:0 0 auto; width:34px; height:34px; border-radius:8px; background:var(--accent); color:white; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:0; }
.userbar form { margin:0; }
.badge { border:1px solid #bfdbfe; color:var(--accent-strong); background:#eff6ff; padding:3px 8px; border-radius:999px; font-size:12px; }
.layout { display:grid; grid-template-columns:360px minmax(0,1fr); min-height:calc(100vh - 64px); }
.panel { background:var(--surface); border-right:1px solid var(--border); padding:18px; overflow:auto; }
.controls section { border-bottom:1px solid var(--border); padding:0 0 18px; margin:0 0 18px; }
.controls section:last-child { border-bottom:0; margin-bottom:0; }
h2 { font-size:14px; margin:0 0 12px; }
label { display:block; margin:12px 0 6px; font-size:12px; font-weight:700; color:var(--muted); }
select, input[type=file], textarea { width:100%; border:1px solid var(--border); border-radius:8px; background:white; padding:10px; color:var(--text); }
select:focus, input[type=file]:focus, textarea:focus, button:focus-visible { outline:2px solid #bfdbfe; outline-offset:2px; }
textarea { resize:vertical; min-height:70px; }
button { border:none; border-radius:8px; padding:9px 13px; cursor:pointer; font-weight:700; }
button:disabled { opacity:.5; cursor:not-allowed; }
.primary { background:var(--accent); color:white; }
.primary:hover { background:var(--accent-strong); }
.secondary { background:#eef2ff; color:var(--accent-strong); border:1px solid #c7d2fe; }
.ghost { background:var(--surface-muted); border:1px solid var(--border); color:var(--text); }
.full { width:100%; margin-top:12px; }
.inline-form { margin:0; }
.meta { margin-top:14px; padding:12px; background:var(--surface-muted); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:12px; line-height:1.5; }
.meta strong, .meta span { display:block; }
.meta strong { color:var(--text); margin-bottom:4px; }
.notice { margin-bottom:14px; padding:10px 12px; background:#ecfdf3; border:1px solid #abefc6; border-radius:8px; color:var(--success); font-size:13px; }
.hint { margin:0 0 10px; color:var(--muted); font-size:12px; }
.preview-wrap { min-width:0; padding:14px; }
.preview-shell { position:relative; min-height:calc(100vh - 92px); }
iframe { width:100%; height:calc(100vh - 92px); border:1px solid var(--border); border-radius:8px; background:white; box-shadow:0 8px 24px rgba(15,23,42,.08); }
.frame-loader { position:absolute; inset:0; z-index:2; display:grid; place-items:center; border:1px solid var(--border); border-radius:8px; background:rgba(248,250,252,.86); backdrop-filter:blur(2px); pointer-events:none; }
.frame-loader[hidden] { display:none; }
.loader-panel { display:flex; align-items:center; gap:12px; max-width:min(420px, calc(100% - 32px)); padding:14px 16px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.96); box-shadow:0 12px 30px rgba(15,23,42,.12); }
.loader-panel strong, .loader-panel small { display:block; }
.loader-panel small { color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.spinner { flex:0 0 auto; width:22px; height:22px; border-radius:999px; border:3px solid #dbeafe; border-top-color:var(--accent); animation:spin .8s linear infinite; }
.frame-loader.error .spinner { animation:none; border-color:#fecaca; border-top-color:var(--danger); }
.frame-loader.error .loader-panel strong { color:var(--danger); }
.empty-state { display:grid; place-items:center; min-height:50vh; color:var(--muted); border:1px dashed var(--border); border-radius:8px; background:white; padding:24px; text-align:center; }
.login-page { min-height:100vh; display:grid; place-items:center; }
.login-card { width:min(420px, calc(100vw - 32px)); background:white; border:1px solid var(--border); border-radius:8px; padding:32px; box-shadow:0 20px 50px rgba(15,23,42,.12); text-align:center; }
.login-card .brand-mark { margin:0 auto 16px; width:48px; height:48px; }
.login-card h1 { margin:0 0 8px; }
.login-card p { color:var(--muted); margin:0 0 22px; line-height:1.5; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 980px) {
  .topbar { align-items:flex-start; height:auto; padding:12px 16px; }
  .brand, .userbar { flex-wrap:wrap; }
  .layout { grid-template-columns:1fr; }
  .panel { border-right:none; border-bottom:1px solid var(--border); }
  .preview-shell, iframe { height:75vh; min-height:75vh; }
}