/* ═══════════════════════════════════════════════════════════════════
   OFFSEC configuration surface — SHARED.
   Loaded by the standalone page (offsec_configure.html) and by the
   wizard's inline workspace (new_ctf.html). Both emit the same markup
   with the same ids and classes, so the two surfaces cannot drift.
   ═══════════════════════════════════════════════════════════════════ */
/* ── OFFSEC configure page layout ─────────────────────────────────── */
.offsec-cfg-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.offsec-cfg-breadcrumb {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.offsec-cfg-breadcrumb a { color: var(--muted); text-decoration: none; }
.offsec-cfg-breadcrumb a:hover { text-decoration: underline; }
.offsec-cfg-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}
.offsec-cfg-subtitle {
  font-size: .88rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.offsec-cfg-columns {
  display: grid;
  grid-template-columns: minmax(0,360px) minmax(0,1fr);   /* prototype: fixed left, wide topology */
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .offsec-cfg-columns { grid-template-columns: 1fr; }
}
.offsec-cfg-card {
  background: var(--panel, rgba(10,30,15,.6));
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 14px;   /* prototype .card radius */
  padding: 18px;         /* prototype .card padding */
}
.offsec-cfg-card-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 1rem;
}
/* Topology panel sticky */
.offsec-cfg-topo-sticky {
  position: sticky;
  top: 1rem;
}
/* Stability banner */
#ocfg-stability-line {
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 1rem;
  min-height: 1.2em;
}
/* Actions row */
.offsec-cfg-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
/* Credit banner */
.offsec-cfg-credit {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: rgba(10,255,99,.07);
  border: 1px solid rgba(10,255,99,.18);
  margin-bottom: 1rem;
  color: var(--fg);
}
.offsec-cfg-credit strong { color: #0aff63; }
/* Validator note */
.offsec-cfg-validator-note {
  font-size: .8rem;
  color: var(--muted);
  padding: .6rem .75rem;
  border-left: 3px solid rgba(10,255,99,.35);
  background: rgba(10,255,99,.04);
  border-radius: 0 6px 6px 0;
  margin-top: 1rem;
}
/* progress */
#ocfg-progress { display: none; }
#ocfg-progress-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; margin: .5rem 0; }
#ocfg-progress-fill { height: 100%; background: #0aff63; border-radius: 3px; transition: width .3s; width: 0%; }

/* ── LIVE TOPOLOGY — animated "ops console" attack-path map ────────────
   Public (attacker origin) → DMZ/VPN → Internal → Deep. Rendered as one
   SVG so links/packets animate. The intrusion (attacker + the packets it
   sends down the chain) is red; the defended network is green. */
.offsec-ops{
  background: radial-gradient(120% 90% at 18% -10%, rgba(10,255,99,.10), transparent 55%), #05100b;
  border:1px solid rgba(10,255,99,.28); border-radius:14px; overflow:hidden;
  margin:0;
}
.offsec-ops-bar{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid rgba(10,255,99,.14); }
.offsec-ops-bar .dot{ width:7px; height:7px; border-radius:50%; background:#0aff63; box-shadow:0 0 9px #0aff63; animation:ocfgblink 1.8s infinite; }
.offsec-ops-bar h4{ margin:0; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#c9ffe0; font-family:ui-monospace,Menlo,monospace; font-weight:600; }
.offsec-ops-bar .flow{ margin-left:auto; font-family:ui-monospace,Menlo,monospace; font-size:.58rem; color:#5f9c78; }
.offsec-ops svg{ display:block; width:100%; height:auto; }
.ocfg-zlabel{ font-family:ui-monospace,Menlo,monospace; font-size:9px; letter-spacing:.13em; text-transform:uppercase; fill:#5f9c78; }
.ocfg-nlabel{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; fill:#c9ffe0; }
.ocfg-nsub{ font-family:ui-monospace,Menlo,monospace; font-size:8px; fill:#5f9c78; }
.ocfg-zrect{ fill:rgba(10,255,99,.03); stroke:rgba(10,255,99,.14); stroke-dasharray:3 4; }
.ocfg-nbox{ fill:#08160f; stroke:rgba(10,255,99,.32); }
.ocfg-nbox.pivot{ stroke:#0aff63; stroke-width:1.6; filter:url(#ocfgGlow); }
.ocfg-nicon{ fill:none; stroke:#0aff63; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* Attacker = the intruder origin: rendered red, distinct from the green network */
.ocfg-nbox.atk{ fill:#1c0c0c; stroke:#ff4d4d; stroke-width:1.6; filter:url(#ocfgGlow); }
.ocfg-n.atk .ocfg-nicon{ stroke:#ff5a5a; }
.ocfg-n.atk .ocfg-nlabel{ fill:#ffd7d7; }
.ocfg-n.atk .ocfg-nsub{ fill:#e0908f; }
.ocfg-link{ fill:none; stroke:rgba(10,255,99,.32); stroke-width:1.4; stroke-dasharray:5 6; animation:ocfgflow 1.1s linear infinite; }
/* hot = the attack path the intruder walks — red intrusion trail + red packets */
.ocfg-link.hot{ stroke:#ff4d4d; stroke-width:1.9; stroke-dasharray:5 6; }
.ocfg-pkt{ fill:#ff4d4d; filter:url(#ocfgGlow); }
.ocfg-vault{ fill:#0c1f16; stroke:#0aff63; stroke-width:1.5; filter:url(#ocfgGlow); animation:ocfgpulse 2.2s ease-in-out infinite; }
@keyframes ocfgflow{ to{ stroke-dashoffset:-22; } }
@keyframes ocfgblink{ 50%{ opacity:.35; } }
@keyframes ocfgpulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .ocfg-link{ animation:none; } .ocfg-vault{ animation:none; }
  .offsec-ops-bar .dot{ animation:none; } .ocfg-pkt{ display:none; }
}
/* inline label icons (replace emojis) */
.ocfg-i{ display:inline-flex; vertical-align:-2px; color:var(--accent); }
.ocfg-i svg{ display:block; }

/* ── Difficulty — segmented control + track (matches prototype) ─────── */
.ocfg-diff-seg{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:6px 0 12px; }
.ocfg-diff-seg button{ border:1px solid var(--line); background:var(--panel-soft,rgba(0,0,0,.02)); color:var(--muted);
  border-radius:9px; padding:9px 4px; font:inherit; font-size:.8rem; font-weight:650; cursor:pointer; transition:.16s; }
.ocfg-diff-seg button:hover{ border-color:var(--muted); }
.ocfg-diff-seg button.on{ /* active colour set inline by JS to the level colour */ }
.ocfg-diff-track{ height:6px; border-radius:6px; background:var(--line); position:relative; margin:2px 2px 4px; }
.ocfg-diff-fill{ position:absolute; inset:0 auto 0 0; border-radius:6px; width:25%; background:var(--accent); transition:.25s; }
.ocfg-diff-knob{ position:absolute; top:50%; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--panel,#fff); border:3px solid var(--accent); transform:translate(-50%,-50%); transition:.25s; }

/* ── Left panel — strict prototype alignment (card header, cost, params,
      box rows, chips) with the prototype's exact sizes ──────────────── */
.ocfg-card-hd{ display:flex; align-items:center; gap:9px; margin:0 0 14px; }
.ocfg-card-hd .ic{ color:var(--accent); display:inline-flex; }
.ocfg-card-hd h3{ font-size:.82rem; margin:0; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fg); }
.ocfg-card-hd .aux{ margin-left:auto; font-size:.7rem; color:var(--muted); }
.ocfg-cost{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--panel)); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; font-size:.82rem; }
.ocfg-cost b{ color:var(--accent); }
.ocfg-cost .rem{ color:var(--muted); font-family:ui-monospace,Menlo,monospace; font-size:.75rem; }
.ocfg-params{ display:flex; flex-direction:column; gap:11px; margin-top:2px; }
.ocfg-param{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ocfg-param .lbl{ display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); font-weight:600; }
.ocfg-param .lbl svg{ color:var(--accent); }
.ocfg-param select{ border:1px solid var(--line); background:var(--panel-soft); color:var(--fg);
  border-radius:8px; padding:6px 10px; font:inherit; font-size:.8rem; }
.ocfg-box-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel-soft); }
.ocfg-box-row + .ocfg-box-row{ margin-top:8px; }
.ocfg-box-row .ic{ color:var(--accent); flex:none; display:inline-flex; }
.ocfg-box-row .nm{ font-size:.83rem; font-weight:650; color:var(--fg); }
.ocfg-box-row .meta{ font-size:.72rem; color:var(--muted); }
.ocfg-box-row .meta.sel{ color:var(--fg); font-weight:600; }
.ocfg-box-row .tag{ margin-left:auto; display:flex; gap:6px; align-items:center; }
/* Active Directory toggle switch (opt-in internal DC) */
.ocfg-switch{ margin-left:auto; display:inline-flex; align-items:center; cursor:pointer; }
.ocfg-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ocfg-switch .ocfg-switch-track{ width:38px; height:21px; border-radius:999px; background:#1b2a20;
  border:1px solid rgba(10,255,99,.28); position:relative; transition:background .18s, border-color .18s; }
.ocfg-switch .ocfg-switch-knob{ position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#5a6b60; transition:transform .18s, background .18s; }
.ocfg-switch input:checked + .ocfg-switch-track{ background:#0c2016; border-color:#0aff63; }
.ocfg-switch input:checked + .ocfg-switch-track .ocfg-switch-knob{ transform:translateX(17px); background:#0aff63; box-shadow:0 0 8px #0aff63; }
.ocfg-switch input:focus-visible + .ocfg-switch-track{ outline:2px solid #0aff63; outline-offset:2px; }
.ocfg-ad-card.on{ border-color:rgba(10,255,99,.45); }
.ocfg-ad-hint{ font-size:.75rem; color:var(--muted); line-height:1.5; margin:.6rem 0 0; }
.ocfg-ad-hint code{ background:rgba(10,255,99,.08); border:1px solid rgba(10,255,99,.18); border-radius:4px; padding:0 4px; font-size:.72rem; color:var(--fg); }
.ocfg-chip{ font-family:ui-monospace,Menlo,monospace; font-size:.66rem; border:1px solid var(--line);
  border-radius:6px; padding:2px 7px; color:var(--muted); cursor:pointer; background:transparent; }
.ocfg-chip.brand{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.ocfg-chip.on{ background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.ocfg-browse{ border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:8px;
  padding:5px 11px; font:inherit; font-size:.74rem; cursor:pointer; }
.ocfg-browse:hover{ border-color:var(--accent); color:var(--accent); }

/* ── Box selection → live summary + orientation zone ───────────────── */
.ocfg-guide{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; padding:11px 12px;
  border:1px dashed var(--line-2,rgba(10,255,99,.32)); border-radius:10px;
  background:color-mix(in srgb,var(--accent) 5%,transparent); transition:.18s; }
.ocfg-guide.armed{ border-style:solid; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,transparent); }
.ocfg-guide .gi{ color:var(--accent); flex:none; margin-top:1px; display:inline-flex; }
.ocfg-guide .gt{ font-size:.8rem; color:var(--fg); }
.ocfg-guide .gt b{ color:var(--accent); }
.ocfg-guide .gt .dim{ color:var(--muted); display:block; margin-top:2px; font-size:.74rem; }
.ocfg-tally{ display:flex; align-items:center; gap:8px; margin:13px 2px 8px; font-family:ui-monospace,Menlo,monospace;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ocfg-tally .bar{ flex:1; height:5px; border-radius:3px; background:var(--line); overflow:hidden; }
.ocfg-tally .bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }
.ocfg-sum{ display:flex; flex-direction:column; gap:7px; }
.ocfg-sum-row{ display:flex; align-items:center; gap:11px; padding:10px 11px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel-soft); cursor:pointer; transition:.14s; text-align:left; font:inherit; color:inherit; width:100%; }
.ocfg-sum-row:hover{ border-color:var(--line-2,rgba(10,255,99,.32)); }
.ocfg-sum-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ocfg-sum-row.on{ border-color:color-mix(in srgb,var(--accent) 55%,transparent); background:color-mix(in srgb,var(--accent) 7%,var(--panel-soft)); }
.ocfg-sum-row .ri{ flex:none; color:var(--muted); display:inline-flex; }
.ocfg-sum-row.on .ri{ color:var(--accent); }
.ocfg-sum-row .rt{ min-width:0; flex:1; }
.ocfg-sum-row .rn{ font-size:.82rem; font-weight:650; color:var(--fg); }
.ocfg-sum-row .rm{ font-size:.72rem; color:var(--muted); font-family:ui-monospace,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ocfg-sum-row.on .rm{ color:var(--fg); }
.ocfg-sum-row .rx{ flex:none; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:7px;
  width:24px; height:24px; display:grid; place-items:center; cursor:pointer; font-size:1rem; line-height:1; visibility:hidden; }
.ocfg-sum-row.on .rx{ visibility:visible; }
.ocfg-sum-row .rx:hover{ color:#ff4d4d; border-color:#ff4d4d; }

/* Selectable topology nodes (the console stays dark, so colours are literal) */
.ocfg-n.sel{ cursor:pointer; }
.ocfg-n.sel .ocfg-nbox{ stroke-dasharray:4 4; stroke:color-mix(in srgb,#0aff63 60%,transparent); }
.ocfg-hint{ fill:#0aff63; font-family:ui-monospace,Menlo,monospace; font-size:11px; font-weight:700; opacity:.85; }
.ocfg-n.sel:hover .ocfg-nbox,.ocfg-n.sel:focus-visible .ocfg-nbox{ stroke:#0aff63; stroke-dasharray:none; filter:url(#ocfgGlow); }
.ocfg-n.sel:focus-visible{ outline:none; }
.ocfg-n.sel:focus-visible .ocfg-nbox{ stroke-width:2; }
.ocfg-n.sel.done .ocfg-nbox{ stroke-dasharray:none; stroke:#0aff63; stroke-width:1.7; fill:#0c2016; filter:url(#ocfgGlow); }
.ocfg-n.sel.done .ocfg-hint{ opacity:1; }
.ocfg-n.sel.done .ocfg-nsub{ fill:#0aff63; }
.ocfg-ring{ fill:none; stroke:#0aff63; stroke-width:1.2; opacity:0; }
.ocfg-n.sel:not(.done) .ocfg-ring{ opacity:.5; animation:ocfgring 2.4s ease-out infinite; }
@keyframes ocfgring{ 0%{ stroke-width:1.2; opacity:.55; } 100%{ stroke-width:.3; opacity:0; transform:scale(1.35); } }
@media (prefers-reduced-motion:reduce){ .ocfg-n.sel .ocfg-ring{ animation:none; opacity:0; } }

/* Modal source segmented control (CTFFactory | CVE exploit for pivots) */
.ocfg-src-seg{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.ocfg-src-seg[hidden]{ display:none; }
.ocfg-src-seg button{ border:0; background:transparent; color:var(--muted); font:inherit; font-size:.76rem;
  font-family:ui-monospace,Menlo,monospace; padding:8px 13px; cursor:pointer; }
.ocfg-src-seg button.on{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }

/* ── CVE browse modal (redesigned) ─────────────────────────────────── */
.ocfg-pick{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(2,6,4,.72); }
.ocfg-pick.is-hidden{ display:none; }
.ocfg-pick-box{ width:min(940px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--panel,#0a1410); border:1px solid var(--line,rgba(10,255,99,.2)); border-radius:16px;
  overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.ocfg-pick-hd{ display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--line); }
.ocfg-pick-hd .ic{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); flex:none; }
.ocfg-pick-hd h3{ margin:0; font-size:1rem; font-weight:700; color:var(--fg); flex:1; line-height:1.2; }
.ocfg-pick-hd h3 .sub{ display:block; font-size:.74rem; color:var(--muted); font-weight:400; margin-top:2px; }
.ocfg-pick-close{ border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:8px;
  width:32px; height:32px; display:grid; place-items:center; cursor:pointer; }
.ocfg-pick-close:hover{ color:var(--fg); border-color:var(--muted); }
.ocfg-pick-filters{ display:flex; gap:10px; padding:13px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ocfg-pick-search{ flex:1; min-width:190px; display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--panel-soft,rgba(255,255,255,.03)); border-radius:9px; padding:0 11px; }
.ocfg-pick-search svg{ color:var(--muted); flex:none; }
.ocfg-pick-search input{ flex:1; border:0; background:none; color:var(--fg); font:inherit; font-size:.86rem; padding:9px 0; outline:none; }
.ocfg-pick-count{ padding:10px 20px 0; font-size:.72rem; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
.ocfg-pick-grid{ overflow-y:auto; padding:12px 20px 20px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:12px; }
.ocfg-pick-card{ border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  background:var(--panel-soft,rgba(10,30,15,.4)); cursor:pointer; transition:.14s; display:flex; flex-direction:column; gap:7px; }
.ocfg-pick-card:hover{ border-color:color-mix(in srgb,var(--accent) 55%,transparent); transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.3); }
.ocfg-pick-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ocfg-pick-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ocfg-pick-prod{ font-weight:700; font-size:.9rem; color:var(--fg); flex:1; min-width:0; }
.ocfg-pick-cve{ font-family:ui-monospace,Menlo,monospace; font-size:.67rem; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; }
.ocfg-pick-sev{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:5px; padding:2px 7px; }
.ocfg-pick-sev.crit{ background:rgba(220,38,38,.16); color:#f87171; }
.ocfg-pick-sev.high{ background:rgba(249,115,22,.16); color:#fb923c; }
.ocfg-pick-sev.med{ background:rgba(251,191,36,.16); color:#fbbf24; }
.ocfg-pick-path{ font-family:ui-monospace,Menlo,monospace; font-size:.68rem; color:color-mix(in srgb,var(--accent) 62%,var(--muted)); word-break:break-all; }
.ocfg-pick-desc{ font-size:.78rem; color:var(--muted); line-height:1.45; margin:0; }
.ocfg-pick-meta{ display:flex; gap:8px; align-items:center; margin-top:1px; }
.ocfg-pick-size{ font-family:ui-monospace,Menlo,monospace; font-size:.66rem; color:var(--muted);
  display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:5px; padding:1px 7px; }
/* Container-footprint weight: heavier boxes are pricier to pull on the
   ephemeral runner, so tint the badge to make triage obvious at a glance. */
.ocfg-pick-size.w-mid{ color:#f5b544; border-color:color-mix(in srgb,#f5b544 40%,transparent); }
.ocfg-pick-size.w-heavy{ color:#ff7a45; border-color:color-mix(in srgb,#ff7a45 45%,transparent);
  background:color-mix(in srgb,#ff7a45 8%,transparent); }
.ocfg-pick-ff{ font-family:ui-monospace,Menlo,monospace; font-size:.66rem; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:5px; padding:1px 7px; margin-left:auto; }
.ocfg-pick-msg{ padding:34px; text-align:center; color:var(--muted); grid-column:1/-1; font-size:.85rem; }
/* Stylized difficulty segmented selector (replaces the <select>). */
.ocfg-diffseg{ display:inline-flex; gap:2px; padding:3px; background:var(--panel-soft,rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:11px; }
.ocfg-diffseg button{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  font:inherit; font-family:ui-monospace,Menlo,monospace; font-size:.7rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); padding:6px 11px; border-radius:8px; transition:color .14s, background .14s; }
.ocfg-diffseg button .ocfg-diffseg-led{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; }
.ocfg-diffseg button:not(.on):hover{ color:var(--fg); background:color-mix(in srgb,var(--fg) 8%,transparent); }
.ocfg-diffseg button.on{ color:#0c1f16; }
.ocfg-diffseg button.on .ocfg-diffseg-led{ opacity:1; background:#0c1f16; }
.ocfg-diffseg button[data-lv="all"].on{ background:#9ca3af; }
.ocfg-diffseg button[data-lv="easy"].on{ background:#34d399; }
.ocfg-diffseg button[data-lv="medium"].on{ background:#fbbf24; }
.ocfg-diffseg button[data-lv="hard"].on{ background:#fb923c; }
.ocfg-diffseg button[data-lv="insane"].on{ background:#f87171; }
/* Card badges: difficulty pastille + vuln-type pastille. */
.ocfg-pick-badges{ display:flex; gap:5px; flex-wrap:wrap; }
.ocfg-pick-pastille{ display:inline-flex; align-items:center; gap:5px; font-family:ui-monospace,Menlo,monospace;
  font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid transparent; }
.ocfg-pick-pastille .ocfg-pastille-led{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.ocfg-diff-easy{ color:#34d399; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }
.ocfg-diff-medium{ color:#fbbf24; border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.1); }
.ocfg-diff-hard{ color:#fb923c; border-color:rgba(251,146,60,.4); background:rgba(251,146,60,.1); }
.ocfg-diff-insane{ color:#f87171; border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.1); }
.ocfg-pick-vuln{ color:#a5b4fc; border-color:rgba(129,140,248,.4); background:rgba(129,140,248,.12); }
.ocfg-pick-vuln .ocfg-pastille-led{ border-radius:2px; }
/* Per-box credit cost — mirrors quota_service.offsec_box_cost. */
.ocfg-pick-cr{ margin-left:auto; display:inline-flex; align-items:center; font-family:ui-monospace,Menlo,monospace;
  font-size:.66rem; font-weight:700; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:5px; padding:1px 7px; }