/* ===== Scoped styles, unique prefix: .bfcodes ===== */
  .bfcodes { --bfcodes-bg:#0b0f17; --bfcodes-card:#121826; --bfcodes-soft:#1a2235; --bfcodes-border:#233149; --bfcodes-text:#e7eef9; --bfcodes-dim:#a9b6d0; --bfcodes-accent:#5aa9ff; --bfcodes-green:#22c55e; --bfcodes-red:#ef4444; --bfcodes-yellow:#f59e0b; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color: var(--bfcodes-text); background: transparent; }
  .bfcodes * { box-sizing: border-box; }
  .bfcodes-hero { display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:end; background: linear-gradient(180deg, rgba(90,169,255,0.12), transparent 40%), var(--bfcodes-card); border:1px solid var(--bfcodes-border); padding:1.25rem; border-radius:14px; }
  .bfcodes-title { margin:0; font-size:1.5rem; line-height:1.2; }
  .bfcodes-sub { margin:.25rem 0 0; color:var(--bfcodes-dim); font-size:.95rem; }
  .bfcodes-meta { margin-top:.5rem; font-size:.85rem; color:var(--bfcodes-dim); }
  .bfcodes-meta-count { display:inline-block; margin-left:1rem; }
  .bfcodes-hero-right { display:flex; gap:.5rem; }
  .bfcodes-btn { background: var(--bfcodes-accent); color:#051223; border:none; padding:.6rem .9rem; border-radius:10px; font-weight:600; cursor:pointer; transition: transform .06s ease, opacity .2s; }
  .bfcodes-btn:hover { transform: translateY(-1px); }
  .bfcodes-btn-ghost { background: transparent; color: var(--bfcodes-text); border:1px solid var(--bfcodes-border); }
  .bfcodes-howto { margin:.75rem 0 0; padding:1rem; background: var(--bfcodes-card); border:1px solid var(--bfcodes-border); border-radius:12px; }
  .bfcodes-steps { margin:0; padding-left:1.2rem; line-height:1.6; color:var(--bfcodes-dim); }
  .bfcodes-controls { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
  .bfcodes-control { background: var(--bfcodes-card); border:1px solid var(--bfcodes-border); padding:.6rem .7rem; border-radius:12px; display:flex; flex-direction:column; gap:.35rem; }
  .bfcodes-label { font-size:.78rem; color:var(--bfcodes-dim); }
  .bfcodes-input, .bfcodes-select { width:100%; background: var(--bfcodes-soft); border:1px solid var(--bfcodes-border); color:var(--bfcodes-text); padding:.55rem .6rem; border-radius:8px; outline:none; }
  .bfcodes-input:focus, .bfcodes-select:focus { border-color: var(--bfcodes-accent); box-shadow: 0 0 0 3px rgba(90,169,255,0.25); }
  .bfcodes-toggle { flex-direction:row; align-items:center; gap:.5rem; }
  .bfcodes-checkbox { width:1.05rem; height:1.05rem; accent-color: var(--bfcodes-accent); cursor:pointer; }
  .bfcodes-table-wrap { background: var(--bfcodes-card); border:1px solid var(--bfcodes-border); border-radius:14px; overflow:auto; }
  .bfcodes-table { width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
  .bfcodes-table thead th { position:sticky; top:0; background: #0e1524; color:#cdd9f0; font-weight:700; text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--bfcodes-border); font-size:.9rem; }
  .bfcodes-table caption { caption-side: top; text-align:left; padding:.6rem .9rem; color:var(--bfcodes-dim); font-size:.82rem; }
  .bfcodes-table tbody td { padding:.75rem .9rem; border-bottom:1px solid rgba(35,49,73,.7); vertical-align:middle; }
  .bfcodes-col-used { width:70px; }
  .bfcodes-col-actions { width:160px; }
  .bfcodes-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.22rem .5rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.2px; }
  .bfcodes-badge.working { background: rgba(34,197,94,.15); color:#86efac; border:1px solid rgba(34,197,94,.35); }
  .bfcodes-badge.expired { background: rgba(239,68,68,.12); color:#fecaca; border:1px solid rgba(239,68,68,.35); }
  .bfcodes-badge.warn { background: rgba(245,158,11,.12); color:#fde68a; border:1px solid rgba(245,158,11,.35); }
  .bfcodes-tag { display:inline-block; padding:.1rem .45rem; background: rgba(90,169,255,.12); color:#b9ddff; border:1px solid rgba(90,169,255,.35); border-radius:6px; font-size:.75rem; }
  .bfcodes-actions { display:flex; gap:.4rem; }
  .bfcodes-small { font-size:.82rem; color:var(--bfcodes-dim); }
  .bfcodes-empty { text-align:center; padding:1rem; color:var(--bfcodes-dim); }
  .bfcodes-footer { display:flex; gap:.6rem; justify-content:flex-end; margin:.8rem 0 0; }
  .bfcodes-row-used input { width:1rem; height:1rem; accent-color: var(--bfcodes-accent); cursor:pointer; }
  .bfcodes-row-used label { display:none; }
  .bfcodes-codebox { display:flex; align-items:center; gap:.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
  .bfcodes-code { padding:.22rem .4rem; border-radius:6px; background: #0d1423; border:1px solid var(--bfcodes-border); }
  .bfcodes-note-dim { color: var(--bfcodes-dim); }
  .bfcodes-btn-copy { background: var(--bfcodes-soft); color: var(--bfcodes-text); border:1px solid var(--bfcodes-border); padding:.45rem .6rem; border-radius:8px; cursor:pointer; }
  .bfcodes-btn-copy.ok { outline: 2px solid rgba(34,197,94,.35); }
  /* Responsive */
  @media (max-width: 900px) {
    .bfcodes-controls { grid-template-columns: 1fr 1fr; }
    .bfcodes-hero { grid-template-columns: 1fr; align-items:start; }
    .bfcodes-hero-right { justify-content:flex-start; }
  }