/* it360portal — Control Room base for EVERY customers-area page (PATCH #11,
   21-08-2026: NAVY RETIRED on stock primaries per token-contract §5 amendment
   (blue chassis everywhere); stockhead gutter = the measured 29px content
   gutter so header text and page content share one left edge; 20px top
   clearance for the two flush pages (invoice toolbar, VCE); profile page
   rebalanced to equal columns; dead `.cd-stockhead + *` rule removed (it
   only ever matched a hidden <link> — live ancestor-walk 21-08). PATCH #6c,
   19-08-2026; PATCH #7b.2 20-08-2026: .customer-top-submenu joins the hide
   list — the Tailwind Files/Calendar strip survived #7b, verified live on
   /clients/profile; PATCH #9 20-08-2026: .cd-stockhead geometry = the
   1560px container; PATCH #10 20-08-2026: Control Room recipes on stock
   page content — S2 cards, chassis buttons with press travel, 20px rhythm). Loaded by head.php after the stock pair; page-specific
   view overrides (patch #6/#6b) layer on top. Tokens mirror the portal. */
:root{--cr-ink:#101828;--cr-muted:#5b6577;--cr-line:#e7eaf0;--cr-navy:#232052;--cr-blue:#2563eb;--cr-blue-soft:#eaf1ff;--cr-soft:#f4f6fa}
body.customers{background:#f4f6fa;color:var(--cr-ink);font-family:Inter,system-ui,sans-serif}
body.customers .panel_s,body.customers .panel,body.customers .card{border:1px solid var(--cr-line)!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(16,24,40,.04)!important}
body.customers h1,body.customers h2,body.customers h3,body.customers h4{color:var(--cr-ink);font-weight:800;letter-spacing:-.01em}
body.customers .btn-primary,body.customers .btn-info,body.customers .btn-success{background:linear-gradient(180deg,#3b82f6,#2563eb)!important;border-color:transparent!important;border-radius:999px!important;font-weight:700;padding:9px 20px;color:#fff!important}
body.customers .btn-default,body.customers .btn-secondary{background:#fff!important;border:1px solid var(--cr-line)!important;border-radius:999px!important;color:var(--cr-ink)!important;font-weight:700;padding:9px 18px}
body.customers .label{border-radius:999px!important;font-weight:700;padding:5px 12px}
body.customers table th{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#98a2b3;border-bottom:1px solid var(--cr-line)!important;padding:13px 14px!important}
body.customers table td{border-color:var(--cr-line)!important;padding:12px 14px!important;vertical-align:middle}
body.customers .form-control,body.customers select,body.customers textarea{border:1px solid var(--cr-line)!important;border-radius:10px!important;font-family:inherit}
body.customers .form-control:focus,body.customers select:focus,body.customers textarea:focus{outline:none;border-color:var(--cr-blue)!important;box-shadow:0 0 0 3px var(--cr-blue-soft)!important}
body.customers label{font-weight:700;color:var(--cr-ink)}
body.customers .bootstrap-select .btn{border-radius:10px!important}

/* ---- PATCH #7a: portal header band on stock pages ---- */
.cd-stockband{display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--cr-line);padding:14px 26px;position:sticky;top:0;z-index:999}
.cd-stockband img{height:38px;max-width:150px;object-fit:contain}
.cd-stockband-name{font:800 15px Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--cr-muted)}
.cd-stockband-sp{flex:1}
.cd-stockband-btn{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff !important;border-radius:999px;font:700 13px Inter,system-ui,sans-serif;padding:10px 20px;text-decoration:none}/* #11: navy retired */
body.cd-stockband-on nav.navbar,body.cd-stockband-on .navbar-default,body.cd-stockband-on #nav,
body.cd-stockband-on .header,body.cd-stockband-on #header,
body.cd-stockband-on .customers-nav-tabs,body.cd-stockband-on .nav-tabs-customers,
body.cd-stockband-on .customer-top-submenu{display:none !important}
body.cd-stockband-on{padding-top:0 !important}

/* ---- PATCH #7b: full portal header (hero bar + pill menu) on stock pages ---- */
.cd-stockhero{background:#fff;border-bottom:1px solid var(--cr-line);padding:16px 26px 14px;position:sticky;top:0;z-index:999;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.cd-stockpills{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.cd-stockpill{display:inline-flex;align-items:center;gap:7px;background:var(--cr-soft);border:1px solid transparent;border-radius:999px;padding:9px 17px;font:700 13.5px Inter,system-ui,sans-serif;color:var(--cr-ink);text-decoration:none !important}
.cd-stockpill:hover{border-color:var(--cr-line);background:#fff;color:var(--cr-ink)}
.cd-stockband{border:0;padding:0;position:static;box-shadow:none}

/* ---- PATCH #8: server-rendered portal header (cd_render_stock_header) ---- */
/* When the module's own header block is present, the stock chrome goes the
   same way it does under the JS band — plus the Tailwind submenu. :has() is
   already relied on for the gate pages, so it is safe here. */
body.customers:has(.cd-stockhead) nav.navbar,body.customers:has(.cd-stockhead) .navbar-default,
body.customers:has(.cd-stockhead) #nav,body.customers:has(.cd-stockhead) .header,
body.customers:has(.cd-stockhead) #header,body.customers:has(.cd-stockhead) .customers-nav-tabs,
body.customers:has(.cd-stockhead) .nav-tabs-customers,body.customers:has(.cd-stockhead) .customer-top-submenu{display:none !important}
body.customers:has(.cd-stockhead){padding-top:0 !important}
/* ---- PATCH #9 (20-08-2026): stock-header width/gap fix ---- */
/* The 1220px clamp made the server-rendered header NARROWER than the page
   content below it (body.customers .container is capped at 1560px by the
   module CSS). The stockhead now carries the SAME geometry as that
   container — 1560px cap, identical clamp gutters — so the header and the
   stock content align edge-for-edge at every viewport width. Top padding
   goes to 0: .cd-portal's own padding-top supplies the gap, byte-for-byte
   the portal-page rhythm. */
.cd-stockhead{max-width:1560px;margin:0 auto;padding:0 29px;width:100%}
/* PATCH #11 — 29px matches the stock content's own effective gutter
   (container -> row -> panel, measured live on ticket/profile/VCE 21-08),
   so the header text and every panel share one left edge at all widths. */

/* ---- PATCH #10 (20-08-2026): CONTROL ROOM on STOCK PAGE CONTENT ---- */
/* Stephen's ruling re-confirmed on the live /clients/profile read: the
   design system MUST cover every page and sub-page, not just the header.
   Token contract v1.0 recipes, adapted to the stock markup this theme
   ships: §3 elevation on every panel/card, §5 chassis buttons with the
   full 6px press travel (navy primary, white-key secondary), 20px form
   rhythm, §12 heading treatment. body.customers scope = every customers
   page, current and future. !important throughout because the stock
   bootstrap rules it overrides use it too. */

/* §3 — S2 elevation replaces the flat border-only card */
body.customers .panel_s,body.customers .panel,body.customers .card{
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 30px -10px rgba(16,24,40,.16)!important}

/* §12 — section headings ("Profile", "Change Password"): LIVE-READ fix —
   the stock markup ships Tailwind-classed H4s (tw-mt-0 tw-font-bold …) and
   no .content wrapper, so the selector is the bare scoped h4. The 20px top
   margin also supplies the gap under the portal header. */
body.customers h4{
  font:800 16px/1.3 Inter,system-ui,sans-serif!important;color:var(--cr-ink)!important;
  margin:20px 0 14px!important;letter-spacing:-.01em}
body.customers .cd-stockhead h4{margin:0!important}

/* 20px form rhythm + 40px controls */
body.customers .form-group{margin-bottom:20px!important}
body.customers .form-control,body.customers select.form-control{min-height:40px}
body.customers .panel-body,body.customers .panel_s .panel-body{padding:22px!important}

/* §5 — PRIMARY (navy): chassis + full press travel */
body.customers .btn-primary,body.customers .btn-info,body.customers .btn-success{
  height:40px;display:inline-flex;align-items:center;gap:8px;
  font:700 13.5px Inter,system-ui,sans-serif!important;padding:0 20px!important;
  box-shadow:0 6px 0 #1a4fc4,0 14px 24px -8px rgba(37,99,235,.40)!important;
  transition:transform .09s,box-shadow .11s!important;cursor:pointer}
body.customers .btn-primary:active,body.customers .btn-info:active,body.customers .btn-success:active{
  transform:translateY(6px);
  box-shadow:0 0 0 #1a4fc4,0 1px 3px rgba(37,99,235,.3)!important}

/* §5 — SECONDARY (white key): edge chassis + press travel */
body.customers .btn-default,body.customers .btn-secondary{
  height:40px;display:inline-flex;align-items:center;gap:8px;
  font:700 13.5px Inter,system-ui,sans-serif!important;padding:0 18px!important;
  background:linear-gradient(180deg,#fff,#f2f4f8)!important;border:1px solid #e2e6ee!important;
  box-shadow:0 6px 0 #c3cbd9,0 14px 24px -8px rgba(16,24,40,.2)!important;
  transition:transform .09s,box-shadow .11s!important;cursor:pointer}
body.customers .btn-default:active,body.customers .btn-secondary:active{
  transform:translateY(6px);
  box-shadow:0 0 0 #c3cbd9,0 1px 2px rgba(16,24,40,.15)!important}

/* travel needs headroom: a clipped panel would guillotine the chassis */
body.customers .panel-body,body.customers .panel-footer{overflow:visible}
body.customers .btn-primary:focus-visible,body.customers .btn-default:focus-visible{
  outline:2px solid rgba(37,99,235,.4);outline-offset:4px}

/* PATCH #11 — the old `.cd-stockhead + *` rule is REMOVED: the live
   ancestor-walk proved the stockhead's literal next sibling is a hidden
   <link>, so the rule never touched visible content. The two genuinely
   flush pages get scoped clearance instead: */
body.customers.viewinvoice .cd-stockhead ~ * .container > .row:first-child{margin-top:20px}
body.customers .vcep-root{margin-top:20px}

/* §14 hard gate */
@media (prefers-reduced-motion: reduce){
  body.customers *,body.customers *::before,body.customers *::after{
    animation:none!important;transition:none!important}}

/* ---- PATCH #11: profile page balance ---- */
/* Live read 21-08: .row.section-profile holds col-md-8 (profile form) +
   col-md-4 (change password) -> 991/481px, visibly lopsided. Flex the row
   to two equal columns with the 20px gap; single-column below 900px. The
   password panel stretches to match height so the pair reads as one bench. */
body.customers .row.section-profile{display:flex;flex-wrap:wrap;gap:20px;margin:0}
body.customers .row.section-profile > [class*=col-]{flex:1 1 calc(50% - 10px);max-width:none;width:auto;float:none;padding:0}
body.customers .row.section-profile .panel_s{height:100%}
@media (max-width:900px){body.customers .row.section-profile > [class*=col-]{flex:1 1 100%}}

/* ---- PATCH #11: invoice line-items table (D4 ruling) ---- */
/* Document-style tables KEEP their semantic widths (wide ITEM column) but
   join the token family: uppercase 11px th, --cr-line borders, identical
   cell padding — consistent voice, different column maths. Portal DATA
   tables stay table-layout:fixed via the module CSS; nothing here forces
   fixed onto document tables. */
body.customers.viewinvoice table th{white-space:nowrap}
body.customers.viewinvoice table td{vertical-align:top}

/* ---- PATCH #12 (21-08-2026) ---- */
/* Stock dropdowns: text vertically centred (native + bootstrap-select) */
body.customers select.form-control{height:40px;padding-top:0;padding-bottom:0;line-height:38px}
body.customers .bootstrap-select .btn{display:inline-flex;align-items:center;min-height:40px}
body.customers .bootstrap-select .filter-option{display:flex;align-items:center;height:100%}
body.customers .bootstrap-select .filter-option-inner-inner{line-height:normal}
/* Profile: right column stacks Password + embedded 2FA, uniform widths */
body.customers .row.section-profile > [class*=col-]{display:flex;flex-direction:column;gap:20px}
body.customers .row.section-profile .panel_s{height:auto;margin:0}
body.customers .cd12-2fa .cd-sec-opt{align-items:flex-start;cursor:pointer;display:flex;font-size:14px;font-weight:700;gap:10px;margin:0 0 10px}
body.customers .cd12-2fa .cd-sec-opt small{color:#5b6577;display:block;font-size:12.5px;font-weight:600}
body.customers .cd12-2fa .cd-sec-dim{opacity:.55}
body.customers .cd12-2fa .cd-sec-p{color:#5b6577;font-size:13.5px;margin:8px 0}
body.customers .cd12-2fa .cd-sec-code{border:1px solid #e7eaf0;border-radius:10px;font:700 15px ui-monospace,monospace;letter-spacing:2px;min-height:40px;padding:0 12px;width:140px}
body.customers .cd12-2fa .cd-qr{background:#fff;border:1px solid #e7eaf0;border-radius:12px;display:inline-block;margin:6px 0;padding:8px}
body.customers .cd12-2fa .cd-qr svg{display:block;height:150px;width:150px}
body.customers .cd12-2fa .cd-btn{align-items:center;background:linear-gradient(180deg,#3b82f6,#2563eb);border:0;border-radius:999px;box-shadow:0 6px 0 #1a4fc4,0 14px 24px -8px rgba(37,99,235,.4);color:#fff;cursor:pointer;display:inline-flex;font:700 13px Inter,system-ui,sans-serif;height:38px;padding:0 16px;transition:transform .09s,box-shadow .11s}
body.customers .cd12-2fa .cd-btn:active{transform:translateY(6px);box-shadow:0 0 0 #1a4fc4,0 1px 3px rgba(37,99,235,.3)}
body.customers .cd12-2fa .cd-btn-stop{background:linear-gradient(180deg,#f87171,#dc2626);box-shadow:0 6px 0 #a31d1d,0 14px 24px -8px rgba(220,38,38,.4)}
body.customers .cd12-2fa .cd-note-line{border-left:3px solid #e7eaf0;color:#5b6577;font-size:12.5px;margin-top:10px;padding:4px 10px}
body.customers .cd12-2fa .cd-sec-ok{border-left-color:#16a34a}
body.customers .cd12-2fa .cd-sec-err{border-left-color:#e5484d}
body.customers .cd12-2fa h4{font-size:15px;font-weight:800;margin:0 0 10px}
/* 8x8 "Your extensions": summary tiles strip */
body.customers .cd-mini-tiles{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 18px}
body.customers .cd-mini-tile{background:linear-gradient(180deg,#fff,#f4f6fa);border:1px solid #e2e6ee;border-top:4px solid var(--mt,#2563eb);border-radius:14px;box-shadow:0 6px 0 #c3cbd9,0 14px 24px -8px rgba(16,24,40,.18);flex:1 1 160px;min-width:150px;padding:12px 16px}
body.customers .cd-mini-tile b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5b6577}
body.customers .cd-mini-tile span{font:800 24px ui-monospace,monospace;color:var(--mt,#2563eb)}

/* ---- PATCH #13 (21-08-2026) ---- */
/* DESIGN GUIDE EVERYWHERE: every stock non-primary button gets the white-key
   chassis (primaries are already the blue chassis from #11). */
body.customers .btn-default,body.customers .btn:not(.btn-primary):not(.btn-info):not(.btn-success):not(.btn-danger):not(.bootstrap-select .btn){
  background:linear-gradient(180deg,#fff,#eef1f6)!important;border:1px solid #d7dce6!important;
  border-radius:999px!important;box-shadow:0 5px 0 #c3cbd9,0 12px 20px -8px rgba(16,24,40,.18)!important;
  color:#101828!important;display:inline-flex;align-items:center;gap:8px;height:40px;
  font:700 13.5px Inter,system-ui,sans-serif!important;padding:0 18px!important;
  transition:transform .09s,box-shadow .11s!important;cursor:pointer}
body.customers .btn-default:active,body.customers .btn:not(.btn-primary):not(.btn-info):not(.btn-success):not(.btn-danger):not(.bootstrap-select .btn):active{
  transform:translateY(5px);box-shadow:0 0 0 #c3cbd9,0 1px 3px rgba(16,24,40,.2)!important}
body.customers .bootstrap-select .btn{height:40px!important;border-radius:12px!important}
body.customers .btn-danger{background:linear-gradient(180deg,#f87171,#dc2626)!important;border:0!important;border-radius:999px!important;box-shadow:0 5px 0 #a31d1d,0 12px 20px -8px rgba(220,38,38,.35)!important;color:#fff!important;height:40px;display:inline-flex;align-items:center;font:700 13.5px Inter,system-ui,sans-serif!important;padding:0 18px!important}

/* PROFILE 2/3 + 1/3 (Stephen 21-08): profile form left, password + 2FA
   stacked right; identical radius family; single screen. */
body.customers .row.section-profile{display:flex;flex-wrap:wrap;gap:20px;margin:0;align-items:flex-start}
body.customers .row.section-profile > .col-md-8{flex:2 1 0;max-width:none;width:auto;float:none;padding:0}
body.customers .row.section-profile > .col-md-4{flex:1 1 0;max-width:none;width:auto;float:none;padding:0;display:flex;flex-direction:column;gap:20px}
body.customers .row.section-profile .panel_s{border-radius:18px;height:auto;margin:0}
body.customers .cd12-2fa{border-radius:18px}
@media (max-width:980px){body.customers .row.section-profile > [class*=col-]{flex:1 1 100%}}

/* Invoice view page polish: the toolbar row breathes evenly, the Paid chip
   joins the tag family, the small duplicate logo is hidden (the header
   already carries the brand). */
body.customers.viewinvoice #invoice-view img{display:none}
body.customers.viewinvoice .label-success,body.customers.viewinvoice .label{border-radius:999px;font:700 12px Inter,system-ui,sans-serif;padding:6px 14px;text-transform:uppercase;letter-spacing:.04em}
body.customers.viewinvoice .cd-stockhead ~ * .container > .row:first-child{align-items:center}

/* Stockhead card: symmetric inner vertical padding (bottom = top). */
body.customers .cd-stockhead-card,body.customers .cd-stockhead .panel_s{padding-top:16px;padding-bottom:16px}

/* ---- PATCH #14 (21-08-2026) ---- */
/* Extension summary tiles: chassis BUTTONS with a sunken selected state
   (portal card grammar — colour on edges, faces stay light). */
body.customers .cd-mini-tile{cursor:pointer;text-align:left;transition:transform .09s,box-shadow .11s;font:inherit}
body.customers .cd-mini-tile:active{transform:translateY(4px);box-shadow:0 2px 0 #c3cbd9,0 6px 12px -6px rgba(16,24,40,.18)}
body.customers .cd-mini-tile.cd-mt-on{box-shadow:0 0 0 #c3cbd9,inset 0 3px 8px rgba(16,24,40,.14);transform:translateY(4px);border-top-width:4px}
/* shared-line column centred */
body.customers .x8-q-cell,body.customers table th:last-child{text-align:center;vertical-align:middle}

/* ---- PATCH #15 (21-08-2026) ---- */
/* Design guide, no stragglers: every panel 18px radius; every submit that
   slipped the earlier selectors joins the blue chassis. */
body.customers .panel_s,body.customers .panel{border-radius:18px}
/* PATCH #19 (25-08-2026) — :not(.it360sc-btn) added.
   This rule repainted EVERY module submit button the portal blue at (0,4,2),
   including Side Conversations' "Post comment", which must be purple so it can
   never be mistaken for the ticket's blue "Add Reply". Posting a private
   comment into the public thread by muscle memory is exactly what the colour
   split prevents. it360_side_conversations v1.6.1 worked around this with a
   4-deep specificity ladder on its own side; this exclusion is the clean fix
   and lets that ladder be retired at their next release. */
body.customers button[type=submit]:not(.cd-btn):not(.sp-btn):not(.it360sc-btn),body.customers input[type=submit]{
  background:linear-gradient(180deg,#3b82f6,#2563eb)!important;border:0!important;border-radius:999px!important;
  box-shadow:0 6px 0 #1a4fc4,0 14px 24px -8px rgba(37,99,235,.4)!important;color:#fff!important;
  display:inline-flex;align-items:center;justify-content:center;height:40px;
  font:700 13.5px Inter,system-ui,sans-serif!important;padding:0 20px!important;
  transition:transform .09s,box-shadow .11s!important;cursor:pointer;width:auto!important}
body.customers button[type=submit]:not(.cd-btn):not(.it360sc-btn):active,body.customers input[type=submit]:active{
  transform:translateY(6px);box-shadow:0 0 0 #1a4fc4,0 1px 3px rgba(37,99,235,.3)!important}
/* NEVER a horizontal scrollbar on stock pages either */
body.customers{overflow-x:hidden}
body.customers table{table-layout:fixed;width:100%}
body.customers table td,body.customers table th{overflow:hidden;text-overflow:ellipsis;word-wrap:break-word}

/* ---- PATCH #16 (21-08-2026) ---- */
/* Every stock page gets the same breathing room above the portal header —
   the Vault page had none (Stephen 21-08). Uniform for all. */
body.customers .cd-stockhead{margin-top:14px}
/* Profile page: the floating section headings go; the two columns share the
   header's width and the standard 20px drop from it. */
body.customers .row.section-profile{margin-top:20px}
body.customers .row.section-profile > div > h4,
body.customers .section-profile h4.no-margin,
body.customers h4.customer-profile-heading{display:none!important}
body.customers .row.section-profile .panel_s,body.customers .cd12-2fa{border-radius:18px!important}

/* ---- PATCH #17 (21-08-2026) ---- */
body.customers .panel-footer{background:transparent;border:0;text-align:left}
body.customers input[type=file]{background:#fff;border:1px solid #e7eaf0;border-radius:10px;font:600 13px Inter,system-ui,sans-serif;padding:7px 10px}

/* ---- PATCH #18 (24-08-2026) — 2FA card states on the profile page --------
   The enrolment and re-issue blocks had NO rules here at all: they inherited
   the generic .cd12-2fa form flex rule, which put the code box mid-sentence,
   and the manual secret rendered red-on-pink from Bootstrap's stock `code`.
   Mirrors the portal stylesheet so one card looks the same on both surfaces. */
body.customers .cd12-2fa .cd-2fa-enrol,
body.customers .cd12-2fa .cd-2fa-re{background:#f4f6fa;border:1px solid #e7eaf0;border-radius:10px;margin-top:20px;padding:18px}
body.customers .cd12-2fa .cd-enrol-h{font-size:13.5px;font-weight:800;margin:0 0 16px}
body.customers .cd12-2fa .cd-enrol-b{display:flex;flex-wrap:wrap;gap:22px}
body.customers .cd12-2fa .cd-enrol-steps{flex:1 1 280px;min-width:260px}
body.customers .cd12-2fa .cd-step{display:flex;gap:11px;margin-bottom:16px}
body.customers .cd12-2fa .cd-step p{font-size:13px;margin:0 0 6px}
body.customers .cd12-2fa .cd-step-m{color:#5b6577;font-size:12.5px;font-weight:600;margin:0}
body.customers .cd12-2fa .cd-step-n{align-items:center;background:#eaf1ff;border-radius:50%;color:#2563eb;display:inline-flex;flex:0 0 auto;font-size:11px;font-weight:800;height:22px;justify-content:center;width:22px}
body.customers .cd12-2fa .cd-sec-manual{align-items:center;background:#fff;border:1px solid #e7eaf0;border-radius:10px;display:inline-flex;gap:10px;padding:7px 12px}
body.customers .cd12-2fa .cd-sec-manual code{background:none;color:#101828;font:700 12.5px ui-monospace,monospace;letter-spacing:1.5px;padding:0;-webkit-user-select:all;user-select:all}
body.customers .cd12-2fa .cd-sec-row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:10px;margin:0}
body.customers .cd12-2fa form:not(.cd-sec-row){align-items:center;display:flex;flex-wrap:wrap;gap:10px}
body.customers .cd12-2fa .cd-sec-f{display:block;margin:0}
body.customers .cd12-2fa .cd-sec-cap{color:#98a2b3;display:block;font-size:11px;font-weight:800;letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase}
body.customers .cd12-2fa .cd-enrol-f{align-items:center;border-top:1px solid #e7eaf0;display:flex;gap:12px;justify-content:flex-end;margin-top:16px;padding-top:14px}
body.customers .cd12-2fa .cd-enrol-f form{display:inline-flex;margin:0}
body.customers .cd12-2fa .cd-enrol-hint{color:#98a2b3;font-size:12px;font-weight:600;margin-right:auto}
body.customers .cd12-2fa .cd-sec-dim input[type=radio]{opacity:.35}
/* QR is one size on both surfaces now (was 150 here, 168 in the portal). */
body.customers .cd12-2fa .cd-qr svg{height:168px;width:168px}
/* Re-issue is routine, not destructive: neutral keycap, not the red stop button. */
body.customers .cd12-2fa .cd-btn-ghost{background:linear-gradient(180deg,#fff,#f2f4f8);border:1px solid #e2e6ee!important;box-shadow:0 6px 0 #c3cbd9,0 14px 24px -8px rgba(16,24,40,.2);color:#101828}
body.customers .cd12-2fa .cd-btn-ghost:active{box-shadow:0 0 0 #c3cbd9,0 1px 2px rgba(16,24,40,.15);transform:translateY(6px)}