/* ============================================================
   billing.css — the dashboard's Billing & plan page (public/js/billing.js, bl-*).
   Everything is scoped under .bl-root / .bl-flow with bl- classes — no global styles.
   Colours come from the dashboard tokens (--panel/--text/--accent… in light + dark);
   status colours get darker light-mode values (same ones Quotes & Invoices uses).
   Motion: entrance stagger, card tilt/sheen/flip, count-up, skeleton shimmer — all off
   under prefers-reduced-motion (the card is then static and flips without rotating).
   ============================================================ */
.bl-root, .bl-flow{
  --bl-text:var(--text,#EAF2F9); --bl-body:var(--body,#A9BFD3); --bl-muted:var(--muted,#7A9BB5);
  --bl-panel:var(--panel,#0a1626); --bl-well:var(--panel2,#081120); --bl-raised:var(--raised,#0e2236);
  --bl-line:var(--line,rgba(255,255,255,.07)); --bl-accent:var(--accent,#F5A623); --bl-accent-soft:var(--accent-soft,rgba(245,166,35,.12));
  --bl-accent-line:var(--accent-line,rgba(245,166,35,.3)); --bl-accent-ink:var(--accent-ink,#1a1206);
  --bl-green:#5DCAA5; --bl-green-soft:rgba(93,202,165,.12); --bl-green-line:rgba(93,202,165,.32);
  --bl-red:#FF6B5E; --bl-red-soft:rgba(255,107,94,.1); --bl-red-line:rgba(255,107,94,.34);
  --bl-amber:#F5C75D; --bl-amber-soft:rgba(245,199,93,.12); --bl-amber-line:rgba(245,199,93,.34);
  --bl-violet:#A78BFA; --bl-violet-soft:rgba(167,139,250,.12);
  --bl-display:var(--display,'Sora',system-ui,sans-serif); --bl-mono:var(--mono,ui-monospace,monospace);
  --bl-r:var(--r,13px); --bl-rl:var(--r-lg,21px); --bl-shadow:var(--shadow,0 21px 55px rgba(0,0,0,.55));
  --bl-ease:cubic-bezier(.2,.8,.2,1);
}
[data-mode="light"] .bl-root, [data-mode="light"] .bl-flow{
  --bl-green:#1f8a66; --bl-green-soft:rgba(31,138,102,.1); --bl-green-line:rgba(31,138,102,.3);
  --bl-red:#c6372a; --bl-red-soft:rgba(198,55,42,.08); --bl-red-line:rgba(198,55,42,.3);
  --bl-amber:#9A5B00; --bl-amber-soft:rgba(245,166,35,.13); --bl-amber-line:rgba(154,91,0,.28);
  --bl-violet:#6d4fd6; --bl-violet-soft:rgba(109,79,214,.09);
}
/* bottom clearance so the floating AI orb never sits on the last button */
.bl-root{color:var(--bl-body); display:grid; gap:var(--s3,21px); padding-bottom:76px}
.bl-root *, .bl-flow *{box-sizing:border-box}
.bl-root h2{font-family:var(--bl-display); font-size:18px; font-weight:800; color:var(--bl-text); letter-spacing:-.02em; margin:0}
.bl-sub{font-size:13.5px; color:var(--bl-muted); margin:3px 0 0}
.bl-sec{background:var(--bl-panel); border:1px solid var(--bl-line); border-radius:var(--bl-rl); padding:22px; position:relative; overflow:hidden}
.bl-sec-h{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}

/* ---- entrance ---- */
.bl-in{opacity:0; transform:translateY(10px); animation:blIn .55s var(--bl-ease) forwards; animation-delay:calc(var(--i,0) * 70ms)}
@keyframes blIn{to{opacity:1; transform:none}}

/* ---- buttons ---- */
.bl-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:999px;
  font:inherit; font-size:14px; font-weight:650; white-space:nowrap; cursor:pointer; border:1px solid var(--bl-line); background:transparent; color:var(--bl-text);
  transition:transform .16s, box-shadow .2s, background .2s, border-color .2s, color .2s, opacity .2s}
.bl-btn:active{transform:translateY(1px) scale(.98)}
.bl-btn i{font-size:17px}
.bl-btn:focus-visible, .bl-card-btn:focus-visible, .bl-chip-r:focus-visible{outline:3px solid color-mix(in srgb,var(--bl-accent) 55%,transparent); outline-offset:2px}
.bl-btn.go{background:var(--bl-accent); border-color:var(--bl-accent); color:var(--bl-accent-ink); box-shadow:0 8px 26px var(--bl-accent-soft)}
.bl-btn.go:hover{box-shadow:0 8px 30px var(--bl-accent-line)}
.bl-btn.ghost:hover{border-color:var(--bl-accent-line); color:var(--bl-accent)}
.bl-btn.danger{border-color:var(--bl-red-line); color:var(--bl-red)}
.bl-btn.danger:hover{background:var(--bl-red-soft)}
.bl-btn.danger-go{background:#D93B30; border-color:#D93B30; color:#fff}
.bl-btn.danger-go:hover{filter:brightness(1.06)}
.bl-btn[disabled], .bl-btn.busy{opacity:.55; pointer-events:none}
.bl-btn .bl-spin{width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:blSpin .7s linear infinite}
@keyframes blSpin{to{transform:rotate(360deg)}}

/* ---- banner (past due / finalising / test mode) ---- */
.bl-banner{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-radius:var(--bl-r); border:1px solid var(--bl-red-line);
  background:var(--bl-red-soft); color:var(--bl-text); font-size:14px}
.bl-banner > i{font-size:21px; color:var(--bl-red); flex:none}
.bl-banner .tx{flex:1 1 240px; min-width:0}
.bl-banner .tx b{display:block; font-weight:700}
.bl-banner .tx span{color:var(--bl-body); font-size:13.5px}
.bl-banner.info{border-color:var(--bl-accent-line); background:var(--bl-accent-soft)}
.bl-banner.info > i{color:var(--bl-accent)}
.bl-testtag{display:inline-flex; align-items:center; gap:6px; font-family:var(--bl-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bl-amber); background:var(--bl-amber-soft); border:1px solid var(--bl-amber-line); border-radius:999px; padding:3px 9px; justify-self:start}

/* ---- hero: virtual card + plan card ---- */
.bl-hero{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:var(--s3,21px); align-items:stretch}
.bl-cardwrap{display:flex; flex-direction:column; gap:12px; align-items:stretch}
.bl-cardstage{perspective:1100px; width:100%; max-width:400px}
.bl-vcard{position:relative; width:100%; aspect-ratio:1.586; border-radius:20px; transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--flip,0deg))); transition:transform .5s var(--bl-ease); will-change:transform}
.bl-vcard.tracking{transition:transform .08s linear}
.bl-vcard.flipped{--flip:180deg}
.bl-face{position:absolute; inset:0; border-radius:inherit; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  padding:22px 24px; color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 22px 50px rgba(3,10,22,.38), inset 0 0 0 1px rgba(255,255,255,.14)}
.bl-face.back{transform:rotateY(180deg); justify-content:flex-start; padding:0}
/* brand gradients */
.bl-vcard[data-brand="visa"] .bl-face{background:radial-gradient(120% 140% at 0% 0%,#3b54d6 0%,#1d2a8f 45%,#0f1557 100%)}
.bl-vcard[data-brand="mastercard"] .bl-face{background:radial-gradient(120% 140% at 0% 0%,#3a3a3f 0%,#1d1d22 50%,#0b0b0e 100%)}
.bl-vcard[data-brand="amex"] .bl-face{background:radial-gradient(120% 140% at 0% 0%,#4fb3ec 0%,#127fc9 45%,#0a4f8a 100%)}
.bl-vcard[data-brand="discover"] .bl-face{background:radial-gradient(120% 140% at 0% 0%,#ffb067 0%,#e8701e 50%,#a3420a 100%)}
.bl-vcard[data-brand="other"] .bl-face{background:radial-gradient(120% 140% at 0% 0%,#24476b 0%,#13283f 50%,#0a1626 100%)}
.bl-face::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px); mix-blend-mode:overlay}
/* pointer-following glare + one-off sheen sweep */
.bl-face .glare{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(60% 70% at var(--mx,50%) var(--my,30%),rgba(255,255,255,.26),transparent 60%)}
.bl-vcard.tracking .glare{opacity:1}
.bl-face .sheen{position:absolute; top:-40%; bottom:-40%; width:38%; left:-60%; pointer-events:none; transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.bl-vcard.sweep .front .sheen{animation:blSheen 1.25s var(--bl-ease) .25s 1 both}
@keyframes blSheen{from{left:-60%} to{left:130%}}
.bl-row{display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative}
.bl-chip{width:44px; height:33px; flex:none}
.bl-nfc{width:22px; height:22px; opacity:.85}
.bl-num{font-family:var(--bl-mono); font-size:clamp(17px,4.6vw,21px); letter-spacing:.14em; text-shadow:0 1px 2px rgba(0,0,0,.35); white-space:nowrap}
.bl-num .dots{letter-spacing:.2em; opacity:.85}
.bl-meta{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.bl-meta small{display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-bottom:2px}
.bl-meta .nm{font-size:13.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bl-meta .ex{font-family:var(--bl-mono); font-size:14px; letter-spacing:.06em}
.bl-brand{height:26px; display:flex; align-items:center}
.bl-brand svg{height:100%; width:auto}
.bl-brand .wm{font-family:var(--bl-display); font-weight:800; font-size:21px; letter-spacing:.02em; font-style:italic}
.bl-expired{position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:2; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:#D93B30; color:#fff; padding:4px 9px; border-radius:999px}
/* back face */
.bl-stripe{height:46px; margin-top:24px; background:linear-gradient(180deg,#0b0b0e,#1e1e24)}
.bl-back-body{padding:16px 22px 20px; display:flex; flex-direction:column; gap:12px; flex:1}
.bl-back-body p{margin:0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.82)}
.bl-back-body .bl-card-btn{align-self:flex-start}
.bl-card-btn{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px; border:0; cursor:pointer;
  background:#fff; color:#0D1B2A; font:inherit; font-size:13.5px; font-weight:750; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bl-card-btn i{font-size:16px}
.bl-fliphint{display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; color:var(--bl-muted)}
.bl-fliphint i{font-size:15px}
/* the card is a button (flip) */
.bl-cardhit{all:unset; display:block; width:100%; border-radius:20px; cursor:pointer}
.bl-cardhit:focus-visible{outline:3px solid color-mix(in srgb,var(--bl-accent) 60%,transparent); outline-offset:4px}
/* ghost card (no card on file) */
.bl-ghost{width:100%; max-width:400px; aspect-ratio:1.586; border-radius:20px; border:2px dashed var(--bl-accent-line); background:
  linear-gradient(135deg,color-mix(in srgb,var(--bl-accent) 6%,transparent),transparent 60%), var(--bl-well);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--bl-text); cursor:pointer;
  font:inherit; transition:border-color .2s, transform .2s}
.bl-ghost:hover{border-color:var(--bl-accent); transform:translateY(-2px)}
.bl-ghost .pl{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--bl-accent-soft); color:var(--bl-accent); font-size:26px}
.bl-ghost b{font-family:var(--bl-display); font-size:17px; font-weight:800}
.bl-ghost span{font-size:13px; color:var(--bl-muted); max-width:26ch; text-align:center}

/* plan card */
.bl-plan{display:flex; flex-direction:column; gap:14px; padding:24px; background:
  radial-gradient(120% 120% at 100% 0%,var(--bl-accent-soft),transparent 55%), var(--bl-panel)}
.bl-plan-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.bl-eyebrow{font-family:var(--bl-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bl-muted)}
.bl-pname{font-family:var(--bl-display); font-size:clamp(28px,4vw,36px); font-weight:800; color:var(--bl-text); letter-spacing:-.03em; line-height:1.05; margin:0}
.bl-price{display:flex; align-items:baseline; gap:6px; color:var(--bl-text)}
.bl-price .amt{font-family:var(--bl-display); font-size:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.bl-price .per{font-size:13.5px; color:var(--bl-muted)}
.bl-badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:999px; border:1px solid}
.bl-badge::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.bl-badge.g{color:var(--bl-green); background:var(--bl-green-soft); border-color:var(--bl-green-line)}
.bl-badge.r{color:var(--bl-red); background:var(--bl-red-soft); border-color:var(--bl-red-line)}
.bl-badge.a{color:var(--bl-amber); background:var(--bl-amber-soft); border-color:var(--bl-amber-line)}
.bl-badge.m{color:var(--bl-muted); background:color-mix(in srgb,var(--bl-text) 5%,transparent); border-color:var(--bl-line)}
.bl-badge.g::before{box-shadow:0 0 0 3px var(--bl-green-soft); animation:blPulse 2.4s ease-in-out infinite}
@keyframes blPulse{50%{box-shadow:0 0 0 6px transparent}}
.bl-lines{display:grid; gap:8px; margin:0; padding:14px 0 0; border-top:1px solid var(--bl-line); list-style:none}
.bl-lines li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--bl-body)}
.bl-lines li i{font-size:17px; color:var(--bl-muted); flex:none}
.bl-lines li b{color:var(--bl-text); font-weight:700; font-variant-numeric:tabular-nums}
.bl-lines li.warn i, .bl-lines li.warn b{color:var(--bl-red)}
.bl-lines li.amb i, .bl-lines li.amb b{color:var(--bl-amber)}
.bl-acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}

/* ---- compare ---- */
.bl-compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.bl-feats li.lim i{color:var(--bl-accent)}
.bl-tier{position:relative; display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:var(--bl-r); border:1px solid var(--bl-line); background:var(--bl-well);
  transition:border-color .2s, transform .2s, box-shadow .2s}
.bl-tier:hover{transform:translateY(-2px)}
.bl-tier.cur{border-color:var(--bl-accent-line); box-shadow:0 0 0 1px var(--bl-accent-line) inset, 0 14px 36px var(--bl-accent-soft)}
.bl-tier-h{display:flex; align-items:center; justify-content:space-between; gap:10px}
.bl-tier-h b{font-family:var(--bl-display); font-size:20px; font-weight:800; color:var(--bl-text); letter-spacing:-.02em}
.bl-curtag{font-size:11.5px; font-weight:750; letter-spacing:.04em; color:var(--bl-accent-ink); background:var(--bl-accent); padding:3px 10px; border-radius:999px}
.bl-tier .bl-price .amt{font-size:26px}
.bl-feats{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.bl-feats li{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--bl-body)}
.bl-feats li i{font-size:16px; margin-top:1px; flex:none; color:var(--bl-green)}
.bl-feats li.no{color:var(--bl-muted)}
.bl-feats li.no i{color:var(--bl-muted); opacity:.6}
.bl-feats li.no span{text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--bl-muted) 55%,transparent)}
.bl-tier .bl-btn{margin-top:auto; width:100%}
.bl-tier-note{font-size:12.5px; color:var(--bl-muted); text-align:center; margin:-4px 0 0}

/* ---- history ---- */
.bl-table{width:100%; border-collapse:collapse; font-size:14px}
.bl-table th{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bl-muted); text-align:left; padding:0 10px 10px; border-bottom:1px solid var(--bl-line)}
.bl-table td{padding:13px 10px; border-bottom:1px solid var(--bl-line); color:var(--bl-body); vertical-align:middle}
.bl-table tr:last-child td{border-bottom:0}
.bl-table td.num{font-family:var(--bl-mono); font-size:13px; color:var(--bl-text)}
.bl-table td.amt{font-weight:700; color:var(--bl-text); font-variant-numeric:tabular-nums; text-align:right}
.bl-table th.amt{text-align:right}
.bl-table td.lnk{text-align:right; white-space:nowrap}
.bl-table tr{animation:blIn .45s var(--bl-ease) both}
.bl-lk{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:650; color:var(--bl-accent); text-decoration:none; padding:6px 8px; border-radius:8px}
.bl-lk:hover{background:var(--bl-accent-soft)}
.bl-lk i{font-size:15px}
.bl-st{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px}
.bl-st.paid{color:var(--bl-green); background:var(--bl-green-soft)}
.bl-st.failed{color:var(--bl-red); background:var(--bl-red-soft)}
.bl-st.refunded, .bl-st.part_refunded{color:var(--bl-violet); background:var(--bl-violet-soft)}
.bl-st.open{color:var(--bl-amber); background:var(--bl-amber-soft)}
.bl-st.void{color:var(--bl-muted); background:color-mix(in srgb,var(--bl-text) 5%,transparent)}
.bl-more{display:flex; justify-content:center; margin-top:14px}
.bl-empty{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:26px 12px; color:var(--bl-muted); font-size:14px}
.bl-empty i{font-size:30px; color:var(--bl-accent); opacity:.85}

/* ---- danger zone ---- */
.bl-danger{border-color:var(--bl-red-line); background:linear-gradient(180deg,var(--bl-red-soft),transparent 70%), var(--bl-panel)}
.bl-danger-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.bl-danger-row p{margin:4px 0 0; font-size:13.5px; color:var(--bl-body); max-width:60ch}
.bl-danger h2{color:var(--bl-red)}

/* ---- skeletons ---- */
.bl-sk{position:relative; overflow:hidden; background:color-mix(in srgb,var(--bl-text) 6%,transparent); border-radius:10px}
.bl-sk::after{content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bl-text) 9%,transparent),transparent); animation:blShimmer 1.3s ease-in-out infinite}
@keyframes blShimmer{to{transform:translateX(100%)}}
.bl-sk.card{aspect-ratio:1.586; border-radius:20px; width:100%; max-width:400px}
.bl-sk.l{height:14px} .bl-sk.xl{height:34px; width:55%} .bl-sk.m{width:70%} .bl-sk.s{width:40%}
.bl-skrows{display:grid; gap:12px}

/* ---- cancel flow (overlay) ---- */
.bl-flow{position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center; padding:18px; font-family:var(--bodyf,inherit)}
.bl-flow-back{position:absolute; inset:0; background:rgba(3,8,15,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:blFade .18s ease-out}
[data-mode="light"] .bl-flow-back{background:rgba(13,27,42,.45)}
.bl-flow-box{position:relative; width:min(520px,100%); max-height:calc(100dvh - 36px); overflow:auto; background:var(--bl-panel); color:var(--bl-text);
  border:1px solid var(--bl-line); border-radius:22px; box-shadow:var(--bl-shadow); padding:24px; animation:blPop .22s cubic-bezier(.2,.9,.3,1.2); outline:0}
@keyframes blPop{from{opacity:0; transform:scale(.95)} to{opacity:1; transform:none}}
@keyframes blFade{from{opacity:0} to{opacity:1}}
.bl-flow-x{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:0; background:transparent; color:var(--bl-muted); cursor:pointer; font-size:20px; display:grid; place-items:center}
.bl-flow-x:hover{color:var(--bl-text); background:color-mix(in srgb,var(--bl-text) 7%,transparent)}
.bl-steps{display:flex; gap:6px; margin:6px 46px 18px 0}
.bl-steps span{height:4px; flex:1; border-radius:999px; background:var(--bl-line); transition:background .3s}
.bl-steps span.on{background:var(--bl-red)}
.bl-flow h3{font-family:var(--bl-display); font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0 40px 6px 0; color:var(--bl-text)}
.bl-flow p.lede{font-size:14.5px; line-height:1.55; color:var(--bl-body); margin:0 0 16px}
.bl-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:0; border:0}
.bl-chip-r{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--bl-line);
  background:transparent; color:var(--bl-body); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.bl-chip-r:hover{border-color:var(--bl-muted); color:var(--bl-text)}
.bl-chip-r[aria-checked="true"]{border-color:var(--bl-accent); background:var(--bl-accent-soft); color:var(--bl-text)}
.bl-chip-r i{font-size:16px}
.bl-ta{width:100%; min-height:78px; resize:vertical; font:inherit; font-size:14px; padding:11px 12px; border-radius:12px; border:1.5px solid var(--bl-line);
  background:var(--bl-well); color:var(--bl-text); outline:0}
.bl-ta:focus{border-color:var(--bl-accent)}
.bl-lose{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px}
.bl-lose li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--bl-body); line-height:1.45}
.bl-lose li i{color:var(--bl-red); font-size:17px; margin-top:1px; flex:none}
.bl-keep{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:var(--bl-green-soft); border:1px solid var(--bl-green-line); font-size:13.5px; color:var(--bl-body); margin:0 0 4px}
.bl-keep i{color:var(--bl-green); font-size:18px; flex:none}
.bl-endbox{text-align:center; padding:18px 14px; border-radius:16px; border:1px solid var(--bl-red-line); background:var(--bl-red-soft); margin:0 0 14px}
.bl-endbox small{display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bl-muted)}
.bl-endbox b{display:block; font-family:var(--bl-display); font-size:24px; font-weight:800; color:var(--bl-text); margin-top:4px}
.bl-flow-acts{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:20px}
.bl-done{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:6px 0}
.bl-done .ic{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--bl-amber-soft); color:var(--bl-amber); font-size:28px;
  animation:blPop .4s cubic-bezier(.2,.9,.3,1.3)}
.bl-err{font-size:13.5px; color:var(--bl-red); margin:10px 0 0}

/* ---- responsive ---- */
@media (max-width:900px){
  .bl-hero{grid-template-columns:1fr}
  .bl-cardstage, .bl-sk.card, .bl-ghost{max-width:420px; margin:0 auto}
  .bl-cardwrap{align-items:center}
}
@media (max-width:640px){
  .bl-compare{grid-template-columns:1fr}
  .bl-table thead{display:none}
  .bl-table, .bl-table tbody, .bl-table tr, .bl-table td{display:block; width:100%}
  .bl-table tr{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--bl-line)}
  .bl-table tr:last-child{border-bottom:0}
  .bl-table td{padding:0; border:0}
  .bl-table td.dt{font-weight:650; color:var(--bl-text)}
  .bl-table td.amt{text-align:left}
  .bl-table td.lnk{grid-column:1 / -1; text-align:left; margin-left:-8px}
}
@media (max-width:560px){
  .bl-flow{align-items:flex-end; padding:0}
  .bl-flow-box{width:100%; border-radius:22px 22px 0 0; max-height:92dvh; padding:22px 18px calc(18px + env(safe-area-inset-bottom))}
  .bl-flow-acts .bl-btn{flex:1}
}
@media (max-width:420px){
  .bl-sec{padding:18px 16px}
  .bl-plan{padding:20px 16px}
  .bl-face{padding:18px 18px}
  .bl-acts .bl-btn{flex:1}
  .bl-danger-row .bl-btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .bl-in, .bl-table tr{animation:none; opacity:1; transform:none}
  .bl-vcard, .bl-vcard.tracking{transition:none; transform:none !important}
  .bl-vcard .bl-face.back{transform:none; opacity:0; transition:opacity .2s}
  .bl-vcard.flipped .bl-face.back{opacity:1}
  .bl-vcard.flipped .bl-face.front{opacity:0}
  .bl-face .sheen, .bl-face .glare{display:none}
  .bl-badge.g::before, .bl-sk::after, .bl-flow-box, .bl-flow-back, .bl-done .ic{animation:none}
  .bl-tier:hover, .bl-ghost:hover{transform:none}
}