:root{--bg:#0b1220;--panel:#111a2b;--muted:#94a3b8;--txt:#e2e8f0;--pri:#5b9cff;--red:#ef4444}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:linear-gradient(120deg,#0b0f1a,#111a2b);color:var(--txt)}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.topbar{background:#0b1220;border-bottom:1px solid #1f2937}
.topbar .container{display:flex;align-items:center;gap:1rem}
.brand{font-weight:700;color:var(--pri)}
nav a{color:var(--txt);text-decoration:none;margin-right:1rem;opacity:.9}
nav a.logout{color:#ddd}
.topbar nav{display:flex;align-items:center;gap:1rem}
.topbar nav .spacer{flex:1}
.topbar nav a[href*="web_users"]{order:4}
.topbar nav .spacer{order:5}
.topbar nav .user{order:100}
.topbar nav a.logout{order:101}
.chip{display:inline-block;border:1px solid rgba(107,114,128,.4);padding:.15rem .45rem;border-radius:999px;font-size:.9rem}
.chip.purple{color:#c8b5ff;border-color:#6b46c1}
.card{background:var(--panel);padding:1rem;border:1px solid #1f2937;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);margin:1rem 0}
.narrow{max-width:460px;margin:2rem auto}
.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
label{display:grid;gap:.35rem;color:#cbd5e1}
input,select,textarea{background:#0b1220;color:var(--txt);border:1px solid #1f2937;padding:.6rem;border-radius:8px}
.btn{display:inline-block;background:var(--pri);color:#fff;border:none;padding:.6rem .9rem;border-radius:8px;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.danger{background:var(--red)}
.row{display:flex;gap:.5rem;align-items:center}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #1f2937;padding:.5rem;text-align:left}
.flash{background:#173a1a;border:1px solid #1f4d1e;padding:.6rem;border-radius:6px;margin:.5rem 0}
.error{background:#3a1717;border:1px solid #4d1e1e;padding:.6rem;border-radius:6px;margin:.5rem 0}
.muted{color:var(--muted)}
.footer{color:#94a3b8;opacity:.8;padding:1rem 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal.hidden{display:none}
.modal .dialog{background:var(--panel);border:1px solid #1f2937;padding:1rem;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);width:min(420px,90vw);max-height:92vh;overflow:auto}
.modal .dialog.wide{width:min(900px,95vw)}
.modal .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.hidden{display:none !important}

/* Wizard styling */
.wizard-steps{display:flex;gap:.5rem;margin:.5rem 0;position:sticky;top:0;background:linear-gradient(180deg,#0b1220 0%, rgba(11,18,32,.9) 100%);padding:.5rem;border-bottom:1px solid #1f2937;z-index:5}
.wizard-steps .step{flex:1;border:1px solid #1f2937;border-radius:10px;padding:.5rem .75rem;background:#0b1220;display:flex;align-items:center;gap:.6rem}
.wizard-steps .step .num{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#111827;border:1px solid #1f2937;color:#cbd5e1;font-size:.85rem}
.wizard-steps .step .title{font-weight:600}
.wizard-steps .step .subtitle{color:var(--muted);font-size:.9rem}
.wizard-steps .step.active{border-color:var(--pri);box-shadow:0 0 0 1px rgba(91,156,255,.25) inset;background:#0d1a33}
.pv-card{cursor:pointer;border:1px solid #1f2937;border-radius:10px;background:#0b1220;padding:.75rem;margin:.4rem 0}
.pv-card.selected{border-color:var(--pri);box-shadow:0 0 0 1px rgba(91,156,255,.25) inset}
.pv-editor{min-height:360px;border:1px solid #1f2937;border-radius:8px;padding:.75rem;background:#0b1220;color:var(--txt)}
.pv-editor img{display:block;margin:4px auto 6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.pv-editor .pv-head{letter-spacing:.35rem;text-align:center;margin:6px 0 4px}
.pv-editor .pv-sub{font-weight:600;text-align:center;margin-bottom:10px}
.pv-editor:focus{outline:2px solid rgba(91,156,255,.35)}
.pv-editor pre{font-family:monospace}
.fine-list{max-height:260px;overflow:auto;border:1px solid #1f2937;border-radius:8px;background:#0b1220;margin-top:.35rem}
.fine-list .item{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem .65rem;border-bottom:1px solid #1f2937;cursor:pointer}
.fine-list .item:last-child{border-bottom:none}
.fine-list .item:hover{background:#0f172a}
.fine-list .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fine-list .amt{color:#cbd5e1;background:#111827;border:1px solid #1f2937;border-radius:6px;padding:.05rem .4rem}
