:root{
  --bg: #fff;
  --fg: #0f172a;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --accent:#111827;
  --chip-blue-bg:#eef2ff; --chip-blue-fg:#3730a3;
  --chip-slate-bg:#f1f5f9; --chip-slate-fg:#334155;
  --chip-amber-bg:#fef9c3; --chip-amber-fg:#854d0e;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --fg:#e5e7eb; --muted:#94a3b8;
    --card:#0f172a; --border:#1f2937; --accent:#e5e7eb;
    --chip-blue-bg:#1e293b; --chip-blue-fg:#93c5fd;
    --chip-slate-bg:#0b1324; --chip-slate-fg:#cbd5e1;
    --chip-amber-bg:#3a2f06; --chip-amber-fg:#fde68a;
  }
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg)}
.vx-container{max-width:1100px;margin:0 auto;padding:16px}
.vx-hero h1{font-size:clamp(28px,4.5vw,40px);font-weight:800;margin:0 0 8px;line-height:1.1}
.vx-hero p{color:var(--muted);font-size:clamp(16px,2.2vw,18px);margin:0 0 12px;max-width:900px}
.vx-badges{display:flex;gap:8px;flex-wrap:wrap}
.vx-badge{padding:4px 10px;border-radius:9999px;font-size:12px;display:inline-block}
.vx-b-blue{background:var(--chip-blue-bg);color:var(--chip-blue-fg)}
.vx-b-slate{background:var(--chip-slate-bg);color:var(--chip-slate-fg)}
.vx-b-amber{background:var(--chip-amber-bg);color:var(--chip-amber-fg)}

.vx-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px}
@media(min-width:980px){.vx-grid{grid-template-columns:1.05fr .95fr}}
.vx-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}

.vx-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.vx-two{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.vx-two{grid-template-columns:1fr 1fr}}
.vx-field input,.vx-field select{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--fg)}

.vx-fieldset{border:1px dashed var(--border);border-radius:12px;padding:10px;margin:8px 0}
.vx-fieldset legend{padding:0 6px;color:var(--muted)}
.vx-chk{display:inline-flex;align-items:center;gap:8px;margin-right:12px;margin-top:6px}

.vx-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vx-util{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;text-decoration:none}
.vx-ghost{background:transparent;color:var(--accent)}
.vx-primary{background:var(--accent);color:#fff}
.vx-link{color:#38bdf8;text-decoration:none;border-bottom:1px dashed #38bdf8}

.vx-sticky{position:sticky;top:12px}
.vx-result-head{display:flex;flex-direction:column;gap:2px}
.vx-muted{color:var(--muted)}
.vx-note{background:transparent;border:1px dashed var(--border);border-radius:12px;padding:10px;margin-top:8px;color:var(--muted)}

.vx-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.vx-table td{padding:8px 0;border-bottom:1px dashed var(--border)}
.vx-table .total{font-weight:800;font-size:20px}

.vx-code{background:transparent;border:1px dashed var(--border);border-radius:12px;padding:12px;overflow:auto}
.vx-list{margin:0;padding-left:20px}
.vx-steps{margin:0;padding-left:22px}