:root{
  --bg:#f7f8fa; --card:#ffffff; --text:#0b1220; --sub:#5b6472; --muted:#8a94a6; --border:#e6e9ef;
  --brand:#111827; --brand-600:#0b1220; --ok:#16a34a; --warn:#f59e0b; --err:#ef4444;
  --radius:14px; --radius-sm:10px; --shadow:0 12px 28px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, Segoe UI, Inter, Roboto, Arial}

/* layout */
.container{max-width:1120px; margin:0 auto; padding:24px}
.header{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.header .title{font-weight:800; letter-spacing:.1px}
.header .badge{margin-left:auto}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.stack{display:grid; gap:14px}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* text */
.h1{font-size:1.35rem; font-weight:800; margin:0}
.h2{font-size:1.15rem; font-weight:700; margin:0 0 4px}
.small{font-size:.92rem; color:var(--sub)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.muted{color:var(--muted)}

/* buttons */
.btn{appearance:none; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:12px; padding:9px 13px; cursor:pointer}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost{background:transparent}
.btn.warn{background:#fff8ea; border-color:#ffe3b3; color:#8a5b00}
.btn.danger{background:#fff2f2; border-color:#ffd5d5; color:#9a1e1e}
.btn:disabled{opacity:.55; cursor:not-allowed}

/* badges */
.badge{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:rgba(0,0,0,.02); border-radius:999px; padding:4px 10px; font-size:.84rem}
.dot{width:8px;height:8px;border-radius:999px;background:var(--muted)}
.badge.ok .dot{background:var(--ok)}
.badge.warn .dot{background:var(--warn)}
.badge.err .dot{background:var(--err)}

/* table */
.table{width:100%; border-collapse:collapse}
th,td{padding:10px; border-bottom:1px solid var(--border); text-align:left}
tr:hover{background:#fafbfc}

/* stepper */
.stepper{display:flex; gap:10px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px dashed var(--border); font-size:.85rem}
.step .n{background:#eef1f6; color:#111827; border-radius:999px; width:22px; height:22px; display:grid; place-items:center; font-size:.8rem}
.step.active{background:#eef6ff; border-style:solid}

/* toast */
.toast-wrap{position:fixed; inset:16px 16px auto auto; display:flex; flex-direction:column; gap:8px; z-index:50}
.toast{background:#0b1728; color:#e6f0ff; border:1px solid #1e293b; padding:10px 12px; border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.35)}
.toast.ok{border-color:rgba(16,185,129,.5)}
.toast.err{border-color:rgba(239,68,68,.5)}

/* qr */
.qr{width:220px; height:220px; border-radius:12px; background:#fff; padding:10px}

/* utils */
.right{margin-left:auto} .mb8{margin-bottom:8px} .mt8{margin-top:8px}