/* =========================================================
 BILLING PAGE — Subscription & Billing self-service UI
 Append to assets/style.css
 ========================================================= */

/* BUG FIX (data audit, round 34) — light/dark theme mismatch.
   The billing page is an intentionally light-card design (white cards,
   dark text) and stays that way in both app themes. But the page never
   set its own base text colour, so any element without an explicit
   colour inherited the app body colour — which is near-white in dark
   mode — and turned invisible on the white cards. Anchoring the base
   colour on the billing root keeps every inherited bit of text dark
   regardless of the app theme. (Inputs and a couple of var(--text-*)
   usages are fixed individually below for the same reason.) */
#billingContent { color: #374151; color-scheme: light; }

.bil-banner {
 padding: 14px 18px;
 border-radius: 10px;
 margin-bottom: 20px;
 font-size: 14px;
 line-height: 1.5;
}
.bil-banner-blue { background: #dbeafe; color: #1e40af; border-left: 4px solid #1e40af; }
.bil-banner-green { background: #d1fae5; color: #047857; border-left: 4px solid #059669; }
.bil-banner-amber { background: #fef3c7; color: #92400e; border-left: 4px solid #d97706; }
.bil-banner-red { background: #fee2e2; color: #991b1b; border-left: 4px solid #dc2626; }

.bil-grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
 gap: 16px;
 margin-bottom: 28px;
}
@media (max-width: 900px) { .bil-grid { grid-template-columns: 1fr; } }

.bil-card {
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 padding: 20px 22px;
}
.bil-card-wide { /* the "Current plan" card spans wider */ }

.bil-card-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 12px;
}
.bil-card-label {
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: .04em;
 color: #6b7280;
}

.bil-plan-name {
 font-size: 24px;
 font-weight: 700;
 color: #1e40af;
 margin-bottom: 4px;
}
.bil-plan-price {
 font-size: 14px;
 color: #6b7280;
 margin-bottom: 8px;
}
.bil-plan-meta {
 font-size: 13px;
 color: #6b7280;
 margin-bottom: 14px;
}
.bil-card-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 12px;
}

.bil-usage-num {
 display: flex;
 align-items: baseline;
 gap: 8px;
 margin-bottom: 12px;
}
.bil-usage-big { font-size: 36px; font-weight: 700; color: #1e40af; line-height: 1; }
.bil-usage-cap { font-size: 14px; color: #6b7280; }
.bil-usage-bar {
 height: 8px;
 background: #f3f4f6;
 border-radius: 999px;
 overflow: hidden;
 margin-bottom: 6px;
}
.bil-usage-fill {
 height: 100%;
 border-radius: 999px;
 transition: width .3s;
}
.bil-pct-green { background: #059669; }
.bil-pct-amber { background: #d97706; }
.bil-pct-red { background: var(--red); }
.bil-usage-pct {
 font-size: 12px;
 color: #6b7280;
}
.bil-usage-warn {
 margin-top: 10px;
 padding: 8px 10px;
 background: #fef3c7;
 color: #92400e;
 border-radius: 6px;
 font-size: 12px;
}

.bil-empty {
 color: #6b7280;   /* round 34 — was var(--text-2); flipped light on white cards in dark mode */
 font-size: 14px;
 padding: 14px 0;
 font-style: italic;
}
.bil-helper-text {
 font-size: 12px;
 color: #6b7280;
 margin-top: 12px;
 line-height: 1.5;
}

/* Section headers */
.bil-section {
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 padding: 24px 28px;
}
.bil-section-head { margin-bottom: 18px; }
.bil-section-head h3 {
 margin: 0 0 4px 0;
 font-size: 18px;
 color: #111827;
}
.bil-section-head p {
 margin: 0;
 font-size: 13px;
 color: #6b7280;
 line-height: 1.5;
}

/* Forms */
.bil-form { }
.bil-form-row {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap: 14px;
 margin-bottom: 14px;
}
@media (max-width: 700px) { .bil-form-row { grid-template-columns: 1fr; } }

.bil-form-group label {
 display: block;
 font-size: 12px;
 font-weight: 600;
 color: #374151;
 margin-bottom: 5px;
}
.bil-form-group-wide { grid-column: 1 / -1; }

.bil-form-group input {
 width: 100%;
 padding: 10px 12px;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 font-size: 14px;
 font-family: inherit;
 transition: border-color .15s;
 /* BUG FIX (round 34) — the billing inputs set no background/colour, so
    in dark mode they inherited the app's dark input styling and rendered
    as charcoal boxes inside the white billing cards. Pinned to the
    light-card palette to match the rest of the page. */
 background: #fff;
 color: #111827;
}
.bil-form-group input::placeholder { color: #9ca3af; }
.bil-form-group input:focus {
 outline: none;
 border-color: #1e40af;
 box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.bil-form-group input:invalid:not(:placeholder-shown) {
 border-color: var(--red);
}

.bil-req { color: var(--red); font-weight: 700; }
.bil-opt { color: #6b7280; font-weight: 400; font-style: italic; }   /* round 34 — was var(--text-2) */

.bil-form-actions {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-top: 20px;
}
.bil-form-msg {
 font-size: 13px;
 font-weight: 500;
}
.bil-msg-ok { color: #059669; }
.bil-msg-err { color: var(--red); }

.bil-error-state {
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 padding: 48px 28px;
 text-align: center;
}
.bil-error-state h3 {
 margin: 0 0 8px 0;
 color: var(--red);
 font-size: 18px;
}
.bil-error-state p {
 color: #6b7280;
 font-size: 14px;
 line-height: 1.5;
 margin: 0 0 18px 0;
}

/* ================================================================
 Razorpay Tier 2 additions — modals, plan picker, invoice table,
 payment method display
 ================================================================ */

/* Payment method display */
.bil-method {
 padding: 12px 0;
 border-bottom: 1px solid #f3f4f6;
}
.bil-method:last-child { border-bottom: 0; }
.bil-method-line { font-size: 14px; color: #111827; }
.bil-method-default {
 display: inline-block;
 font-size: 11px;
 background: #d1fae5;
 color: #065f46;
 padding: 2px 8px;
 border-radius: 999px;
 margin-left: 8px;
 font-weight: 600;
}
.bil-method-exp {
 font-size: 12px;
 color: #6b7280;
 margin-top: 2px;
}

/* Modal overlay */
.bil-modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 z-index: 9999;
 animation: bil-fade-in 0.15s;
}
@keyframes bil-fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}
.bil-modal-content {
 background: #fff;
 color: #374151;   /* round 34 — base colour; modal may mount on <body>, outside #billingContent */
 color-scheme: light;   /* round 36 — see note below */
 border-radius: 14px;
 max-width: 720px;
 width: 100%;
 max-height: 90vh;
 overflow-y: auto;
 padding: 28px 32px;
 box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}
.bil-modal-content h2 {
 margin: 0 0 12px 0;
 font-size: 22px;
 color: #111827;
}
.bil-modal-content p {
 margin: 0 0 14px 0;
 font-size: 14px;
 line-height: 1.6;
 color: #374151;
}
.bil-modal-actions {
 margin-top: 22px;
 display: flex;
 justify-content: flex-end;
 gap: 10px;
}
.bil-modal-status {
 text-align: center;
 padding: 24px 0;
}
.bil-spinner {
 width: 40px;
 height: 40px;
 border: 3px solid #e5e7eb;
 border-top-color: #1e40af;
 border-radius: 50%;
 animation: bil-spin 0.8s linear infinite;
 margin: 0 auto 16px;
}
@keyframes bil-spin { to { transform: rotate(360deg); } }

/* Plan picker — monthly/annual toggle + plan cards */
.bil-cycle-toggle {
 display: inline-flex;
 background: #f3f4f6;
 border-radius: 999px;
 padding: 4px;
 margin: 8px 0 22px;
}
.bil-cycle-btn {
 padding: 8px 20px;
 border: 0;
 background: transparent;
 border-radius: 999px;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 color: #6b7280;
 transition: all 0.15s;
}
.bil-cycle-btn.active {
 background: #fff;
 color: #1e40af;
 font-weight: 600;
 box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.bil-cycle-save {
 font-size: 11px;
 color: #059669;
 font-weight: 700;
}

.bil-plans {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
 margin-bottom: 16px;
}
@media (max-width: 720px) { .bil-plans { grid-template-columns: 1fr; } }
.bil-plan-card {
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 padding: 22px 20px;
 background: #fff;
 display: flex;
 flex-direction: column;
}
.bil-plan-card.is-current {
 border-color: #1e40af;
 background: #eff6ff;
}
.bil-plan-card-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 12px;
}
.bil-plan-card-head h3 {
 margin: 0;
 font-size: 18px;
 color: #1e40af;
}
.bil-plan-current {
 font-size: 11px;
 background: #1e40af;
 color: #fff;
 padding: 3px 9px;
 border-radius: 999px;
 font-weight: 700;
}
.bil-plan-card-price {
 font-size: 26px;
 font-weight: 700;
 color: #111827;
 margin-bottom: 14px;
 line-height: 1.1;
}
.bil-plan-card-price small {
 font-size: 13px;
 font-weight: 400;
 color: #6b7280;
}
.bil-price-monthly-eq {
 font-size: 11px;
 color: #6b7280;
 font-weight: 400;
 margin-top: 4px;
}
.bil-plan-card-features {
 list-style: none;
 padding: 0;
 margin: 0 0 18px 0;
 flex-grow: 1;
}
.bil-plan-card-features li {
 font-size: 13px;
 color: #374151;
 padding: 5px 0;
 padding-left: 22px;
 position: relative;
}
.bil-plan-card-features li:before {
 content: "";
 position: absolute;
 left: 0;
 color: #059669;
 font-weight: 700;
}
.bil-pick {
 width: 100%;
}
.bil-pick:disabled {
 background: #d1d5db;
 cursor: not-allowed;
}

/* Invoice table */
.bil-invoices {
 width: 100%;
 border-collapse: collapse;
 font-size: 13px;
}
.bil-invoices thead th {
 text-align: left;
 padding: 10px 12px;
 font-weight: 600;
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: #6b7280;
 border-bottom: 1px solid #e5e7eb;
}
.bil-invoices tbody td {
 padding: 12px;
 border-bottom: 1px solid #f3f4f6;
 color: #374151;
}
.bil-invoices a {
 color: #1e40af;
 text-decoration: none;
}
.bil-invoices a:hover { text-decoration: underline; }

.bil-status {
 display: inline-block;
 font-size: 11px;
 padding: 2px 8px;
 border-radius: 999px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.03em;
}
.bil-status-paid { background: #d1fae5; color: #065f46; }
.bil-status-issued { background: #dbeafe; color: #1e40af; }
.bil-status-failed { background: #fee2e2; color: #991b1b; }
.bil-status-cancelled { background: #f3f4f6; color: #6b7280; }
.bil-status-expired { background: #f3f4f6; color: #6b7280; }
.bil-status-partially_paid { background: #fef3c7; color: #92400e; }
.bil-status-draft { background: #f3f4f6; color: #6b7280; }

/* Danger button (cancel) */
.btn-danger {
 background: var(--red);
 color: #fff;
 border: 0;
 padding: 9px 18px;
 border-radius: 8px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}
.btn-danger:hover { background: #b91c1c; }

/* BUG FIX (data audit, round 35) — cancel-modal radio cards & button.
   The .radio-card component (in style.css) is theme-aware — it resolves
   var(--surface) / var(--text) / var(--text-2). But it lives inside the
   cancellation modal, which is a fixed white card (.bil-modal-content)
   in both app themes. In dark mode that left the SELECTED card with a
   near-white tint background AND near-white text — invisible — while
   the unselected card was a dark box sitting on the white modal. The
   "Keep subscription" .btn-outline was washed out the same way. These
   overrides pin both to the billing light palette already used on this
   page; scoped to .bil-modal-content so .radio-card / .btn-outline on
   the theme-aware pages elsewhere are untouched. */
.bil-modal-content .radio-card {
 background: #fff;
 border-color: #d1d5db;
}
.bil-modal-content .radio-card:hover {
 background: #f9fafb;
 border-color: #9ca3af;
}
.bil-modal-content .radio-card:has(input[type="radio"]:checked) {
 border-color: #1e40af;
 background: #eff6ff;
}
.bil-modal-content .radio-card .radio-card-title { color: #111827; }
.bil-modal-content .radio-card .radio-card-desc  { color: #6b7280; }

/* BUG FIX (data audit, round 40) — extend the .btn-outline override to
   the whole billing page. Round 35 fixed .btn-outline only inside the
   cancel modal. But the three action buttons on the white CURRENT PLAN
   card — Change plan / Cancel subscription / View invoices — are also
   plain .btn-outline, and they sit on a white card outside the modal,
   so in dark mode they still inherited the app's theme-aware
   .btn-outline (color: var(--text-2), a light grey) and were washed out
   to near-invisible. #billingContent covers the card buttons;
   .bil-modal-content still covers the modal (it can mount on <body>). */
#billingContent .btn-outline,
.bil-modal-content .btn-outline {
 background: #fff;
 border-color: #d1d5db;
 color: #374151;
}
#billingContent .btn-outline:not(:disabled):hover,
.bil-modal-content .btn-outline:not(:disabled):hover {
 background: #f9fafb;
 border-color: #9ca3af;
 color: #111827;
}

/* BUG FIX (data audit, round 36) — native radios rendered dark on the
   white billing cards. style.css sets `color-scheme: dark` on :root for
   the dark theme, so the browser drew the native radios — and the
   modal's scrollbar, focus rings, autofill — in dark-scheme. The
   `color-scheme: light` on #billingContent and .bil-modal-content (set
   above) fixes the scrollbar / focus rings / autofill. The radios
   themselves are handled by the custom control below. */

/* Checkboxes (none in billing today, but keep the accent for any added
   later) — accent-color is reliable for checkboxes. */
#billingContent input[type="checkbox"],
.bil-modal-content input[type="checkbox"] {
 accent-color: #1e40af;
}

/* BUG FIX (data audit, round 38) — fully custom radio control.
   Round 36 set color-scheme:light + accent-color on the native radios,
   but the embedded WebView still drew the UNSELECTED radio as a solid
   dark circle: native radio rendering is unreliable there, and
   accent-color only reliably colours the *checked* state. Replacing the
   native control with an appearance:none custom radio makes both states
   explicit and identical everywhere — white circle + grey ring when
   unselected, blue ring + blue dot when selected — with no dependence
   on the UA's native radio rendering. */
#billingContent input[type="radio"],
.bil-modal-content input[type="radio"] {
 appearance: none;
 -webkit-appearance: none;
 width: 16px;
 height: 16px;
 border: 2px solid #9ca3af;
 border-radius: 50%;
 background: #fff;
 flex-shrink: 0;
 cursor: pointer;
 position: relative;
 transition: border-color .15s;
}
#billingContent input[type="radio"]:checked,
.bil-modal-content input[type="radio"]:checked {
 border-color: #1e40af;
}
#billingContent input[type="radio"]:checked::after,
.bil-modal-content input[type="radio"]:checked::after {
 content: "";
 position: absolute;
 inset: 2px;
 border-radius: 50%;
 background: #1e40af;
}
#billingContent input[type="radio"]:focus-visible,
.bil-modal-content input[type="radio"]:focus-visible {
 outline: 2px solid rgba(30, 64, 175, .4);
 outline-offset: 1px;
}
#billingContent input[type="radio"]:disabled,
.bil-modal-content input[type="radio"]:disabled {
 opacity: .5;
 cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────
   REFERRAL WIDGET (Phase 4 + 4.5)
   Customer-facing referral card on the billing page. Self-contained
   styles prefixed `bil-ref-` so we don't collide with the rest of
   billing.css. Mirrors the visual language of bil-section / bil-card.
   ───────────────────────────────────────────────────────────────── */

.bil-ref-loading {
  padding: 16px 18px;
  color: #6b7280;
  font-size: 13px;
}

.bil-ref-section {
  /* The section reuses bil-section's padding/border — overrides here
     only add what's specific to the referral content. */
}

.bil-ref-inbound {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #3730a3;
}

/* ── Code + share-link row ───────────────────────────────────── */
.bil-ref-share {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.bil-ref-codebox {
  background: #f4f1ea;
  border: 1px solid #e5e2d6;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}
.bil-ref-codelbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.bil-ref-codeval {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.bil-ref-urlbox {
  display: flex;
  flex-direction: column;
}
.bil-ref-urllbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 4px;
}
.bil-ref-urlrow {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.bil-ref-urlrow input {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #374151;
  min-width: 0;     /* let flex shrink below input's default min-width */
}
.bil-ref-urlrow .bil-ref-btn {
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
}
.bil-ref-helper {
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}

/* ── Stats grid ──────────────────────────────────────────────── */
.bil-ref-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.bil-ref-stat {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
}
.bil-ref-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.1;
}
.bil-ref-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-top: 2px;
}
.bil-ref-stat-money .bil-ref-stat-num {
  color: #15803d;
}

/* ── Explainer paragraph (shown when no activity yet) ──────── */
.bil-ref-explainer {
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
  margin: 0 0 14px;
}

/* ── Recent referral list ────────────────────────────────────── */
.bil-ref-recent {
  border-top: 1px solid #f3f4f6;
  padding-top: 14px;
}
.bil-ref-recent h4 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.bil-ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bil-ref-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #f3f4f6;
  font-size: 13px;
}
.bil-ref-list li:last-child { border-bottom: 0; }
.bil-ref-rowname {
  color: #1a1a2e;
  font-weight: 600;
}
.bil-ref-rowdate {
  color: #9ca3af;
  font-size: 12px;
  white-space: nowrap;
}
.bil-ref-rowstate {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #6b7280;
  white-space: nowrap;
}
.bil-ref-state-pending   { background: #fef3c7; color: #92400e; }
.bil-ref-state-qualified { background: #dcfce7; color: #166534; }
.bil-ref-state-expired   { background: #f3f4f6; color: #6b7280; }

/* ── Mobile reflow ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .bil-ref-share {
    grid-template-columns: 1fr;
  }
  .bil-ref-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .bil-ref-list li {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .bil-ref-rowstate {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* ── Reward summary block — "You get X / Your friend gets Y" ───── */
.bil-ref-rewards {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 14px 0 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(79,142,255,.10), rgba(168,85,247,.08));
  border: 1px solid rgba(79,142,255,.18);
  border-radius: 10px;
}
.bil-ref-reward {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bil-ref-reward-side {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.bil-ref-reward-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.bil-ref-reward-arrow {
  align-self: center;
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 18px;
  font-weight: 400;
  padding: 0 4px;
}
@media (max-width: 560px) {
  .bil-ref-rewards { flex-direction: column; gap: 8px; padding: 12px; }
  .bil-ref-reward-arrow { display: none; }
}

/* ── Expandable How it works / Terms ───────────────────────────── */
.bil-ref-terms {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.bil-ref-terms summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-2);
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.bil-ref-terms summary::-webkit-details-marker { display: none; }
.bil-ref-terms summary::before {
  content: '▸';
  display: inline-block;
  color: var(--text-3);
  transition: transform .15s ease;
  font-size: 12px;
}
.bil-ref-terms[open] summary::before { transform: rotate(90deg); }
.bil-ref-terms summary:hover { color: var(--text); }
.bil-ref-terms-body {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.bil-ref-terms-body ol {
  padding-left: 18px;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bil-ref-terms-body li { padding-left: 4px; }
.bil-ref-terms-body strong { color: var(--text); }
.bil-ref-terms-body em { font-style: italic; color: var(--text); }
.bil-ref-terms-fine {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bil-ref-terms-fine li { padding-left: 18px; position: relative; }
.bil-ref-terms-fine li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--text-3);
}
.bil-ref-terms-fine strong { color: var(--text-2); }