/* ==== Subscription (/credits, client section: P7 the prepaid credits, batch 4 R2 the monthly subscription): overview,
   seats, invoices, usage, the prepaid credits' history; also Management > Subscriptions and > Credit requests,
   Administration > Pricing and the reminders of the Client home (cr-) ====
   Same look as the rest of OneStop (app.css: toolbar, subtab, panel, table, admin-state, notice, kpis). Loaded by
   Components\App.razor for every page, after app.css. Pages: TTech.Platform.Client\Apps\Credits (and
   Apps\Management\SubscriptionsAdminPage.razor, SubscriptionInvoiceAdminPage.razor, CreditRequestsPage.razor,
   Apps\Admin\PricingPage.razor, Shared\CreditsBanner.razor). Only the tokens of app.css: the dark theme needs nothing here.
   Checked at 360, 768 and 1280 px, light and dark; the invoice prints on one sheet (@media print below). */
.cr-notice { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.cr-notice .spacer, .cr-banner .spacer { flex: 1; }
.cr-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.cr-low, .cr-overdue { border-left: 4px solid var(--warn); background: var(--warn-soft); }
.cr-paused { border-left: 4px solid var(--bad); background: var(--bad-soft); }
.cr-duesoon { border-left: 4px solid var(--brand-gold); background: var(--gold-soft); }
.cr-good { border-left: 4px solid var(--good); background: var(--good-soft); }
.admin-state.cr-gold { background: var(--gold-soft); color: var(--gold-text); }
.admin-state.cr-neutral { background: var(--chip); color: var(--chip-text); }
.cr-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .cr-table .cr-hide-sm { display: none; } }

/* The overview: the figures of the month */
.cr-hero-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.cr-hero-head h2 { font-size: 1.2rem; font-weight: 900; }
.cr-hero-head .spacer { flex: 1; }
.cr-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0 12px; }
.cr-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.cr-figure-label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.cr-figure-value { font-size: 1.65rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.cr-figure-sub { color: var(--muted); font-size: 0.8rem; }
.cr-figure.cr-lead { border-color: transparent; background: var(--accent-soft); }
.cr-figure.cr-due-figure { border-color: transparent; background: var(--warn-soft); }
.cr-figure.cr-due-figure .cr-figure-value { color: var(--warn); }
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-actions .spacer { flex: 1; }

/* The invoices to pay (overview) */
.cr-due-list { display: flex; flex-direction: column; gap: 10px; }
.cr-due-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 12px 14px;
               border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; }
.cr-due-card.cr-stage-DueSoon { border-left-color: var(--brand-gold); }
.cr-due-card.cr-stage-Overdue { border-left-color: var(--warn); }
.cr-due-card.cr-stage-Paused { border-left-color: var(--bad); }
.cr-due-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 800; }
.cr-due-sub { margin-top: 2px; color: var(--muted); font-size: 0.82rem; }
.cr-due-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cr-due-amount { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-all-paid { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; background: var(--good-soft); color: var(--good-text); font-weight: 700; }

/* Free months, discounts and credits */
.cr-grants { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cr-grant { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.cr-grant-icon { display: inline-flex; grid-row: span 3; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
                 background: var(--gold-soft); color: var(--gold-text); }
.cr-grant-title { font-weight: 800; }
.cr-grant-reason { overflow-wrap: anywhere; font-size: 0.86rem; }
.cr-grant-meta { color: var(--muted); font-size: 0.78rem; }
.cr-grant.cr-done { opacity: 0.7; }
.cr-grant.cr-done .cr-grant-icon { background: var(--chip); color: var(--muted); }

/* Billing settings */
.cr-billing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cr-billing dt { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.cr-billing dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 600; }

/* Tables */
.cr-table .sub { display: block; color: var(--muted); font-size: 0.78rem; }
.cr-table .num { text-align: right; white-space: nowrap; }
.cr-table tr.cr-link { cursor: pointer; }
.cr-table tr.cr-link:hover td { background: var(--head-bg); }
.cr-debit { color: var(--bad); }
.cr-credit { color: var(--good-text); }
.cr-off td { color: var(--muted); }
.cr-note { max-width: 260px; overflow-wrap: anywhere; }
.cr-app-icon { vertical-align: middle; }
.cr-price { max-width: 140px; margin-left: auto; }

/* Forms: a row of fields and a button */
.cr-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.cr-form .mud-input-control { max-width: 260px; }
.cr-form .cr-grow { flex: 1 1 240px; max-width: none; }
.cr-form .cr-narrow { max-width: 140px; }
.cr-ttech { border-style: dashed; }
.cr-ttech h3 { margin: 14px 0 4px; font-size: 0.9rem; }
.cr-month { max-width: 180px; }

/* ---- The seats: people x apps ---- */
.cr-seatbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 10px;
              background: var(--accent-soft); }
.cr-seatbar-total { display: flex; align-items: baseline; gap: 6px; }
.cr-seatbar-total b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; transition: color 0.2s; }
.cr-seatbar-total span { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.cr-seatbar-counts { color: var(--accent-strong); font-size: 0.85rem; font-weight: 700; }
.cr-seatbar .spacer { flex: 1; }
.cr-saving { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8rem; }
.cr-changed b { color: var(--accent-strong); }
.cr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.cr-toolbar .spacer { flex: 1; }
.cr-search { width: 260px; max-width: 100%; }
.cr-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.cr-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.cr-grid th, .cr-grid td { padding: 8px 10px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.cr-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--head-bg); vertical-align: bottom; }
.cr-grid tbody tr:hover td { background: var(--head-bg); }
.cr-grid .cr-person-col { position: sticky; left: 0; z-index: 1; min-width: 200px; max-width: 280px; text-align: left; box-shadow: 1px 0 0 var(--rule); }
.cr-grid thead .cr-person-col { z-index: 3; }
.cr-grid .cr-app-col { min-width: 108px; text-align: center; }
.cr-grid .cr-sum-col { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-grid tfoot td { border-bottom: 0; background: var(--head-bg); font-weight: 800; }
.cr-app-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-app-head .cr-app-name { max-width: 130px; font-weight: 800; line-height: 1.2; white-space: normal; }
.cr-app-head .cr-app-price { color: var(--muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.cr-app-remove { margin-top: 2px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
                 font: inherit; font-size: 0.72rem; }
.cr-app-remove:hover:not(:disabled) { background: var(--chip); color: var(--bad); }
.cr-person { display: flex; flex-direction: column; min-width: 0; }
.cr-person-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; }
.cr-person-mail { overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.cr-person .admin-state { font-size: 0.68rem; }
.cr-person-row { display: flex; align-items: center; gap: 6px; }
.cr-person-row .cr-person { flex: 1; }

/* A seat: a square that is filled when the person holds it (a switch for the keyboard and the screen readers) */
.cr-seat { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1.5px dashed var(--border);
           border-radius: 9px; background: transparent; color: var(--faint); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.cr-seat:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cr-seat:active:not(:disabled) { transform: scale(0.94); }
.cr-seat:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.cr-seat.on { border: 1.5px solid var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.cr-seat.on:hover:not(:disabled) { border-color: var(--os-accent-fill-hover); background: var(--os-accent-fill-hover); color: var(--os-on-accent-fill); }
.cr-seat.busy { opacity: 0.6; }
.cr-seat:disabled { cursor: not-allowed; opacity: 0.45; }
.cr-seat .mud-icon-root { font-size: 1.15rem; }

.cr-addapps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.cr-addapp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px dashed var(--border); border-radius: 999px;
             background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700; }
.cr-addapp:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.cr-addapp small { color: var(--muted); font-weight: 600; }
.cr-addperson { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto auto; align-items: center; gap: 10px; margin: 0 0 12px;
                padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--head-bg); }

/* ---- An invoice ---- */
.cr-invoice { width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 32px; }
.cr-inv-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px;
               border-bottom: 3px solid var(--brand-gold); }
.cr-inv-brand { display: flex; align-items: center; gap: 12px; }
.cr-inv-logo { width: 46px; height: 46px; flex: none; }
.cr-inv-from { line-height: 1.35; }
.cr-inv-from b { display: block; font-size: 1.05rem; font-weight: 900; }
.cr-inv-from span { color: var(--muted); font-size: 0.82rem; }
.cr-inv-title { text-align: right; }
.cr-inv-title h2 { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; }
.cr-inv-number { margin-top: 2px; font-family: ui-monospace, Consolas, monospace; font-size: 0.95rem; font-weight: 700; }
.cr-inv-title .admin-state { margin-top: 6px; }
.cr-inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin: 18px 0 20px; }
.cr-inv-meta dt { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.cr-inv-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.cr-inv-meta dd span { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.cr-inv-meta .cr-billto { grid-column: span 2; }
.cr-inv-lines { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cr-inv-lines th { padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 0.72rem; font-weight: 800;
                   letter-spacing: 0.3px; text-align: left; text-transform: uppercase; }
.cr-inv-lines td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cr-inv-lines .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cr-inv-group td { padding-top: 14px; border-bottom: 1px solid var(--border); background: transparent; font-weight: 800; }
.cr-inv-group .cr-group-name { display: flex; align-items: center; gap: 8px; }
.cr-inv-group .cr-group-count { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.cr-inv-person td:first-child { padding-left: 34px; }
.cr-inv-person .sub, .cr-inv-lines .sub { display: block; color: var(--muted); font-size: 0.76rem; }
.cr-inv-lines .sub.cr-show-sm { display: none; }
.cr-inv-reduction td { color: var(--good-text); }
.cr-inv-reduction .cr-reason { color: var(--muted); font-size: 0.8rem; }
.cr-inv-owed td { color: var(--warn); }
.cr-inv-notcounted td { color: var(--muted); }
.cr-inv-bottom { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 18px; }
.cr-inv-pay { flex: 1 1 280px; max-width: 460px; color: var(--muted); font-size: 0.84rem; }
.cr-inv-pay b { color: var(--text); }
.cr-inv-totals { flex: 0 1 360px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; margin: 0; }
.cr-inv-totals dt { color: var(--muted); }
.cr-inv-totals dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cr-inv-totals .cr-total { padding-top: 8px; border-top: 2px solid var(--text); color: var(--text); font-size: 1.15rem; font-weight: 900; }
.cr-inv-totals .cr-amount-due { padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; }
.cr-inv-totals .cr-amount-due.cr-zero { background: var(--good-soft); color: var(--good-text); }
.cr-inv-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.78rem; text-align: center; }
.cr-draft-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px dashed var(--accent); border-radius: 999px;
                  color: var(--accent-strong); font-size: 0.78rem; font-weight: 800; }

/* Management > Subscriptions */
.cr-kpis .kpi .value { font-variant-numeric: tabular-nums; }
.cr-mails td { max-width: 320px; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .cr-form .mud-input-control { max-width: none; width: 100%; }
  .cr-month { max-width: none; width: 100%; }
  .cr-search { width: 100%; }
  .cr-addperson { grid-template-columns: 1fr; }
  .cr-due-card { grid-template-columns: 1fr; }
  .cr-due-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .cr-invoice { padding: 16px 14px; }
  .cr-inv-title { text-align: left; }
  .cr-inv-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cr-inv-meta .cr-billto { grid-column: span 2; }
  .cr-inv-lines { table-layout: fixed; }
  .cr-inv-lines th:last-child { width: 92px; }
  .cr-inv-lines td { overflow-wrap: anywhere; }
  .cr-inv-lines .cr-hide-sm { display: none; }
  .cr-inv-lines .sub.cr-show-sm { display: block; }
  .cr-inv-person td:first-child { padding-left: 14px; }
  .cr-inv-totals { flex-basis: 100%; }
  .cr-grid .cr-person-col { min-width: 150px; max-width: 170px; }
  .cr-figure-value { font-size: 1.4rem; }
}

/* A printed invoice: the document only, on white, without the bars, buttons and notices */
@media print {
  html:has(.cr-invoice-page), body:has(.cr-invoice-page) { display: block; height: auto; background: #ffffff; }
  body:has(.cr-invoice-page) .topbar, body:has(.cr-invoice-page) .appbar, .cr-noprint { display: none !important; }
  body:has(.cr-invoice-page) .content { display: block; overflow: visible; padding: 0; }
  .cr-invoice-page .cr-invoice { max-width: none; padding: 0; border: 0; box-shadow: none; }
  .cr-inv-lines tr { break-inside: avoid; }
}

/* V1.25, Administration > Pricing (the owner: "formatting is weird with the bullets", "the save button is at a weird
   place"): one Save at the top right; the prices beside the apps' names; an item's detail in plain text; the notes of each
   service as a list inside the panel */
.cr-pricing-bar { flex-wrap: wrap; row-gap: 6px; }
.cr-seat-table { max-width: 760px; }
.cr-table td.strong .sub { font-weight: 400; }
.cr-offer { margin: 22px 0 2px; font-size: 1.05rem; }
.cr-offer + .hint { margin-top: 0; }
.cr-offer-notes { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 4px; padding-left: 1.4em; list-style: disc outside; }
.cr-offer-notes li { padding-left: 2px; line-height: 1.4; }

/* V1.44, the company's products from its PO categories (the owner, 2026-11-02: "Subscription app lists every product from
   the client's PO CATEGORIES ... CLIENTS SEE THE PRICES"): the "Your products" panel of the overview (Apps\Credits\
   ProductsPanel.razor: the monthly totals, a card per product, a Help desk's hours this month with its bar) and the Product
   column of Tasks > Categories with its dialog (Apps\Tasks\TasksCategoriesPage.razor, CategoryProductDialog.razor). Only the
   tokens of app.css; one card a row on a phone. */
.cr-prod-head { flex-wrap: wrap; row-gap: 6px; }
.cr-prod-head .spacer { flex: 1; }
.cr-prod-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 12px; margin: 4px 0 14px; }
.cr-prod-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cr-prod-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border);
                border-left: 4px solid var(--accent); border-radius: 10px; }
.cr-prod-card.cr-prod-NotStarted { border-left-color: var(--brand-gold); }
.cr-prod-card.cr-prod-Ended { border-left-color: var(--border); opacity: 0.75; }
.cr-prod-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.cr-prod-kind { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; overflow-wrap: anywhere; }
.cr-prod-top .admin-state { font-size: 0.7rem; }
.cr-prod-plan { font-weight: 800; overflow-wrap: anywhere; }
.cr-prod-sub, .cr-prod-calc { color: var(--muted); font-size: 0.8rem; }
.cr-prod-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; }
.cr-prod-amount { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-prod-per { color: var(--muted); font-size: 0.82rem; }
.cr-prod-none { color: var(--muted); font-style: italic; }
.cr-prod-term { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; }
.cr-prod-desk { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.cr-prod-desk-head { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 700; }
.cr-prod-bar { height: 8px; margin: 6px 0 4px; overflow: hidden; border-radius: 4px; background: var(--chip); }
.cr-prod-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cr-prod-left { color: var(--muted); font-size: 0.8rem; }
.cr-prod-over .cr-prod-bar span { background: var(--bad); }
.cr-prod-over .cr-prod-left { color: var(--bad); font-weight: 700; }
/* Tasks > Categories */
.cr-prod-cell { min-width: 220px; }
.cr-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cr-prod-row .sub { display: block; color: var(--muted); font-size: 0.78rem; }
.cr-prod-preview { margin: 8px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .cr-prod-totals { grid-template-columns: 1fr; }
  .cr-prod-list { grid-template-columns: 1fr; }
}

/* V1.44, the price groups of the international texts (the owner, 2026-11-02: "Yes, the groups"): Administration > Pricing's
   panel International texts (Apps\Admin\SmsGroupsPanel.razor: the four groups and their price, the Canada / US switch, the
   table of the countries, "Try a number"), the Subscription's Usage panel of the texts (Apps\Credits\TextGroupsPanel.razor)
   and Messaging > Billing's texts per group (Apps\Messaging\TextGroupsTable.razor). Only the tokens of app.css. */
.cr-sms-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.cr-sms-group { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
                background: var(--head-bg); }
.cr-sms-group .sub { display: block; color: var(--muted); font-size: 0.78rem; }
.cr-sms-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-right: 6px; padding: 0 6px;
                border-radius: 11px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.78rem; font-weight: 800; vertical-align: middle; }
.cr-sms-group .cr-sms-badge { min-width: 30px; height: 30px; margin: 0; border-radius: 15px; font-size: 0.95rem; }
.cr-sms-switch { margin: 0 0 8px; }
.cr-sms-switch .hint { margin: 0 0 0 4px; }
.cr-sms-table { max-width: 760px; }
.cr-sms-table td { vertical-align: middle; }
.cr-sms-code { max-width: 120px; }
.cr-sms-select { min-width: 130px; }
.cr-sms-trial { font-weight: 700; }
.cr-sms-usage td.strong .sub { max-width: 520px; white-space: normal; }
.cr-sms-billing th .sub { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.cr-sms-billing th .cr-sms-badge { margin: 0; }
.cr-sms-billing tfoot td { padding: 8px 10px; border-top: 2px solid var(--rule); font-weight: 800; }
@media (max-width: 600px) { .cr-sms-groups { grid-template-columns: 1fr 1fr; } }