:root{--bg:#0e1525;--fg:#e6edf7;--muted:#9fb3d9;--line:#283246;--accent:#8ab4ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--accent);text-decoration:none}
.topbar{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
.wizard{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 48px)}
.steps{border-right:1px solid var(--line);padding:12px}
.steps .step{display:block;padding:8px 10px;border-radius:6px;color:var(--fg);margin-bottom:6px}
.steps .step:hover,.steps .step.active{background:#182239}
.card{margin:16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card>h2,.card>h3,.card>.card-header{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600}
.card .actions{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.row{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}
label{display:grid;gap:6px;color:var(--muted)}
input,select,textarea{background:#0b1220;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.btn{background:#1f2a44;border:1px solid var(--line);color:var(--fg);padding:6px 10px;border-radius:8px;cursor:pointer}
.btn:hover{background:#243153}
.btn-sm{padding:4px 8px;border-radius:6px}
.btn-secondary{background:#151c2e}
.btn-delete{background:#4a1f2a}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.table.compact th,.table.compact td{padding:6px 8px}
.right{text-align:right}.muted{color:var(--muted)}
.two-col{display:grid;grid-template-columns:260px 1fr;gap:12px;padding:12px 16px}
.list .item{display:block;padding:10px;border-bottom:1px solid var(--line)}
.list .item.active,.list .item:hover{background:#182239}
.notice{padding:8px 16px}
.ok{color:#75d37b}.err{color:#ff8080}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:#0b1220;color:var(--fg);border:1px solid var(--line);border-radius:12px;min-width:360px;max-width:720px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.modal .modal-head{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600}
.modal .modal-body{padding:12px 16px}
.modal .modal-actions{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

pre { background:#0b1220;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:50vh;overflow:auto }

/* modal */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 2147483000; /* very high to beat any stacking contexts */
}
.modal{
  background:#0b1220; color:var(--fg);
  border:1px solid var(--line); border-radius:12px;
  min-width:360px; max-width:900px; width:clamp(360px, 80vw, 900px);
  box-shadow:0 16px 48px rgba(0,0,0,.7);
}
.modal .modal-head{ padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; display:flex; justify-content:space-between; align-items:center }
.modal .modal-body{ padding:12px 16px; max-height:60vh; overflow:auto }
.modal .modal-actions{ padding:12px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px }
body.modal-open{ overflow:hidden }