/* Shared pieces: stats, the VISA card, tables, combobox, ticket board, bell, dialogs, badges, chips. Loaded in the order web/index.html lists them; the order is the cascade. */
/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.stat { border:1px solid var(--line); border-radius:12px; padding:14px 15px; background:var(--line-soft); transition:box-shadow .15s, transform .15s; }
.stat:hover { box-shadow:0 6px 16px -8px rgba(30,20,60,.15); transform:translateY(-1px); }
.stat b { display:block; font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--accent); }
.stat span { font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.stat.valid { background:var(--ok-soft); } .stat.valid b{ color:var(--ok); }
.stat.invalid, .stat.error { background:var(--bad-soft); } .stat.invalid b,.stat.error b{ color:var(--bad); }
.stat.not_found { background:var(--warn-soft); } .stat.not_found b{ color:var(--warn); }
.stat.new_unverified { background:var(--accent-soft); } .stat.new_unverified b{ color:var(--accent); }

.bar { height:8px; background:var(--line-soft); border-radius:999px; overflow:hidden; margin:16px 0 8px; }
.bar > i { display:block; height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .4s ease; }

/* colourful VISA card (validation graphic + generated + repository cards) */
.visa-card { width:320px; max-width:100%; aspect-ratio:1.6/1; border:none; border-radius:16px; color:#fff;
  background:var(--card-grad); padding:20px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 16px 34px -14px rgba(79,70,229,.55); position:relative; overflow:hidden; }
.visa-card::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%); }
.vc-top, .vc-num, .vc-bottom { position:relative; z-index:1; }
.vc-top { display:flex; justify-content:space-between; align-items:center; }
.vc-chip { width:44px; height:32px; border-radius:6px; background:linear-gradient(135deg,#ffe082,#ffca28); box-shadow:0 2px 8px rgba(0,0,0,.2); }
.vc-brand { font-size:20px; font-weight:800; font-style:italic; letter-spacing:1px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.3); }
.vc-num { font-family:var(--mono); font-size:17px; letter-spacing:2.5px; color:#fff; word-break:break-all; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.vc-bottom { display:flex; gap:22px; align-items:flex-end; }
.vc-brandbox { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.vc-type { position:relative; z-index:1; font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); padding:2px 8px; border-radius:999px; }
.vc-issuer { flex:1; min-width:0; } .vc-issuer .vc-val { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* generated card + copy row */
.gen-card-wrap { display:flex; flex-direction:column; gap:10px; min-width:0; }
.gen-card-copy { display:flex; gap:6px; flex-wrap:wrap; }
.gen-card-copy .btn.mini { flex:1; min-width:92px; }
.vc-cap { font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:2px; }
.vc-val { font-size:13px; font-weight:600; letter-spacing:.5px; color:#fff; }
.verify-hero { display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.verify-hero .vh-controls { flex:1; min-width:260px; }

/* records table */
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.toolbar .grow { flex:1 1 190px; } .spacer { flex:1; }
.tblwrap { border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; max-height:calc(var(--vh) * .6); box-shadow:var(--e-1); background:#fff; -webkit-overflow-scrolling:touch; }
/* Submit Card entries: fit the full table width — no horizontal scrollbar; long cells/headers wrap. */
.gc-fit { overflow-x:hidden; }
#gcTbl { table-layout:fixed; width:100%; }
#gcTbl th, #gcTbl td { box-sizing:border-box; white-space:normal; max-width:none; overflow:visible; text-overflow:clip; word-break:break-word; overflow-wrap:anywhere; font-size:11.5px; padding:8px 7px; vertical-align:top; }
/* Premium country combobox */
.gc-combo-panel { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; max-height:280px; overflow:auto; background:var(--panel,#fff); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 46px -14px rgba(20,20,40,.32); padding:6px; }
.gc-combo-opt { padding:9px 12px; border-radius:9px; font-size:13.5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-combo-opt:hover, .gc-combo-opt.active { background:var(--accent-soft); color:var(--accent); }
.gc-combo-manual { border-top:1px solid var(--line-soft); margin-top:5px; padding-top:9px; color:var(--muted); font-style:italic; }
/* Card-testing ticket board */
.ct-pills { display:flex; gap:6px; }
.ct-pill.active { background:var(--accent); color:#fff; border-color:transparent; }
.ct-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.ct-card { border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--panel,#fff); box-shadow:var(--e-1); display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; }
.ct-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent2,#6182f0); }
.ct-card.st-hit::before { background:var(--ok,#16a34a); }
.ct-card.st-no_hit::before { background:var(--bad,#dc2626); }
.ct-bin { font-family:var(--mono,monospace); font-weight:700; font-size:16px; letter-spacing:.02em; }
.ct-meta { font-size:12px; color:var(--muted); }
.ct-foot { display:flex; align-items:center; gap:8px; margin-top:2px; flex-wrap:wrap; }
.ct-timeline { display:flex; flex-direction:column; gap:4px; margin:2px 0; padding-left:10px; border-left:2px solid var(--line); }
.ct-step { font-size:12px; color:var(--muted); line-height:1.4; }
.ct-step.done { color:var(--text,#111); }
.ct-step.active { color:var(--accent); }
.ct-step.wait { color:var(--muted); font-style:italic; }
.ct-assign-sel { font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:8px; background:var(--panel,#fff); color:var(--text,#111); }
.ct-grow { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-size:12px; font-weight:600; color:var(--ok,#16a34a); background:var(--ok-soft,#e7f6ec); border:1px solid var(--ok-line,#b6e3c4); border-radius:9px; padding:3px 9px; }
.ct-empty { color:var(--muted); padding:20px; text-align:center; }
.badge.open { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.badge.hit { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.badge.no_hit { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
/* Notification bell (global, top-right) */
#notifWrap { position:fixed; top:16px; right:20px; z-index:120; }
#notifBell { position:relative; width:42px; height:42px; border-radius:50%; border:1px solid var(--accent,#3454d1); background:var(--accent,#3454d1); color:#fff; cursor:pointer; box-shadow:0 8px 22px -10px rgba(52,84,209,.55); display:grid; place-items:center; transition:transform .1s, box-shadow .15s; }
#notifBell:hover { transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(20,20,40,.5); }
#notifDot { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--bad,#dc2626); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg,#f4f5fb); }
#notifDot[hidden] { display:none; } /* attribute must beat display:grid, else the unread badge shows with zero unread */
#notifPanel { position:absolute; top:50px; right:0; width:340px; max-width:calc(100vw - 40px); max-height:min(420px,70vh); overflow:auto; background:var(--panel,#fff); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -14px rgba(20,20,40,.4); padding:6px; }
.notif-head { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 6px; }
.notif-item { padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.4; cursor:default; }
.notif-item.unread { background:var(--accent-soft); }
.notif-item + .notif-item { border-top:1px solid var(--line-soft); }
.notif-item .nt { font-size:11px; color:var(--muted); margin-top:2px; }
.notif-empty { color:var(--muted); padding:18px; text-align:center; font-size:13px; }
/* Success acknowledgement dialog */
.ack-ov { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(20,22,40,.42); backdrop-filter:blur(2px); animation:ackFade .18s ease; }
.ack-ov[hidden] { display:none; } /* attribute must beat the display:grid above, else the dialog shows on every load */
.ack-box { background:var(--panel,#fff); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 80px -20px rgba(20,20,40,.5); padding:26px 30px 22px; width:min(360px,calc(100vw - 40px)); text-align:center; transform-origin:center; animation:ackPop .32s cubic-bezier(.18,.9,.32,1.4); }
.ack-check { width:56px; height:56px; margin:0 auto 12px; }
.ack-c { stroke:var(--ok,#16a34a); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:ackDash .5s ease .08s forwards; }
.ack-t { stroke:var(--ok,#16a34a); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:ackDash .35s ease .42s forwards; }
.ack-title { font-size:19px; font-weight:700; color:var(--text,#111); margin-bottom:4px; }
.ack-body { font-size:13px; color:var(--muted); margin-bottom:16px; word-break:break-word; }
.ack-box .btn { min-width:100px; }
@keyframes ackFade { from{opacity:0} to{opacity:1} }
@keyframes ackPop { 0%{opacity:0; transform:scale(.8) translateY(8px)} 100%{opacity:1; transform:scale(1) translateY(0)} }
@keyframes ackDash { to{stroke-dashoffset:0} }
/* Generated cards repository — clean compact card */
.genrepo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:12px; }
.grc-restchip {
  background:#fdeaea; color:#b3261e; border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700;
  letter-spacing:.03em; white-space:nowrap;
}
.genrepo-card.grc-rest { background:var(--panel2,#f6f7fb); border-color:#f0c9c6; }
.genrepo-card.grc-rest .grc-num { color:var(--faint); }
.genrepo-card { position:relative; border:1px solid var(--line); border-radius:14px; padding:14px 16px 12px; background:var(--panel,#fff); box-shadow:var(--e-1); display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s, transform .06s; }
.genrepo-card:hover { box-shadow:var(--e-2,0 10px 26px -12px rgba(20,20,40,.35)); }
.grc-check { position:absolute; top:10px; right:10px; }
.grc-check input { width:16px; height:16px; cursor:pointer; }
.grc-brand { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--accent,#3454d1); text-transform:uppercase; }
.grc-num { font-size:16px; font-weight:600; letter-spacing:.04em; color:var(--text,#111); }
.grc-meta { display:flex; gap:16px; font-size:12px; color:var(--muted); }
.grc-meta b { color:var(--text,#111); font-weight:600; }
.grc-foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; border-top:1px solid var(--line-soft); padding-top:8px; margin-top:2px; }
/* Who and when own the full first row, so the name is never the item that gives up space to a
   button. flex-basis:100% is what forces the buttons onto the row below. */
.grc-by { flex:1 0 100%; display:flex; align-items:baseline; gap:8px; min-width:0; }
.grc-analyst { flex:0 1 auto; min-width:0; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grc-date { flex:0 0 auto; font-size:11px; color:var(--muted); white-space:nowrap; }
.grc-usedchip { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:#9a5b00; background:#fff7e6; border:1px solid #ffe0a3; border-radius:999px; padding:1px 7px; margin-left:6px; animation:usedpulse 1.7s ease-in-out infinite; }
@keyframes usedpulse { 0%,100% { box-shadow:0 0 0 0 rgba(154,91,0,.22); } 50% { box-shadow:0 0 0 5px rgba(154,91,0,0); } }
.grc-usage { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; font-size:12px; color:var(--muted); }
.grc-usage .u-row { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
.grc-usage .u-first { color:var(--ink); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .ack-ov,.ack-box{animation:none} .ack-c,.ack-t{animation:none;stroke-dashoffset:0} }
/* Apex-domain confirmation. The overlay's position/inset/z-index stay INLINE in JS on purpose: the modal
   contract observer reads n.style.position / n.style.inset / n.style.zIndex, so moving them into a class
   makes the dialog invisible to the contract and it silently loses role/aria-modal/Escape/focus-trap. */
@keyframes apexRise { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
.apex-box  { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--e-4);
             padding:24px 28px 20px; width:min(500px, calc(100vw - 40px)); animation:apexRise .24s var(--ease) both; }
.apex-row  { display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
.apex-row .field { flex:1; min-width:0; }
/* One warning box for the whole app. Four places had hand-rolled this with three different literal colour
   sets (#f2c200/#fff8e1/#7a5a00 twice verbatim, plus rgba(255,192,0,...) on the retest banner) while these
   exact tokens sat unused at line 24. Renamed from .apex-warn: it was never apex-specific. */
.warn-box, .apex-warn { margin:12px 0 0; padding:10px 12px; border-radius:var(--r-md); font-size:12.5px; line-height:1.5;
             background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); }
.warn-box b, .apex-warn b { color:var(--warn); }
/* The two inline warnings sit tight under a section heading, so they lose the top margin. */
#trkCardWarn, .warn-inline { margin:2px 0 10px; }
.apex-acts { margin-top:16px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
/* AI: card-testing selection */
.aicard-wrap { flex:0 0 auto; display:inline-flex; align-items:center; margin-right:2px; cursor:pointer; }
.ai-card-foot { display:flex; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--line-soft); }
@media (max-width:640px){ #hsTbl, #auditTbl { min-width:640px; } } /* #usersTbl deliberately NOT here: it now fits by design (colgroup + .users-fit) and this rule would force the scrollbar straight back */ /* wide log/admin tables scroll horizontally instead of squishing on mobile */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
#tbl { table-layout:fixed; }
#tbl th, #tbl td { overflow:hidden; text-overflow:ellipsis; }
.rowbtns { display:flex; gap:6px; }
.rowbtns .btn.mini { padding:5px 9px; }
thead th { position:sticky; top:0; z-index:2; background:var(--n-50,#f5f7fb); color:var(--muted); text-align:left; font-weight:600; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:11px 12px; border-bottom:1px solid var(--line-strong); box-shadow:0 1px 0 var(--line-strong); }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody td { padding:10px 12px; border-bottom:1px solid var(--line-soft); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
/* Menu-access cell: let all tab checkboxes wrap and stay visible (overrides the clip above). */
/* .menucell retired: the 8 menu checkboxes live in the expanded per-user card now, so no cell needs 260px. */
tbody tr:nth-child(even) td { background:#fafbfd; }
tbody tr { transition:background var(--t-fast); }
tbody tr:hover td { background:var(--accent-soft); }
td.bin { font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; }
/* status badges — dot + border pill (premium tell over flat fills), AA-contrast */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 8px; border-radius:var(--r-pill); font-size:11px; font-weight:600; line-height:1.4; border:1px solid transparent; }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge.valid, .badge.verified { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.badge.invalid, .badge.error, .badge.verification_failed { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.badge.not_found { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.badge.unverified, .badge.origin-legacy { background:var(--neutral-soft); color:var(--neutral); border-color:var(--neutral-line); }
.badge.new_unverified, .badge.origin-discovery, .badge.type { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft-2); }
.badge.nonvisa { background:var(--bad); color:#fff; border-color:var(--bad); font-weight:700; }
.badge.nonvisa::before { background:#fff; }
.badge.hit { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); font-weight:700; }
tr.nonvisa-row td { background:var(--bad-soft) !important; }
tr.nonvisa-row td.bin { color:var(--bad); }
.nonvisa-banner { background:var(--bad); color:#fff; font-weight:700; padding:10px 14px; border-radius:10px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.empty { padding:var(--s-10) var(--s-4); text-align:center; color:var(--muted); }
.empty svg { width:38px; height:38px; opacity:.35; margin-bottom:var(--s-3); }
.empty b { display:block; color:var(--ink); font-size:14px; margin-bottom:2px; }
/* skeleton shimmer — only for genuinely-async surfaces (assistant stream, repo grid), never ms-fast DB tables */
.skel { background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%); background-size:400% 100%; border-radius:var(--r-sm); animation:shimmer 1.4s ease infinite; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* similar-BIN chips */
.simbins { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.simbin { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.simbin .sb-bin { font-family:var(--mono); font-weight:600; font-size:13px; }
.simbin .sb-co { color:var(--muted); font-size:12px; }
.simbin .sb-date { color:var(--faint); font-size:11.5px; margin-left:auto; }
.simbin .btn.mini { margin-left:8px; }

/* verification detail dropdown */
.exprow > td { background:var(--line-soft); padding:0; }
.detailcard { padding:16px 18px; }
.dc-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.dc-brand { font-size:18px; font-weight:800; font-style:italic; color:var(--ink); }
.dc-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 20px; }
@media (max-width:720px){ .dc-grid { grid-template-columns:repeat(2,1fr); } }
.dc-f { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dc-f > span { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.dc-f > b { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.v-true { color:var(--ok); } .v-false { color:var(--bad); }
.dc-hist { margin-top:16px; }
.dc-hist-title { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:6px; }
.histtbl { width:100%; border-collapse:collapse; font-size:12px; }
.histtbl th { text-align:left; color:var(--muted); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line); font-size:10px; text-transform:uppercase; }
.histtbl td { padding:4px 8px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.ts { font-family:var(--mono); font-size:11px; color:var(--muted); }

/* generated list — compact, masked-by-default rows with per-row reveal + pagination */
.gen-list { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e-1); }
.gen-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s-3) var(--s-4); padding:11px 14px; border-bottom:1px solid var(--line-soft); }
.gen-row:last-child { border-bottom:none; }
.gen-row:nth-child(even) { background:#fafbfd; }
.gen-row:hover { background:var(--accent-soft); }
.gen-main { min-width:0; }
.gen-pan { font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:1px; font-variant-numeric:tabular-nums; color:var(--ink); }
.gen-pan.masked { color:var(--faint); letter-spacing:2px; }
.gen-meta { font-size:11.5px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums; }
.gen-meta .mask { color:var(--faint); }
.gen-btns { display:flex; gap:6px; align-items:center; opacity:.55; transition:opacity var(--t-fast); }
.gen-row:hover .gen-btns, .gen-row:focus-within .gen-btns { opacity:1; }
.icon-btn { display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:#fff; color:var(--muted); cursor:pointer; font-size:14px; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.icon-btn:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft-2); }
.icon-btn[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft-2); }
.gen-pager { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding-top:var(--s-4); margin-top:var(--s-4); border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.gen-pager .pg-ctrl { display:flex; align-items:center; gap:var(--s-2); }
.gen-list-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin:4px 0 12px; }
.count-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-soft-2); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
/* hero: controls left, live preview right — one cohesive unit, no dead gap */
.gen-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-8); align-items:center; margin-top:var(--s-5); }
.gen-hero-controls { min-width:0; display:flex; flex-direction:column; gap:var(--s-4); }
.gen-hero-preview { display:flex; justify-content:flex-end; }
.gen-hero-preview:empty { display:none; }
.gen-hero-preview .visa-card { animation:cardIn var(--t-slow) var(--ease); }
.gen-hero-empty { display:flex; align-items:center; justify-content:center; width:320px; max-width:100%; aspect-ratio:1.6/1; border:1.5px dashed var(--line-strong); border-radius:16px; color:var(--faint); font-size:12.5px; text-align:center; padding:var(--s-5); }
@media (max-width:760px){ .gen-hero { grid-template-columns:1fr; } .gen-hero-preview { justify-content:center; } }
/* multi-card batch: hero goes full-width, cards in a 2-up motion grid */
.gen-hero.multi { grid-template-columns:1fr; }
.gen-hero.multi .gen-hero-preview { justify-content:stretch; }
.gen-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5); width:100%; }
@media (max-width:560px){ .gen-preview-grid { grid-template-columns:1fr; } }
.gen-preview-grid .visa-card { width:100%; opacity:0; animation:cardIn .45s var(--ease) forwards; }
.gen-pv-more { grid-column:1/-1; text-align:center; font-size:12.5px; color:var(--muted); padding-top:var(--s-1); }
/* continuous VISA shine sweep (motion graphic) on preview cards */
.gen-hero-preview .visa-card::after { animation:shine 3.6s ease-in-out infinite; }
@keyframes shine { 0% { transform:translateX(-120%); } 55% { transform:translateX(120%); } 100% { transform:translateX(120%); } }
@keyframes cardIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }

/* verified-valid BIN repository */
.repo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:14px; }
.repo-card { display:flex; flex-direction:column; gap:10px; }
.repo-card .visa-card { width:100%; cursor:pointer; transition:transform .08s, box-shadow .12s; }
.repo-card .visa-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(35,58,140,.22); }
.repo-foot { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.repo-foot .reverify { margin-left:auto; }
.badge.type { background:#eaeefc; color:#3040a8; }
.repo-hist { border-top:1px solid #ece9f5; margin-top:2px; padding-top:8px; overflow-x:auto; }
.repo-hist .histtbl { font-size:11.5px; }
.repo-foot { display:flex; justify-content:space-between; align-items:center; }
.repo-acts { display:flex; gap:6px; align-items:center; }

/* live lookup */
.lookup-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.lookup-bar input { flex:1; min-width:220px; font-size:16px; font-family:var(--mono); }
.lk-result { display:grid; grid-template-columns:300px 1fr; gap:18px; margin-top:18px; align-items:start; max-width:840px; }
@media (max-width:820px){ .lk-result { grid-template-columns:1fr; } }
.lk-chip-card { background:var(--navy); color:#fff; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:16px; aspect-ratio:1.6/1; justify-content:space-between; }
.lk-chip-top { display:flex; justify-content:space-between; align-items:flex-start; }
.lk-chip-top .lk-bin { font-family:var(--mono); font-size:22px; letter-spacing:2px; }
.lk-chip-top .lk-cap { font-size:10px; color:var(--navy-muted); text-transform:uppercase; letter-spacing:.08em; }
.lk-chip-net { font-size:18px; font-weight:800; font-style:italic; }
.lk-chips { display:flex; gap:8px; flex-wrap:wrap; }
.lk-chips span { background:rgba(255,255,255,.1); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; }
.lk-info { border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:#fff; }
.lk-valid { display:inline-flex; align-items:center; gap:6px; background:var(--ok-soft); color:var(--ok); font-weight:700; font-size:12.5px; padding:4px 12px; border-radius:999px; }
.lk-valid.bad { background:var(--bad); color:#fff; }
.lk-sec { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:12px 0 8px; border-top:1px solid var(--line-soft); padding-top:10px; }
.lk-sec:first-of-type { border-top:none; padding-top:0; margin-top:2px; }
.lk-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; }
.lk-f > span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:1px; }
.lk-f > b { font-size:13px; font-weight:600; }
.lk-saved { margin-top:14px; font-size:12.5px; color:var(--ok); font-weight:600; }
.lk-saved.bad { color:var(--bad); }

.toast { position:fixed; right:20px; bottom:20px; background:var(--navy); color:#fff; padding:11px 16px; border-radius:10px; font-weight:600; font-size:13px; opacity:0; transform:translateY(8px); transition:.25s; pointer-events:none; z-index:60; box-shadow:0 10px 28px -8px rgba(20,20,40,.4); }
.toast.show { opacity:1; transform:translateY(0); }