/* Billing (public/billing-page.js), one calm page (owner 2026-11-12: "very basic … no visual for Free, Pro, Team … something is off").
   Your plan + real usage, three plans each with its own drawn emblem and tint, Compare plans, then card and invoices as rows.
   White 24px cards on the grey canvas, Inter Tight numbers, the current plan's copper edge, no hover lift or pop. Down to 360px. */
.bl4 {
  --bl-panel: var(--panel);
  --bl-free-bg: #f4f2ee; --bl-free-a: #d9d2c7; --bl-free-b: #9b9284; --bl-free-glow: #ffffff; --bl-free-ink: #6f675c;
  --bl-pro-bg: #fdf0e6; --bl-pro-1: #f6d3bb; --bl-pro-1l: #e9b896; --bl-pro-1r: #dea583; --bl-pro-2: #f3b993; --bl-pro-2l: #e39a6c; --bl-pro-2r: #d88a5c; --bl-pro-ink: #c4541f;
  --bl-team-bg: #eef0fc; --bl-team-a: #8e9cf7; --bl-team-b: #5b6cf0; --bl-team-n: #c9cffb; --bl-team-glow: #ffffff; --bl-team-ink: #4f5fe0;
  --bl-copper: #e0682f;
  padding-bottom: 36px;
}
:root[data-theme="dark"] .bl4 {
  --bl-free-bg: #1f1e1c; --bl-free-a: #8f877b; --bl-free-b: #5f584f; --bl-free-glow: #2c2a27; --bl-free-ink: #c9c1b4;
  --bl-pro-bg: #2a1a12; --bl-pro-1: #5a3420; --bl-pro-1l: #4a2a19; --bl-pro-1r: #3f2315; --bl-pro-2: #8a4a2a; --bl-pro-2l: #6f3a20; --bl-pro-2r: #5f311b; --bl-pro-ink: #f3a87f;
  --bl-team-bg: #1b1d33; --bl-team-a: #8e9cf7; --bl-team-b: #5b6cf0; --bl-team-n: #3a4180; --bl-team-glow: #2a2f55; --bl-team-ink: #aab4ff;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl4 {
  --bl-free-bg: #1f1e1c; --bl-free-a: #8f877b; --bl-free-b: #5f584f; --bl-free-glow: #2c2a27; --bl-free-ink: #c9c1b4;
  --bl-pro-bg: #2a1a12; --bl-pro-1: #5a3420; --bl-pro-1l: #4a2a19; --bl-pro-1r: #3f2315; --bl-pro-2: #8a4a2a; --bl-pro-2l: #6f3a20; --bl-pro-2r: #5f311b; --bl-pro-ink: #f3a87f;
  --bl-team-bg: #1b1d33; --bl-team-a: #8e9cf7; --bl-team-b: #5b6cf0; --bl-team-n: #3a4180; --bl-team-glow: #2a2f55; --bl-team-ink: #aab4ff; } }

.bl4 .t-free { --t-bg: var(--bl-free-bg); --t-ink: var(--bl-free-ink); }
.bl4 .t-pro { --t-bg: var(--bl-pro-bg); --t-ink: var(--bl-pro-ink); }
.bl4 .t-team { --t-bg: var(--bl-team-bg); --t-ink: var(--bl-team-ink); }

/* ---- your plan + usage ---- */
.bl4-sum { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 2.4fr); align-items: stretch; margin: 6px 0 16px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-card); }
.bl4-me { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 22px 24px; }
.bl4-badge { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--t-bg); overflow: hidden; }
.bl4-badge svg { flex: none; width: 92px; height: 74px; }
.bl4-me-t { display: flex; flex-direction: column; min-width: 0; }
.bl4-me-t > small { font-size: 12.5px; color: var(--ink-3); }
.bl4-me-t > b { font: 500 26px/1.15 var(--display); letter-spacing: -.03em; margin: 2px 0 8px; }
.bl4-me-m { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl4-me-p { font: 400 14px var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bl4-me-p small { font: 400 12px var(--font); color: var(--ink-3); margin-left: 1px; }

.bl4-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; min-width: 0; border-left: 1px solid var(--line); }
.bl4-use { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; border-left: 1px solid var(--line); }
.bl4-use:first-child { border-left: 0; }
.bl4-use-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.bl4-use-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--raised); color: var(--ink-2); }
.bl4-use-v { margin: 12px 0 10px; font: 500 26px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl4-use-v small { font: 400 13px var(--font); letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }
.bl4-use-s { margin-top: 8px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl4-meter { display: block; height: 6px; }
.bl4-meter i { background: var(--bl-copper); }
.bl4-meter i.full { background: var(--grad); }
.bl4-meter.split { background: color-mix(in srgb, var(--bl-copper) 18%, var(--raised)); }
.bl4-pips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 6px; }
.bl4-pips i { width: 16px; height: 6px; border-radius: 3px; background: var(--bl-team-b); }
.bl4-pips em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 4px; line-height: 6px; }
.bl4-skel { display: inline-block; width: 90px; height: 22px; border-radius: 6px; background: var(--raised); }

.bl4-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--raised); color: var(--ink-2); }
.bl4-tag.test { background: #fbe9dd; color: #9a4a1c; }
.bl4-tag.ok { background: var(--green-soft); color: var(--green-ink); }
:root[data-theme="dark"] .bl4-tag.test { background: rgba(224,104,47,.16); color: #f6a46c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl4-tag.test { background: rgba(224,104,47,.16); color: #f6a46c; } }

/* ---- plans ---- */
.bl4-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.bl4-plan { display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 22px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-card); }
.bl4-plan.on { box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(224,104,47,.6); }
.bl4-art { position: relative; display: grid; place-items: center; height: 128px; border-radius: 16px; background: var(--t-bg); overflow: hidden; }
.bl4-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--t-ink) 16%, transparent) 1px, transparent 1.2px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 100%); opacity: .7; }
.bl4-art svg { position: relative; width: 158px; height: 126px; }
.bl4-plan > :not(.bl4-art) { margin-left: 12px; margin-right: 12px; }
.bl4-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-top: 18px; }
.bl4-ph b { font: 500 19px var(--display); letter-spacing: -.02em; }
.bl4-cur { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 500; background: #fbe7da; color: #c4541f; white-space: nowrap; }
:root[data-theme="dark"] .bl4-cur { background: rgba(224,104,47,.18); color: #f3a87f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl4-cur { background: rgba(224,104,47,.18); color: #f3a87f; } }
.bl4-line { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
.bl4-pp { margin: 18px 0 16px; font: 400 36px/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bl4-pp small { font: 400 13px var(--font); letter-spacing: 0; color: var(--ink-3); margin-left: 3px; }
.bl4-plan .btn { width: auto; justify-content: center; }
.bl4-plan ul { list-style: none; margin-top: 20px; margin-bottom: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; font-size: 13.5px; color: var(--ink-2); }
.bl4-plan li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bl4-fi { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--t-bg); color: var(--t-ink); }

/* ---- compare ---- */
.bl4-cmp { margin-bottom: 14px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-card); }
.bl4-cmp > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; list-style: none; cursor: pointer; font: 500 15px var(--display); border-radius: var(--r-card); }
.bl4-cmp > summary::-webkit-details-marker { display: none; }
.bl4-cmp > summary svg { color: var(--ink-3); transition: transform .2s var(--ease); }
.bl4-cmp[open] > summary svg { transform: rotate(180deg); }
.bl4-tw { padding: 0 12px 14px; overflow-x: auto; }
.bl4-cmp table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bl4-cmp th, .bl4-cmp td { padding: 11px 12px; text-align: center; border-top: 1px solid var(--line); font-weight: 400; }
.bl4-cmp thead th { border-top: 0; padding-top: 4px; font: 500 13.5px var(--display); color: var(--ink); white-space: nowrap; }
.bl4-cmp tbody th { text-align: left; color: var(--ink-2); }
.bl4-cmp td { width: 18%; color: var(--ink); font-variant-numeric: tabular-nums; }
.bl4-cmp td.on, .bl4-cmp thead th.on { background: color-mix(in srgb, var(--bl-copper) 4%, transparent); }
.bl4-cmp thead th.on { border-radius: 12px 12px 0 0; }
.bl4-cmp tr.bl4-pr td.on { border-radius: 0 0 12px 12px; }
.bl4-cmp tr.bl4-pr td small { font-size: 11.5px; color: var(--ink-3); margin-left: 1px; }
.bl4-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--t-ink); }
.bl4-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--bl-copper) 12%, transparent); color: var(--bl-copper); }
.bl4-no { color: var(--ink-3); opacity: .6; }
.bl4 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- payment method + invoices ---- */
.bl4-rows { border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-card); padding: 4px 24px; }
.bl4-row { display: grid; grid-template-columns: 32px 150px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--line); }
.bl4-row:first-child { border-top: 0; }
.bl4-row-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--raised); color: var(--ink-2); }
.bl4-row-l { font: 500 14px var(--display); color: var(--ink); }
.bl4-row-v { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bl4-row-v > span { display: flex; flex-direction: column; min-width: 0; }
.bl4-row-v b { font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.bl4-row-v b.soft { font-weight: 400; color: var(--ink-3); }
.bl4-row-v small { font-size: 12px; color: var(--ink-3); }
.bl4-row-a { display: flex; gap: 8px; justify-content: flex-end; }
.bl4-brand { display: grid; place-items: center; height: 30px; min-width: 46px; padding: 0 8px; border-radius: 8px; background: var(--ink); color: var(--panel); font-size: 11.5px; font-weight: 600; }
.bl4-row.has-inv { align-items: start; }
.bl4-row.has-inv .bl4-row-l { line-height: 32px; }
.bl4-inv { grid-column: 3 / -1; display: grid; font-size: 13px; }
.bl4-inv-r { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.bl4-inv-r:first-child { border-top: 0; }
.bl4-inv-d { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bl4-inv-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl4-inv-r b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- smaller screens ---- */
@media (max-width: 1180px) { .bl4-sum { grid-template-columns: minmax(0, 1fr); } .bl4-uses { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 960px) { .bl4-plans { grid-template-columns: minmax(0, 1fr); } .bl4-art { height: 112px; } }
@media (max-width: 640px) {
  .bl4-me { padding: 18px; gap: 14px; } .bl4-badge { width: 60px; height: 60px; border-radius: 17px; } .bl4-badge svg { width: 78px; height: 62px; }
  .bl4-uses { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .bl4-use { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h v" "m m" "s s"; align-items: center; column-gap: 12px; padding: 12px 18px 13px; border-left: 0; border-top: 1px solid var(--line); }
  .bl4-use:first-child { border-top: 0; }
  .bl4-use-h { grid-area: h; } .bl4-use-v { grid-area: v; margin: 0; font-size: 19px; } .bl4-use > .bl4-meter, .bl4-use > .bl4-pips { grid-area: m; margin-top: 9px; } .bl4-use-s { grid-area: s; margin-top: 6px; }
  .bl4-art { height: 100px; } .bl4-art svg { width: 120px; height: 96px; } .bl4-ph { margin-top: 14px; } .bl4-pp { margin: 14px 0 14px; } .bl4-plan ul { margin-top: 16px; padding-top: 14px; gap: 9px; }
  .bl4-plan { padding: 8px 8px 18px; } .bl4-plan > :not(.bl4-art) { margin-left: 10px; margin-right: 10px; }
  .bl4-pp { font-size: 32px; }
  .bl4-cmp > summary { padding: 16px 18px; } .bl4-tw { padding: 0 6px 10px; }
  .bl4-cmp th, .bl4-cmp td { padding: 10px 6px; font-size: 12.5px; } .bl4-cmp td { width: 20%; } .bl4-cmp tr.bl4-pr td small { display: block; }
  .bl4-rows { padding: 2px 18px; }
  .bl4-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "i l a" "i v a"; row-gap: 2px; }
  .bl4-row-ic { grid-area: i; align-self: start; } .bl4-row-l { grid-area: l; font: 400 12.5px var(--font); color: var(--ink-3); } .bl4-row-v { grid-area: v; } .bl4-row-a { grid-area: a; flex-direction: column; }
  .bl4-row.has-inv { grid-template-areas: "i l" "n n"; grid-template-columns: 32px minmax(0, 1fr); }
  .bl4-row.has-inv .bl4-inv { grid-area: n; grid-column: 1 / -1; }
  .bl4-inv-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w a" "d s"; gap: 2px 12px; }
  .bl4-inv-w { grid-area: w; } .bl4-inv-r > b { grid-area: a; justify-self: end; } .bl4-inv-d { grid-area: d; font-size: 12px; } .bl4-inv-r > .bl4-tag { grid-area: s; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .bl4-cmp > summary svg { transition: none; } }

/* Your plan summary, richer (owner 2026-11-12: "make this much better"): the plan side carries its plan's colour, each usage tile
   is a small card with a coloured icon, a large figure and a thick soft meter */
.bl4-sum { overflow: hidden; }
.bl4-me { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--pl, #a8a29e) 16%, var(--panel)) 0%, var(--panel) 85%); }
.bl4-me::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pl, #a8a29e) 22%, transparent), transparent); pointer-events: none; }
.bl4-sum:has(.bl4-badge.t-free) { --pl: #a8a29e; } .bl4-sum:has(.bl4-badge.t-pro) { --pl: #e0682f; } .bl4-sum:has(.bl4-badge.t-team) { --pl: #6366f1; }
.bl4-me-t b { font-size: 30px; letter-spacing: -.03em; }
.bl4-uses { gap: 0; }
.bl4-use { gap: 2px; }
.bl4-use-h { font-size: 13px; color: var(--ink-2); }
.bl4-use-ic { background: color-mix(in srgb, var(--pl, #e0682f) 12%, var(--panel)); color: color-mix(in srgb, var(--pl, #e0682f) 80%, #000); border-radius: 10px; }
.bl4-use-v { font-size: 30px; letter-spacing: -.03em; margin-top: 6px; }
.bl4-meter, .bl4-use .meter { height: 8px !important; border-radius: 99px; background: var(--raised, #f1efec); overflow: hidden; margin-top: 10px; }
.bl4-meter i, .bl4-use .meter i { border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--pl, #e0682f) 55%, #fff), var(--pl, #e0682f)) !important; }
.bl4-use-s { margin-top: 8px; font-size: 12.5px; }

/* Billing, compact (owner 2026-11-12) -------------------------------------------------------------------------------------- */
/* Your plan: one slim row */
.bl5-page .bl4-sum { grid-template-columns: minmax(200px, .8fr) minmax(0, 3fr); margin: 4px 0 12px; }
.bl5-page .bl4-me { gap: 12px; padding: 12px 16px; }
.bl5-page .bl4-me::after { display: none; }
.bl5-page .bl4-badge { width: 40px; height: 40px; border-radius: 12px; }
.bl5-page .bl4-badge svg { width: 30px; height: 30px; }
.bl5-page .bl4-me-t small { font-size: 11px; }
.bl5-page .bl4-me-t b { font-size: 18px; letter-spacing: -.02em; }
.bl5-page .bl4-me-m { margin-top: 2px; }
.bl5-page .bl4-tag { padding: 1px 8px; font-size: 11.5px; }
.bl5-page .bl4-use { padding: 12px 16px; }
.bl5-page .bl4-use-h { font-size: 12px; }
.bl5-page .bl4-use-ic { width: 22px; height: 22px; }
.bl5-page .bl4-use-ic .ic { width: 13px; height: 13px; }
.bl5-page .bl4-use-v { font-size: 20px; margin-top: 2px; }
.bl5-page .bl4-meter, .bl5-page .bl4-use .meter { height: 5px !important; margin-top: 6px; }
.bl5-page .bl4-use-s { margin-top: 4px; font-size: 11.5px; }
/* Plans: one comparison table */
.bl5 { margin: 0 0 12px; border-radius: var(--r-card, 20px); background: var(--panel); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); overflow: hidden; }
.bl5-tw { overflow-x: auto; }
.bl5-t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 560px; }
.bl5-t th, .bl5-t td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: center; font-size: 13px; }
.bl5-t tbody tr:last-child th, .bl5-t tbody tr:last-child td { border-bottom: 0; }
.bl5-t tbody th { text-align: left; font-weight: 400; color: var(--ink-2); }
.bl5-lh { width: 34%; }
.bl5-ph { vertical-align: top; padding: 14px 14px 12px !important; font-weight: 400; }
.bl5-ph-in { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bl5-em { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pl) 12%, var(--panel)); }
.bl5-em svg { width: 30px; height: 30px; }
.bl5-ph.t-free { --pl: #a8a29e; } .bl5-ph.t-pro { --pl: #e0682f; } .bl5-ph.t-team { --pl: #6366f1; }
.bl5-nm { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; } .bl5-nm b { font-size: 15px; font-weight: 500; }
.bl5-cur { padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--pl) 14%, var(--panel)); color: color-mix(in srgb, var(--pl) 80%, #000); font-size: 10.5px; font-weight: 500; }
.bl5-pr { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .bl5-pr small { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0; }
.bl5-ln { font-size: 11.5px; color: var(--ink-3); min-height: 15px; }
.bl5-ph .btn { margin-top: 6px; min-width: 104px; }
.bl5-t th.on, .bl5-t td.on { background: color-mix(in srgb, var(--pl, #e0682f) 5%, var(--panel)); }
.bl5-t thead th.on { box-shadow: inset 0 3px 0 var(--pl); }
.bl5-t td .bl4-yes { color: #30a46c; }
@media (max-width: 640px) { .bl5-page .bl4-sum { grid-template-columns: minmax(0, 1fr); } .bl5-t th, .bl5-t td { padding: 8px 10px; } }
/* emblems at 40px keep the same crop as the 72px badge */
.bl5-page .bl4-badge svg, .bl5-em svg { width: 51px !important; height: 41px !important; }
.bl5-em { overflow: hidden; }
.bl5-t tbody td.on { background: var(--sel, #f6f4f1); }
.bl5-lh { vertical-align: bottom; text-align: left !important; padding-bottom: 14px !important; }
.bl5-lh b { font-size: 15px; font-weight: 500; } .bl5-lh small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); font-weight: 400; }
/* "Current" sits in the column's top corner, so every plan name stays centred under its emblem */
.bl5-ph { position: relative; }
.bl5-nm { justify-content: center; }
.bl5-cur { position: absolute; top: 10px; right: 10px; }
/* Current plan without a coloured column (owner 2026-11-12: "the colouring doesn't blend"): the column stays white like the
   others, with fine side lines framing it, and the Current badge and "Your plan" button say which one it is */
.bl5-t th.on, .bl5-t td.on, .bl5-t tbody td.on { background: transparent !important; }
.bl5-t thead th.on { box-shadow: inset 1px 0 0 var(--line-2), inset -1px 0 0 var(--line-2) !important; }
.bl5-t tbody td.on { box-shadow: inset 1px 0 0 var(--line-2), inset -1px 0 0 var(--line-2); }
.bl5-cur { background: var(--ink) !important; color: var(--panel) !important; }
/* Emblems sit exactly in the middle of their tiles: the art is centred on (60,48) of 120×96, so the svg is centred absolutely */
.bl5-em, .bl5-page .bl4-badge { position: relative; width: 44px !important; height: 44px !important; border-radius: 13px; overflow: hidden; display: block; }
.bl5-em svg, .bl5-page .bl4-badge svg { position: absolute; left: 50%; top: 50%; width: 55px !important; height: 44px !important; transform: translate(-50%, -50%); }
/* Pro's stack is drawn 4.5 units below the frame's middle: lift it so it sits exactly centred too */
.bl5-ph.t-pro .bl5-em svg, .bl5-page .bl4-badge.t-pro svg { transform: translate(-50%, calc(-50% - 2px)); }