/* Settings CSS, part 2 of 2: the centered glass sheet, the Settings redesign shared pieces, the phone Settings
   (MSX) and Settings v3 bubbles. Split #5 of index.html: moved unchanged, linked at the exact spot it used to
   sit (the end of that <style> block) so the cascade order is the same. */
  /* ════════════════════════════════════════════════════════════════════
     SETTINGS — centered glass modal redesign (design-system restyle).
     A pure-CSS override layer: every rule is scoped under #page-settings so
     it wins the cascade over the earlier .settings-* layout rules WITHOUT
     editing them, and over the page's mobile/topbar rules (later in source).
     Markup, handlers and IDs are unchanged. Light surfaces + the existing
     blue accent; full [data-theme="dark"] parity at the end of the block.
     ════════════════════════════════════════════════════════════════════ */
  #page-settings {
    /* Settings-scoped design tokens (light) */
    --st-accent: #2563eb;
    --st-accent-10: rgba(37,99,235,0.10);
    --st-accent-20: rgba(37,99,235,0.24);
    --st-surface: #ffffff;        /* inputs / sub-surfaces */
    --st-body: #ffffff;           /* the settings sheet (flat — no card bubbles) */
    --st-elevated: #eceff7;       /* hover, chips, secondary btn, toggle-off */
    --st-grouped: #f2f2f7;        /* iOS grouped page bg (mobile) */
    --st-card: #ffffff;           /* white grouped card (mobile) */
    --st-chevron: #c4c4c8;        /* iOS disclosure chevron (systemGray3) */
    --st-border: #e3e7f0;         /* hairlines */
    --st-text: #11182a;
    --st-text-2: #4a5267;
    /* Was #8b93a7 — 3.07:1 on white, under the 4.5:1 readable minimum, on the
       10px uppercase labels above every field in Settings. #5b6478 is 5.93:1
       and still clearly quieter than the values, which is the point of a label.
       Dark mode already passed at 5.15:1 and is left alone. */
    --st-text-muted: #5b6478;     /* labels, icons, sub-lines */
    --st-amber: #b45309; --st-red: #dc2626; --st-green: #047857;
    /* Tints for the semantic panels on Billing & usage, so a warning surface
       comes from a token rather than an inline rgba. Derived from the three
       colours above — no new hues. */
    --st-amber-bg: rgba(180,83,9,0.06);
    --st-red-bg:   rgba(220,38,38,0.06);
    --st-green-bg: rgba(4,120,87,0.09);

    /* Backdrop: dim + blur, centered. `display` stays owned by the inline
       style (showPage toggles none<->flex), so it is intentionally unset. */
    position: fixed; inset: 0; z-index: 1400;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(17,24,42,0.46);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }

  /* The floating glass card */
  #page-settings .settings-modal-card {
    display: flex; flex-direction: column;
    width: min(940px, 100%); height: 640px; max-height: 92vh;
    border-radius: 16px; overflow: hidden; color-scheme: light;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 22%, rgba(20,40,90,0.04) 100%),
      var(--st-body);
    border: 1px solid rgba(255,255,255,0.6);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      0 28px 70px rgba(15,30,80,0.30),
      0 6px 18px rgba(15,30,80,0.14),
      inset 0 1px 0 rgba(255,255,255,0.9),
      inset 0 -1px 0 rgba(40,70,140,0.06);
    animation: stCardIn .18s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes stCardIn { from { opacity:0; transform: translateY(10px) scale(.985); } to { opacity:1; transform:none; } }

  /* ── Header bar ── */
  #page-settings .topbar {
    flex: 0 0 auto; height: auto !important; min-height: 0 !important;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    /* padding-top folds in the iOS notch/status-bar inset — 0 on desktop (env
       resolves to 0), keeps the title clear of the notch on the full-screen
       mobile Settings modal. */
    margin: 0 !important; padding: calc(13px + var(--safe-top)) 16px 13px !important;
    background: transparent !important;
    border: none !important; border-bottom: 1px solid var(--st-border) !important;
    border-radius: 0 !important; box-shadow: none !important;
    position: static !important; top: auto !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  #page-settings .topbar .topbar-left { display: flex; align-items: baseline; gap: 0; min-width: 0; }
  #page-settings .topbar .page-title {
    color: var(--st-text) !important; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  }
  #page-settings .settings-hdr-sub { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; font-size: 12px; overflow: hidden; }
  #page-settings .settings-hdr-dot { color: var(--st-text-muted); }
  #page-settings #settings-active-label { color: var(--st-text-muted); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  #page-settings .topbar-right { display: flex; align-items: center; gap: 4px; }
  #page-settings .settings-hdr-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px;
    background: transparent; color: var(--st-text-muted); cursor: pointer;
    transition: background .12s, color .12s; order: 99; margin-left: 2px;
  }
  #page-settings .settings-hdr-close:hover { background: var(--st-elevated); color: var(--st-text); }
  #page-settings .settings-hdr-close i { width: 17px; height: 17px; }
  /* Sub-page Back — lives in the header, immediately left of the ✕ (order:99). */
  #page-settings .settings-hdr-back {
    display: inline-flex; align-items: center; gap: 3px; order: 98;
    height: 30px; padding: 0 11px 0 7px; border-radius: 8px;
    border: 1px solid var(--st-border); background: var(--st-surface);
    font-size: 12.5px; font-weight: 600; color: var(--st-accent); cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  #page-settings .settings-hdr-back:hover { background: var(--st-elevated); border-color: var(--st-accent-20); }
  #page-settings .settings-hdr-back i { width: 15px; height: 15px; }
  /* This is a modal — drop the app's global header tools (kebab / bell / phone)
     so the Settings header stays clean (title · section · close). */
  #page-settings .topbar-right #notif-bell,
  #page-settings .topbar-right #phone-launch,
  #page-settings .topbar-right .tb-kebab-wrap { display: none !important; }

  /* ── Body row: nav rail | content pane ── */
  #page-settings .settings-shell {
    display: flex; flex-direction: row; gap: 0;
    flex: 1 1 auto; min-height: 0; width: auto;
    margin: 0; padding: 0; background: transparent;
    grid-template-columns: none; grid-template-rows: none; align-items: stretch;
  }

  /* Nav rail */
  #page-settings .settings-nav {
    flex: 0 0 190px; width: 190px;
    display: flex; flex-direction: column; gap: 2px;
    min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 0 8px 8px; position: static; top: auto;
    background: transparent; border: none; border-right: 1px solid var(--st-border);
    border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Search = a flush, full-width sticky bar at the top of the rail (not a
     floating pill), so scrolled tabs can never peek above or around it. */
  /* A floating glass pill, in the same place it already sat. It stays sticky, so
     the rail scrolls UNDER it — which is the whole reason for the blur: a solid
     bar would just cover the list, and a transparent one would let the words
     collide with the placeholder. */
  #page-settings .settings-nav-search {
    position: sticky; top: 6px; z-index: 6;
    margin: 2px 2px 11px; padding: 7px 15px;
    background: rgba(255,255,255,0.68);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: none; border-bottom: none;
    border-radius: 999px;
    box-shadow:
      0 6px 18px rgba(17,24,42,0.10),
      0 1px 3px rgba(17,24,42,0.07),
      inset 0 0 0 1px rgba(255,255,255,0.55);
  }
  [data-theme="dark"] #page-settings .settings-nav-search {
    background: rgba(29,40,64,0.62);
    box-shadow:
      0 6px 18px rgba(0,0,0,0.42),
      0 1px 3px rgba(0,0,0,0.30),
      inset 0 0 0 1px rgba(255,255,255,0.07);
  }
  #page-settings .settings-nav-search-icon { width: 15px; height: 15px; }
  #page-settings .settings-nav-search-input { font-size: 13.5px; letter-spacing: -0.008em; }
  #page-settings .settings-nav-search-icon { color: var(--st-text-muted); opacity: 1; }
  #page-settings .settings-nav-search-input { color: var(--st-text); }
  #page-settings .settings-nav-search-input::placeholder { color: var(--st-text-muted); }
  #page-settings .settings-nav-search-clear { background: var(--st-elevated); color: var(--st-text-muted); }
  #page-settings .settings-nav-search-clear:hover { background: var(--st-border); color: var(--st-text); }
  #page-settings .settings-nav-empty { color: var(--st-text-muted); }

  #page-settings .settings-nav-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--st-text-muted); opacity: 1; padding: 12px 10px 4px;
  }
  #page-settings .settings-nav-label:first-of-type { padding-top: 4px; }

  #page-settings .settings-tab {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 8px; cursor: pointer; text-align: left;
    font-size: 12px; font-weight: 500; color: var(--st-text-muted);
    background: none; box-shadow: none; transition: background .13s, color .13s;
  }
  #page-settings .settings-tab i { width: 14px; height: 14px; }
  #page-settings .settings-tab:hover { background: var(--st-elevated); color: var(--st-text); box-shadow: none; }
  #page-settings .settings-tab.active {
    background: var(--st-accent-10); color: var(--st-accent);
    box-shadow: inset 0 0 0 1px var(--st-accent-20);
  }
  #page-settings .settings-tab.active i { color: var(--st-accent); }
  /* No rail line. The indent alone carries the grouping — a line down the side
     of every group is one more thing drawn on a menu you are trying to read. */
  #page-settings .settings-tab-children { border-left: none; margin: 1px 0 3px 16px; }
  #page-settings .settings-tab-child { font-size: 12px; }
  #page-settings .settings-tab-parent .fo-chevron { opacity: 0.6; }

  /* The sound test — a quiet accent pill that fills on hover, sitting beside the
     switch it belongs to rather than orphaned on its own line. 20px from the
     label: further than the 12px inside the switch group, so it reads as a
     separate action rather than part of the same control. */
  /* Older panels share the Settings field size: 38px, 13.5px text, 10px radius. */
  #page-settings input.form-input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
  #page-settings select.form-input { height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; box-sizing: border-box; }
  #page-settings textarea.form-input { line-height: 1.5; border-radius: 10px; }
  #page-settings .settings-panel a:not(.st-btn):not(.btn):not([role=tab]) { color: var(--st-text); text-decoration: underline; }
  #page-settings .sound-test {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: 8px; padding: 3px 14px 3px 11px;   /* keeps its row the same height as one with only a switch */
    border: 1px solid var(--st-accent-20); border-radius: 999px;
    background: var(--st-accent-10); color: var(--st-accent);
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.006em;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
  }
  #page-settings .sound-test:hover {
    background: var(--st-accent); border-color: var(--st-accent); color: #fff;
    box-shadow: 0 3px 10px var(--st-accent-20);
  }
  #page-settings .sound-test:active { transform: scale(0.97); }
  #page-settings .sound-test:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
  #page-settings .sound-test i,
  #page-settings .sound-test svg { width: 13px; height: 13px; }

  /* An upgraded <select> renders 37px tall and a text input 40px, so a dropdown
     sitting beside an input was three pixels short of it — visible as soon as
     the two share a row, which they do all over Settings. Matched here rather
     than globally: outside Settings these dropdowns live in compact toolbars
     where 37px is deliberate. */
  #page-settings .cs-wrap .cs-btn { min-height: 40px; }

  /* Every switch on a settings page ends on the SAME vertical line. The bordered
     delivery-channel rows already put theirs on the right, inset by their own
     12px padding and 1px border; the loose rows had theirs on the left. The 13px
     here is that padding+border, so the two kinds line up rather than nearly. */
  /* A switch sits in a box wherever it appears in Settings, so the notification
     lists and these loose rows read as one thing rather than two. The 12px right
     padding is what keeps every switch on the same line as the bordered rows'. */
  #page-settings .set-toggle-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; margin-bottom: 6px;
    background: var(--switch-box); border: 1px solid var(--switch-box-border); border-radius: 8px;
    transition: background .12s, border-color .12s;
  }
  #page-settings .set-toggle-row:hover { background: var(--switch-box-hover); }

  /* Inside a switch row the dropdown is not a form field — it is the VALUE, and
     it happens to be tappable. Giving it a box made those two rows taller than
     every other row on the page, which is the whole reason they looked wrong.
     No border, no fill, accent colour and a chevron: the colour says "this is
     live", the chevron says "tap it", and the row is the same height as one
     with nothing but a switch. */
  #page-settings .set-toggle-row .cs-wrap { width: auto; margin-left: auto; }
  #page-settings .set-toggle-row .cs-btn {
    min-height: 0; padding: 3px 7px 3px 9px;
    border: none; background: transparent; box-shadow: none;
    color: var(--st-accent); font-weight: 600; border-radius: 7px;
  }
  #page-settings .set-toggle-row .cs-btn:hover { background: var(--st-accent-10); }
  /* The typed digest time reads like the dropdown beside it: blue text, no box. */
  #page-settings .set-toggle-row input#trs-digest-hour {
    width: 9ch !important; field-sizing: content; min-width: 7ch; height: auto; min-height: 0;
    padding: 3px 7px; border: none; background: transparent; box-shadow: none;
    color: var(--st-accent); font-size: 13px; font-weight: 600; border-radius: 7px; text-align: right;
  }
  #page-settings .set-toggle-row input#trs-digest-hour:hover,
  #page-settings .set-toggle-row input#trs-digest-hour:focus { background: var(--st-accent-10); }
  #page-settings .set-toggle-row input#trs-digest-hour::placeholder { color: var(--st-accent); opacity: .55; }
  /* The same, for a browser that never upgraded the <select>. */
  #page-settings .set-toggle-row select.form-input {
    min-height: 0; padding: 3px 7px; border: none; background: transparent;
    color: var(--st-accent); font-weight: 600; width: auto;
  }
  #page-settings .set-toggle-row > .toggle-switch { margin-left: auto; flex: 0 0 auto; }
  /* A dropdown already claims the free space, so the switch after it must not
     claim it too — two auto margins would split the gap and separate the pair. */
  #page-settings .set-toggle-row > .cs-wrap + .toggle-switch,
  #page-settings .set-toggle-row > .form-input + .toggle-switch { margin-left: 0; }

  /* ── the rail's small adjustments ─────────────────────────────────────────
     The group headers keep their icon and are the only black text; everything
     under a header is plain grey words. One icon per group reads as a marker;
     one per destination is 41 glyphs of decoration. The rail line between the
     groups stays — it is what shows where a group starts and stops.

     Desktop only: under 820px the same rail is an iOS-style list where every
     row's icon is part of the design. Scoped so this doesn't redesign that. */
  @media (min-width: 821px) {
    #page-settings .settings-tab-child > i,
    #page-settings .settings-tab-child > svg { display: none; }
    /* Black, because the grey was #8b93a7 on white — 3.07:1, under the 4.5:1
       readable minimum — on a menu people read every day. The tab you are on
       keeps the accent, so nothing is lost by darkening the rest. */
    #page-settings .settings-tab-parent[data-setgrp] { color: var(--st-text); font-weight: 600; }
    #page-settings .settings-tab-child { color: var(--st-text); }


    /* No dropdown. The groups are always open and their names are labels, not
       buttons — collapsing hid the destination you were looking for behind a
       click, and remembered that choice, so the rail could greet you empty.

       "Unit Fields" keeps its arrow: it is a sub-menu of field lists,
       and unrolling ten of them here would bury the six groups above it. */
    #page-settings .settings-tab-children:not(#fo-children):not(#setgrp-advanced) { display: flex; }
    #page-settings .settings-tab-children#setgrp-advanced.open { display: flex; }
    #page-settings .settings-tab-parent[data-setgrp]:not([data-setgrp="advanced"]) { pointer-events: none; }
    #page-settings .settings-tab-parent[data-setgrp]:not([data-setgrp="advanced"]) .fo-chevron { display: none; }
    #page-settings .settings-tab-parent[data-setgrp="advanced"] { cursor: pointer; }

    /* Unit Fields is a sub-menu sitting among sub-tabs, not a group header: no
       icon, and the same black as the destinations around it. Its chevron stays
       — unlike the six groups, this one really does open and close. */
    #page-settings #fo-parent-btn { color: var(--st-text); }
    #page-settings #fo-parent-btn > i:not(.fo-chevron),
    #page-settings #fo-parent-btn > svg:not(.fo-chevron) { display: none; }
  }

  /* A sub-page replaces the CONTENT PANE only — the settings nav rail always
     stays put, so you never lose your place in the menu. (On ≤820px the nav is
     a full-screen drill-in list, so there the sub-page covers the shell instead;
     see the mobile block below.) */
  @media (min-width: 821px) {
    #page-settings .settings-subpage {
      position: static; inset: auto; flex: 1 1 auto; min-width: 0; min-height: 0;
      border-radius: 0; background: var(--st-body);
    }
    #page-settings.has-subpage .settings-shell > .settings-panels { display: none; }
  }
  /* One back affordance only: while a sub-page is open the mobile drill-out
     arrow steps aside for the header Back button. */
  #page-settings.has-subpage .settings-mobile-back { display: none !important; }
  #page-settings .settings-subpage-head {
    background: var(--st-body); border-bottom-color: var(--st-border); padding: 13px 24px;
  }
  #page-settings .settings-subpage-title { color: var(--st-text); font-size: 14px; }

  /* Content pane = the only scroller */
  #page-settings .settings-panels {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 0;
    padding: 0; background: transparent;
  }
  /* Each tab is one continuous sheet; sections inside are FLAT (no card
     bubbles), divided by a hairline. (incl. #sp-permissions). */
  #page-settings .settings-panel {
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; overflow: visible;
    display: flex; flex-direction: column; gap: 0; flex: 0 0 auto; min-height: 0;
  }
  /* Loose, non-card rows in a panel (e.g. an action-button row) keep the same
     24px content inset as the sections so nothing touches the edges. */
  #page-settings .settings-panel > div:not(.settings-card) { padding: 0 24px 20px; }

  /* ── Flat section recipe (one sheet, hairline-divided) ── */
  #page-settings .settings-panel .settings-card {
    background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible;
  }
  #page-settings .settings-panel .settings-card + .settings-card { border-top: 1px solid var(--st-border); }
  #page-settings .settings-card-head {
    display: flex; align-items: flex-start; gap: 0;
    padding: 20px 24px 0; border-bottom: none; background: transparent;
  }
  /* Section icon removed so the title aligns flush-left with the fields below
     it (symmetry). */
  #page-settings .settings-card-icon { display: none; }
  #page-settings .settings-card-title { font-size: 13px; font-weight: 600; color: var(--st-text); letter-spacing: -0.01em; }
  #page-settings .settings-card-sub { font-size: 12px; color: var(--st-text-muted); opacity: 1; margin-top: 3px; line-height: 1.55; max-width: 640px; }
  #page-settings .settings-card-body { padding: 14px 24px 20px; }

  /* Micro-label utility + every settings form label → tiny uppercase caption */
  #page-settings .st-microlabel,
  #page-settings .form-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--st-text-muted); display: block; margin-bottom: 6px;
  }

  /* ── Inputs: bordered shell, accent focus ring ── */
  #page-settings .form-input,
  #page-settings textarea.form-input,
  #page-settings select.form-input,
  #page-settings input.form-input {
    background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px;
    color: var(--st-text); font-size: 13px; padding: 9px 11px;
  }
  #page-settings .form-input::placeholder { color: var(--st-text-muted); }
  #page-settings .form-input:focus {
    border-color: var(--st-accent); outline: none; box-shadow: 0 0 0 3px var(--st-accent-10);
  }

  /* ── Buttons ── */
  #page-settings .btn {
    background: var(--st-surface); border: 1px solid var(--st-border); color: var(--st-text-2);
    border-radius: 8px; box-shadow: none; font-weight: 500;
  }
  #page-settings .btn:hover { background: var(--st-elevated); border-color: var(--st-border); color: var(--st-text); }
  #page-settings .btn-primary {
    background: var(--st-accent); border-color: var(--st-accent); color: #fff;
    box-shadow: none; font-weight: 600;
  }
  #page-settings .btn-primary:hover { background: #1d4fd0; border-color: #1d4fd0; color: #fff; }
  /* Destructive actions kept red inside Settings — the generic .btn override above
     was flattening Revoke into a neutral grey button. */
  #page-settings .btn-danger {
    background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.26); color: var(--st-red);
    font-weight: 600;
  }
  #page-settings .btn-danger:hover { background: var(--st-red); border-color: var(--st-red); color: #fff; }

  /* ── Toggle: accent ON / elevated OFF ── */
  #page-settings .toggle-slider {
    background: var(--st-elevated); box-shadow: inset 0 0 0 1px var(--st-border);
  }
  #page-settings .toggle-slider::before { background: #fff; box-shadow: 0 1px 2px rgba(15,30,80,0.25); }
  #page-settings .toggle-switch input:checked + .toggle-slider { background: var(--st-accent); box-shadow: none; }
  #page-settings .toggle-switch input:checked + .toggle-slider::before { background: #fff; }

  /* Inline "toggle + sentence + dropdown" rows (morning digest / escalation):
     the dropdowns ship as width:auto, so they're different sizes and land at
     different x. Pin both to one width and right-align them so the two rows
     line up with each other (and with the grid's right column above). */
  #page-settings #trs-digest-hour,
  #page-settings #trs-escalate-days {
    width: 196px !important; flex: 0 0 auto; margin-left: auto;
  }

  /* ── Segmented control (e.g. Invited-Users role tabs) ── */
  #page-settings .invited-users-tabs {
    height: auto; overflow: visible; gap: 2px; padding: 2px;
    background: var(--st-elevated); border: 1px solid var(--st-border); border-radius: 9px;
  }
  #page-settings .iu-tab {
    border: none; background: transparent; color: var(--st-text-muted);
    border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 500;
  }
  #page-settings .iu-tab.active {
    background: var(--st-surface); color: var(--st-text); box-shadow: 0 1px 2px rgba(15,30,80,0.14);
  }
  /* Phone: a team row can't fit a name, a company, a role picker and Revoke on
     one line — the name got truncated to nothing and Revoke fell off the right
     edge. Give the name its own line and let the controls wrap under it. */
  @media (max-width: 820px) {
    #page-settings .iu-row { flex-wrap: wrap; row-gap: 9px; padding: 11px 12px; }
    #page-settings .iu-row > .iu-open { flex: 1 1 100%; font-size: 13.5px; }
    #page-settings .iu-row > *:not(.iu-open) { flex: 0 1 auto; min-width: 0; }
    #page-settings .iu-row .cs-wrap,
    #page-settings .iu-row select.form-input { width: auto !important; min-width: 120px; }
    /* The company picker is the widest control — give it the full line. */
    #page-settings .iu-row .pm-mgmt-select { width: 100% !important; }
    #page-settings .iu-row .pm-mgmt-select + datalist + *,
    #page-settings .iu-row > div:has(.pm-mgmt-select) { flex: 1 1 100%; }
    #page-settings .iu-row .btn-danger { margin-left: auto; }
    /* Filter pills scroll instead of clipping Property Mgrs / Caseworkers off. */
    #page-settings .invited-users-tabs {
      display: flex !important; width: 100%; overflow-x: auto !important;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #page-settings .invited-users-tabs::-webkit-scrollbar { display: none; }
    #page-settings .iu-tab { flex: 0 0 auto; white-space: nowrap; }
  }
  /* Touch has no hover, so the disclosure chevron would never appear. */
  @media (hover: none) {
    .iu-open-chev { opacity: 1; transform: none; }
  }

  /* ── About / meta rows ── */
  #page-settings .settings-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--st-border); font-size: 13px;
  }
  #page-settings .settings-meta-row > span:first-child { color: var(--st-text-muted); opacity: 1; }
  #page-settings .settings-meta-row > span:last-child { color: var(--st-text); font-weight: 500; }

  /* ── Permissions: fill the modal body & let its inner columns scroll ── */
  #page-settings #sp-permissions { flex: 1 1 auto; min-height: 0; }
  #page-settings #sp-permissions .settings-card { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  #page-settings #sp-permissions .settings-card-body { padding: 0; flex: 1 1 auto; min-height: 0; display: flex; }
  #page-settings #sp-permissions .perm-layout { flex: 1 1 auto; min-height: 0; }

  /* ── Edit profile rendered inline (the #profile-card is reparented into
     #sp-profile from the popup overlay) — strip the popup chrome so it sits
     flat on the settings sheet. ── */
  #page-settings .modal.profile-inline {
    max-width: none !important; width: 100%;
    background: transparent !important; border: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    max-height: none !important; overflow: visible !important; animation: none !important;
  }
  #page-settings #sp-profile .modal-x { display: none !important; }                 /* settings has its own ✕ */
  #page-settings #sp-profile #profile-footer-view > .btn:first-child { display: none !important; } /* hide redundant "Close" */
  #page-settings #sp-profile .modal-footer { border-top: 1px solid var(--st-border); padding: 16px 24px; background: transparent; }
  #page-settings #sp-profile .profile-hero { border-radius: 0 !important; }
  /* Always-editable Settings profile: no "Cancel" (nothing to cancel back to), and
     the Sign-out button rides in the edit footer (it only shows when inline). */
  #page-settings #sp-profile #profile-footer-edit .pm-edit-cancel { display: none !important; }
  #profile-card:not(.profile-inline) .pm-edit-signout { display: none !important; }

  /* ── Desktop parity: the Profile tab reuses the avatar POP-UP card, whose dark
     "hero" banner looks foreign next to the flat white sheets every other tab uses.
     The ≤820 block already flattens it for mobile; do the same on desktop so it
     matches. Scoped to ≥821 so the mobile treatment is untouched. ── */
  @media (min-width: 821px) {
    #page-settings #sp-profile .profile-hero {
      background: transparent !important; color: var(--st-text);
      align-items: center; padding: 20px 20px 18px;
      border-bottom: 1px solid rgba(200,220,255,0.4);
    }
    #page-settings #sp-profile .profile-name  { color: var(--st-text); }
    #page-settings #sp-profile .profile-email { color: var(--st-text-muted); }
    #page-settings #sp-profile .profile-role-pill { background: var(--st-accent-10); color: var(--st-accent); border: none; }
    #page-settings #sp-profile .profile-role-pill.owner { background: rgba(245,158,11,0.16); color: #b45309; border: none; }
    #page-settings #sp-profile .profile-role-pill.admin { background: var(--st-accent-10); color: var(--st-accent); border: none; }
    #page-settings #sp-profile .profile-rows { padding: 4px 20px 6px; }
    #page-settings #sp-profile .profile-row { border-bottom-color: rgba(200,220,255,0.4); padding: 13px 0; }
    #page-settings #sp-profile .profile-row:last-child { border-bottom: none; }
    #page-settings #sp-profile .profile-lbl { color: var(--st-text-muted); }
    #page-settings #sp-profile .profile-val { color: var(--st-text); }
  }
  [data-theme="dark"] #page-settings #sp-profile .profile-role-pill.owner { background: rgba(245,158,11,0.20); color: #fbbf24; }


  /* ══ SETTINGS REDESIGN — shared pieces (handoff README "Global rules") ══
     Everything is scoped to .st2 (a redesigned page) so pages not yet
     rebuilt keep their current look. 24px margins, hairline dividers, fixed
     type scale, 38px inputs. */
  #page-settings .settings-panel > div.st2.st2 { padding: 0 24px 40px; color: var(--st-text); font-size: 13.5px; }
  #page-settings .st2 * { box-sizing: border-box; }
  #page-settings .st2 .st-h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 0; line-height: 34px; }
  #page-settings .st2 .st-sec { padding: 20px 0; border-top: 1px solid var(--st-border); }
  #page-settings .st2 .st-sec:first-of-type { border-top: none; }
  #page-settings .st2 .st-h1 + .st-sec { border-top: none; padding-top: 14px; }
  #page-settings .st2 .st-sec-title { font-size: 15px; font-weight: 700; margin: 0; }
  #page-settings .st2 .st-sec-desc { font-size: 13px; font-weight: 400; color: var(--st-text-muted); margin: 3px 0 14px; text-wrap: pretty; }
  #page-settings .st2 .st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  #page-settings .st2 .st-span { grid-column: 1 / -1; }
  #page-settings .st2 .st-field { min-width: 0; }
  #page-settings .st2 .st-label { display: block; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--st-text); margin: 0 0 6px; }
  #page-settings .st2 .st-input {
    display: block; width: 100%; height: 38px; padding: 0 12px; margin: 0;
    font: inherit; font-size: 13.5px; font-weight: 400; color: var(--st-text);
    background: transparent; border: none; border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--st-border); outline: none;
    transition: box-shadow .13s;
  }
  #page-settings .st2 textarea.st-input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
  #page-settings .st2 .st-input::placeholder { color: var(--st-text-muted); }
  #page-settings .st2 .st-input:hover { box-shadow: inset 0 0 0 1px var(--st-text-muted); }
  #page-settings .st2 .st-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #b3361f; }
  #page-settings .st2 .st-input[readonly] { color: var(--st-text-muted); }
  #page-settings .st2 .st-hint { font-size: 12.5px; font-weight: 400; color: var(--st-text-muted); margin-top: 6px; text-wrap: pretty; }
  #page-settings .st2 .st-err { font-size: 12.5px; color: #b3361f; margin-top: 6px; }
  #page-settings .st2 .st-err:empty { display: none; }
  /* Focus: one rule for every interactive thing on the redesigned pages. */
  #page-settings .st2 :focus-visible,
  #page-settings .settings-merge-pill:focus-visible,
  #page-settings .st-save-retry:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 8px; }
  #page-settings .st2 .st-input:focus-visible { outline-offset: 0; border-radius: 10px; }
  /* Buttons */
  #page-settings .st2 .st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500;
    color: var(--st-text); background: transparent; border: none; border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--st-border); cursor: pointer;
    transition: background .13s, transform .16s;
  }
  #page-settings .st2 .st-btn:hover { background: var(--st-elevated); }
  #page-settings .st2 .st-btn:active { transform: scale(.97); }
  #page-settings .st2 .st-btn[disabled] { opacity: .5; cursor: default; }
  /* Right-aligned control rows (label left, control right). Same right edge on every row. */
  #page-settings .st2 .st-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 52px; padding: 8px 0; border-top: 1px solid var(--st-border);
    border-radius: 8px; cursor: pointer; transition: background .13s, box-shadow .13s;
  }
  #page-settings .st2 .st-row:first-of-type { border-top: none; }
  #page-settings .st2 .st-row:hover { background: var(--st-elevated); box-shadow: -10px 0 0 var(--st-elevated), 10px 0 0 var(--st-elevated); }
  #page-settings .st2 .st-row-label { font-size: 13.5px; font-weight: 400; }
  #page-settings .st2 .st-row-hint { font-size: 12.5px; font-weight: 400; color: var(--st-text-muted); margin-top: 1px; }
  #page-settings .st2 .st-switch { position: relative; flex: 0 0 auto; width: 40px; height: 24px; }
  #page-settings .st2 .st-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  #page-settings .st2 .st-switch i { position: absolute; inset: 0; border-radius: 12px; background: var(--st-border); transition: background .15s; pointer-events: none; }
  #page-settings .st2 .st-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
  #page-settings .st2 .st-switch input:checked + i { background: var(--st-accent); }
  #page-settings .st2 .st-switch input:checked + i::after { transform: translateX(16px); }
  #page-settings .st2 .st-switch input:focus-visible + i { outline: 2px solid var(--st-accent); outline-offset: 2px; }
  /* Photo */
  #page-settings .st2 .st-photo { display: flex; align-items: center; gap: 16px; }
  #page-settings .st2 .st-avatar {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: var(--st-text-muted); background: var(--st-elevated);
    box-shadow: inset 0 0 0 1px var(--st-border);
  }
  #page-settings .st2 .st-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #page-settings .st2 .st-photo-actions { display: flex; gap: 8px; }


  /* Inner tabs for a page that holds sibling views (handoff "Top tabs") */
  #page-settings .st2 .stx-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 8px 0 14px; box-shadow: inset 0 -1px 0 var(--st-border); }
  #page-settings .st2 .stx-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 0; background: transparent; color: var(--st-text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
  #page-settings .st2 .stx-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--st-text); transform: scaleX(0); transition: transform .18s; }
  #page-settings .st2 .stx-tab:hover, #page-settings .st2 .stx-tab.on { color: var(--st-text); }
  #page-settings .st2 .stx-tab.on::after { transform: scaleX(1); }
  #page-settings .st2 .stx-tabs + .st-h1 { margin-top: 0; }
  /* Application checklists */
  #page-settings .st2 .cl-h { font-size: 13.5px; font-weight: 600; margin: 24px 0 6px; padding-top: 22px; border-top: 1px solid var(--st-border); }
  #page-settings .st2 .cl-block:first-of-type .cl-h { margin-top: 4px; padding-top: 0; border-top: 0; }
  #page-settings .st2 .cl-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid var(--st-border); }
  #page-settings .st2 .cl-n { flex: 0 0 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--st-text-muted); opacity: .6; }
  #page-settings .st2 .cl-row .st-input { flex: 1; min-width: 0; box-shadow: none; background: transparent; padding: 0 10px; transition: background .13s; }
  #page-settings .st2 .cl-row .st-input:hover { background: var(--st-elevated); box-shadow: none; }
  #page-settings .st2 .cl-row .st-input:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--st-text-muted); }
  #page-settings .st2 .cl-row .st-link { opacity: .45; transition: opacity .13s; }
  #page-settings .st2 .cl-row:hover .st-link, #page-settings .st2 .cl-row:focus-within .st-link { opacity: 1; }
  @media (hover: none) { #page-settings .st2 .cl-row .st-link { opacity: 1; } }
  #page-settings .st2 .cl-empty { padding: 12px 0; border-top: 1px solid var(--st-border); font-size: 13.5px; color: var(--st-text-muted); }
  #page-settings .st2 .cl-add { margin: 10px 0 0 24px; }
  #page-settings .st2 .cl-reset { margin-top: 20px; }
  #page-settings .st2 .cl-row .st-link, #page-settings .st2 .cl-add, #page-settings .st2 .cl-reset { color: var(--st-text-muted); }
  #page-settings .st2 .cl-row .st-link:hover, #page-settings .st2 .cl-add:hover, #page-settings .st2 .cl-reset:hover { color: var(--st-text); }
  #page-settings .st2 .cl-reset.arm { color: #b3361f; }
  #page-settings .st2 .st-link.arm { color: #b3361f; font-weight: 600; }
  #page-settings .st2 .st-btn { white-space: nowrap; }
  #page-settings .st2 .st-suffix { display: flex; align-items: center; width: 300px; max-width: 100%; height: 38px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--st-border); background: #fff; padding-right: 12px; box-sizing: border-box; }
  #page-settings .st2 .st-suffix:focus-within { box-shadow: inset 0 0 0 1px var(--st-text-muted); }
  #page-settings .st2 .st-suffix .st-input { box-shadow: none; background: transparent; flex: 1; min-width: 0; padding-right: 4px; }
  #page-settings .st2 .st-suffix span { font-size: 12.5px; color: var(--st-text-muted); white-space: nowrap; }
  #page-settings .st2 .st-color { flex: 0 0 38px; width: 38px; height: 38px; padding: 3px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--st-border); background: #fff; cursor: pointer; }
  #page-settings .st2 .st-hint .st-link { font-size: inherit; color: var(--st-accent); }
  #page-settings .st2 .st-hint .st-link.arm { color: #b3361f; }
  /* Selects (native, never the app's custom cs-wrap — handoff pitfall) */
  #page-settings .st2 select.st-input {
    appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
  }
  [data-theme="dark"] #page-settings .st2 select.st-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237e89a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  }
  #page-settings .st2 select.st-input option { color: #111; }
  /* Link rows (label + hint left, action text right) and button-rows */
  #page-settings .st2 button.st-row { font: inherit; color: inherit; text-align: left; background: transparent; border: none; border-top: 1px solid var(--st-border); width: 100%; }
  #page-settings .st2 .st-row-go { font-size: 13px; font-weight: 500; color: var(--st-text-muted); flex: 0 0 auto; }
  #page-settings .st2 .st-linklist { margin-top: 2px; }
  /* Logo */
  #page-settings .st2 .st-logo { flex: 0 0 auto; width: 128px; height: 64px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--st-text-muted); box-shadow: inset 0 0 0 1px var(--st-border); background: var(--st-elevated); }
  #page-settings .st2 .st-drop { border-radius: 10px; transition: box-shadow .13s; }
  /* Business hours */
  #page-settings .st2 .st-day { display: flex; align-items: flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid var(--st-border); }
  #page-settings .st2 .st-day:first-of-type { border-top: none; }
  #page-settings .st2 .st-day-name { flex: 0 0 104px; font-size: 13.5px; line-height: 38px; }
  #page-settings .st2 .st-day-main { flex: 1 1 auto; min-width: 0; }
  #page-settings .st2 .st-day .st-switch { margin-top: 7px; }
  #page-settings .st2 .st-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  #page-settings .st2 .st-slot:last-of-type { margin-bottom: 0; }
  #page-settings .st2 .st-slot .st-input { width: 128px; }
  #page-settings .st2 .st-slot-to { font-size: 13px; color: var(--st-text-muted); }
  #page-settings .st2 .st-closed { font-size: 13.5px; line-height: 38px; color: var(--st-text-muted); }
  #page-settings .st2 .st-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px 24px; }
  #settings-subpage [data-subpage-host="add-agent-modal"] .modal-body { padding: 0; overflow: visible; max-height: none; }
  #settings-subpage [data-subpage-host="add-agent-modal"] { border: none !important; border-radius: 0 !important; background: transparent !important; }
  #settings-subpage [data-subpage-host="add-agent-modal"] .st2 { padding: 0 24px 40px; color: var(--st-text); font-size: 13.5px; }
  #page-settings .st2 .st-btn-primary { color: #fff; background: var(--st-text); box-shadow: none; }
  #page-settings .st2 .st-btn-primary:hover { background: var(--st-text); opacity: .88; }
  /* Permissions */
  #page-settings .st2 .pm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 20px; }
  #page-settings .st2 .pm-field { width: 280px; min-width: 0; margin: 0; }
  #page-settings .st2 .pm-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 20px; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--st-text-muted); }
  #page-settings .st2 .pm-link { border: 0; background: none; padding: 0; color: var(--st-text-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
  #page-settings .st2 .pm-link:hover { color: #c0392b; text-decoration: underline; text-underline-offset: 3px; }
  #page-settings .st2 .pm-link.arm { color: #c0392b; font-weight: 600; }
  #page-settings .st2 .pm-link:focus-visible, #page-settings .st2 .pm-cb:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
  #page-settings .st2 .pm-top .st-btn, #page-settings .st2 .pm-crow .st-btn { height: 38px; padding: 0 16px; border-radius: 10px; }
  #page-settings .st2 .pm-top .st-btn:active, #page-settings .st2 .pm-crow .st-btn:active { transform: scale(.97); }
  #page-settings .st2 .pm-create { margin-top: 16px; }
  #page-settings .st2 .pm-create[hidden] { display: none; }
  #page-settings .st2 .pm-crow { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto auto; gap: 12px; align-items: end; }
  #page-settings .st2 .pm-crow .st-field { margin: 0; }
  #page-settings .st2 .st-btn.pm-quiet { box-shadow: none; color: var(--st-text-muted); padding: 0 8px; }
  #page-settings .st2 .st-btn.pm-quiet:hover { background: none; color: var(--st-text); text-decoration: underline; text-underline-offset: 3px; }
  #page-settings .st2 .pm-grp { margin-top: 24px; }
  #page-settings .st2 .pm-gh, #page-settings .st2 .pm-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 72px); align-items: center; }
  #page-settings .st2 .pm-gh { padding-bottom: 8px; }
  #page-settings .st2 .pm-gt { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--st-text); }
  #page-settings .st2 .pm-col { font-size: 12.5px; font-weight: 600; color: var(--st-text-muted); text-align: center; }
  #page-settings .st2 .pm-row { box-sizing: border-box; min-height: 44px; border-top: 1px solid var(--st-border); font-size: 13.5px; color: var(--st-text); }
  #page-settings .st2 .pm-cell { display: flex; justify-content: center; }
  #page-settings .st2 .pm-cb { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,24,42,.22), inset 0 1px 1px rgba(17,24,42,.06); transition: background .15s ease-out, box-shadow .15s ease-out, transform .16s cubic-bezier(.23,1,.32,1); }
  #page-settings .st2 .pm-cb:hover { box-shadow: inset 0 0 0 1px rgba(17,24,42,.34), inset 0 1px 1px rgba(17,24,42,.06); }
  #page-settings .st2 .pm-cb:active { transform: scale(.9); }
  #page-settings .st2 .pm-cb.on { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); box-shadow: inset 0 0 0 1px rgba(15,45,140,.35), inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(37,99,235,.32); }
  #page-settings .st2 .pm-cb svg { display: block; }
  #page-settings .st2 .pm-cb.pop svg path { stroke-dasharray: 14; stroke-dashoffset: 0; animation: pmDraw .24s cubic-bezier(.23,1,.32,1); }
  #page-settings .st2 .pm-cb:disabled { cursor: default; opacity: .5; }
  #page-settings .st2 .pm-cb:disabled:active { transform: none; }
  @keyframes pmDraw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { #page-settings .st2 .pm-cb.pop svg path { animation: none; } }
  #page-settings .st2 .st-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 500; color: var(--st-text); cursor: pointer; }
  #page-settings .st2 .st-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  #page-settings .st2 .st-link:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 4px; }
  /* Team members list (handoff: search + role select, grouped rows with status) */
  #page-settings .st2 .tl-bar { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
  #page-settings .st2 .tl-search { position: relative; flex: 1; min-width: 0; }
  #page-settings .st2 .tl-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--st-text-muted); pointer-events: none; }
  #page-settings .st2 .tl-search .st-input { padding-left: 36px; }
  #page-settings .st2 .tl-role { width: 200px; flex: 0 0 200px; }
  #page-settings .st2 .tl-invite { display: flex; gap: 12px; align-items: center; }
  #page-settings .st2 .tl-invite #invite-email { flex: 1; min-width: 0; }
  #page-settings .st2 .st-people { margin-top: 6px; }
  #page-settings .st2 .st-people-group { display: block; padding: 18px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--st-text-muted); }
  #page-settings .st2 .tl-cnt { margin-left: 6px; font-weight: 400; }
  #page-settings .st2 .tl-u { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px 96px; align-items: center; gap: 14px; padding: 11px 0; border: 0; border-top: 1px solid var(--st-border); border-radius: 8px; background: none; width: 100%; text-align: left; cursor: pointer; transition: background .13s, box-shadow .13s; font: inherit; color: var(--st-text); }
  #page-settings .st2 .tl-u.tl-static { cursor: default; }
  #page-settings .st2 .tl-u:not(.tl-static):hover, #page-settings .st2 .tl-u:focus-visible { background: var(--st-elevated); box-shadow: -10px 0 0 var(--st-elevated), 10px 0 0 var(--st-elevated); outline: 0; }
  #page-settings .st2 .tl-u:not(.tl-static):hover .tl-nm { text-decoration: underline; text-underline-offset: 3px; }
  #page-settings .st2 .st-people-group + .tl-u { border-top-color: transparent; }
  #page-settings .st2 .tl-u:last-child { border-bottom: 0; }
  #page-settings .st2 .tl-who { min-width: 0; }
  #page-settings .st2 .tl-nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-settings .st2 .tl-em { font-size: 12.5px; color: var(--st-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-settings .st2 .tl-rl { font-size: 13px; }
  #page-settings .st2 .tl-rl small { display: block; font-size: 12px; color: var(--st-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-settings .st2 .tl-stt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--st-text-muted); }
  #page-settings .st2 .tl-stt i { width: 7px; height: 7px; border-radius: 50%; background: #b9c0cf; flex: none; }
  #page-settings .st2 .tl-stt.act i { background: #2e9d6a; }
  #page-settings .st2 .tl-stt.inv i { background: #d99a2b; }
  #page-settings .st2 .tl-act { display: flex; justify-content: flex-start; }
  #page-settings .st2 .tl-you { font-size: 12.5px; font-weight: 500; color: var(--st-text-muted); line-height: 30px; cursor: default; }
  #page-settings .st2 .tl-rm { margin-left: -10px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--st-text-muted); cursor: pointer; }
  #page-settings .st2 .tl-rm:hover { color: #c0392b; background: rgba(192,57,43,.08); }
  #page-settings .st2 .tl-rm.arm { color: #fff; background: #c0392b; }
  #page-settings .st2 .tl-rm:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
  /* Team member page (handoff): hero, Details / Commission tabs */
  #page-settings .st2 .tm-hero { display: flex; align-items: center; gap: 16px; padding: 20px 0 18px; }
  #page-settings .st2 .tm-hero .st-avatar { width: 64px; height: 64px; font-size: 22px; flex: none; }
  #page-settings .st2 .tm-name { font-size: 20px; font-weight: 600; line-height: 1.25; }
  #page-settings .st2 .tm-hero > div:nth-child(2) { flex: 1; min-width: 0; }
  #page-settings .st2 .tm-role { margin-left: auto; align-self: flex-start; font-size: 13px; color: var(--st-text-muted); }
  #page-settings .st2 .tm-sub { font-size: 13px; color: var(--st-text-muted); margin-top: 2px; }
  #page-settings .st2 .tm-photo { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
  #page-settings .st2 .tm-photo-err:empty { display: none; }
  #page-settings .st2 .mt-tabs { border-bottom: 1px solid var(--st-border); margin-bottom: 4px; }
  #page-settings .st2 .mt-tabs > div { display: flex; gap: 22px; }
  #page-settings .st2 .mt-tab { border: 0; background: none; padding: 10px 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--st-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  #page-settings .st2 .mt-tab.on { color: var(--st-text); border-bottom-color: var(--st-text); }
  #page-settings .st2 .mt-tab:hover:not(.on) { color: var(--st-text); }
  #page-settings .st2 .mt-tab:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 4px; }
  #page-settings .st2 .mt-pane[hidden] { display: none; }
  #page-settings .st2 .tm-files { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--st-border); }
  #page-settings .st2 .tm-files-t span { display: block; font-size: 13.5px; font-weight: 600; }
  #page-settings .st2 .tm-files-t small { display: block; font-size: 12.5px; color: var(--st-text-muted); margin-top: 2px; }
  #page-settings .st2 .st-value-fill { padding: 9px 0; }
  /* Team member page (sub-page) */
  #page-settings .settings-subpage-body > .st2 { padding: 0 24px 40px; color: var(--st-text); font-size: 13.5px; }
  #page-settings .settings-subpage-body { padding: 0; }
  #page-settings .st2 .st-value { display: flex; align-items: center; min-height: 38px; font-size: 13.5px; }
  #page-settings .st2 .st-btn-danger { color: #b3361f; }
  #page-settings .st2 .st-confirm { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--st-border); }
  #page-settings .st2 .st-confirm[hidden] { display: none; }
  #page-settings .st2 .st-confirm-msg { font-size: 13px; line-height: 1.45; }
  /* Team members */
  #page-settings .st2 .st-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
  #page-settings .st2 .st-filter .iu-tab { height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--st-text-muted); background: transparent; border: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--st-border); cursor: pointer; transition: background .13s, color .13s; }
  #page-settings .st2 .st-filter .iu-tab:hover { background: var(--st-elevated); color: var(--st-text); }
  #page-settings .st2 .st-filter .iu-tab.active { color: var(--st-text); box-shadow: inset 0 0 0 1px var(--st-text); background: transparent; }
  #page-settings .st2 .st-filter .iu-count { font-size: 12.5px; font-weight: 400; margin-left: 4px; color: var(--st-text-muted); background: none; padding: 0; }
  #page-settings .st2 .st-people { margin-top: 6px; }
  #page-settings .st2 .st-people-group { font-size: 12.5px; font-weight: 600; color: var(--st-text-muted); padding: 14px 0 4px; border: none; background: none; }
  #page-settings .st2 .st-person { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 8px 0; margin: 0; font: inherit; color: var(--st-text); text-align: left; background: transparent; border: none; border-top: 1px solid var(--st-border); border-radius: 8px; cursor: pointer; transition: background .13s, box-shadow .13s; }
  #page-settings .st2 .st-people-group + .st-person { border-top: none; }
  #page-settings .st2 .st-person:first-child { border-top: none; }
  #page-settings .st2 .st-person:hover { background: var(--st-elevated); box-shadow: -10px 0 0 var(--st-elevated), 10px 0 0 var(--st-elevated); }
  #page-settings .st2 .st-person-static { cursor: default; }
  #page-settings .st2 .st-person-static:hover { background: transparent; box-shadow: none; }
  #page-settings .st2 .st-person-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  #page-settings .st2 .st-person-name { font-size: 13.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-settings .st2 .st-person-you, #page-settings .st2 .st-person-sub { font-size: 12.5px; font-weight: 400; color: var(--st-text-muted); }
  #page-settings .st2 .st-person-sub { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-settings .st2 .st-person-pres { flex: 0 0 auto; font-size: 12.5px; color: var(--st-text-muted); }
  #page-settings .st2 .st-empty { font-size: 13.5px; color: var(--st-text-muted); padding: 18px 0; }

  /* The one save indicator (topbar). Plain grey text, no pill. */
  #page-settings .st-save-ind { font-size: 12.5px; font-weight: 400; color: var(--st-text-muted); margin-right: 12px; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
  #page-settings .st-save-ind:empty { display: none; }
  #page-settings .st-save-retry { font: inherit; font-size: 12.5px; color: #b3361f; background: none; border: none; padding: 2px 4px; cursor: pointer; text-decoration: underline; }
  /* Top tabs — sibling pages of one section (the merged-page strip, restyled). */
  #page-settings .settings-panel > .settings-merge-strip.st-tabs {
    display: flex; flex-wrap: nowrap; gap: 0; margin: 0 24px; padding: 8px 0 0;
    border-bottom: 1px solid var(--st-border);
  }
  #page-settings .settings-merge-strip.st-tabs .settings-merge-pill {
    position: relative; flex: 1 1 0; height: 34px; padding: 0 8px; border: none; border-radius: 8px 8px 0 0;
    background: transparent; color: var(--st-text-muted); font: inherit; font-size: 13px; font-weight: 500;
    text-align: center; cursor: pointer; transition: background .13s, color .13s;
  }
  #page-settings .settings-merge-strip.st-tabs .settings-merge-pill:hover { background: var(--st-elevated); color: var(--st-text); }
  #page-settings .settings-merge-strip.st-tabs .settings-merge-pill.active { color: var(--st-text); background: transparent; font-weight: 500; }
  #page-settings .settings-merge-strip.st-tabs .settings-merge-pill::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--st-text);
    transform: scaleX(0); transition: transform .18s;
  }
  #page-settings .settings-merge-strip.st-tabs .settings-merge-pill.active::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { #page-settings .st2 *, #page-settings .settings-merge-pill, #page-settings .settings-merge-pill::after { transition: none !important; } }

  /* ── Dark theme parity ── */
  [data-theme="dark"] #page-settings {
    --st-accent: #5b9bf2;
    --st-accent-10: rgba(91,155,242,0.14);
    --st-accent-20: rgba(91,155,242,0.30);
    --st-surface: #161f33;
    --st-body: #0f1626;
    --st-elevated: #1d2840;
    --st-grouped: #0b1220;
    --st-card: #172035;
    --st-chevron: rgba(165,178,205,0.5);
    --st-border: rgba(120,160,230,0.16);
    --st-text: #eaf0fb;
    --st-text-2: #b3bdd2;
    --st-text-muted: #7e89a3;
    --st-amber-bg: rgba(224,166,74,0.10);
    --st-red-bg:   rgba(240,131,138,0.10);
    --st-green-bg: rgba(52,211,153,0.12);
    background: rgba(2,6,18,0.62) !important;
  }
  /* --st-amber/red/green are not redefined for dark Settings, so the light
     values sit on a dark surface. The billing page leans on them for its
     warning rungs, so it carries readable dark values itself. Worth lifting
     into the block above one day — that is a platform change, not this one. */
  [data-theme="dark"] #page-settings #billing-root {
    --st-amber: #e0a64a; --st-red: #f0838a; --st-green: #34d399;
  }
  [data-theme="dark"] #page-settings .settings-modal-card {
    color-scheme: dark;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,0.18) 100%),
      var(--st-body);
    border-color: rgba(120,160,230,0.18);
    box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* ── Responsive: ≤820px (the app's mobile/tablet cutoff; desktop frame is
     ≥821px) → near-fullscreen ChatGPT-style grouped Settings. Uses 820 (not 768)
     so the 769–820 tablet band doesn't fall back to the old wrapping pill-row. ── */
  @media (max-width: 820px) {
    #page-settings { padding: 0 !important; }
    #page-settings .settings-modal-card { width: 100%; height: 100%; max-height: 100%; border-radius: 0; background: var(--st-grouped) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    /* Keep the modal title visible (the page-level mobile rule hides it with !important). */
    #page-settings .topbar .page-title { display: block !important; }
    /* The page-level mobile rule paints header buttons white (for the old dark
       header) — force the close ✕ dark so it's visible on the light modal. */
    #page-settings .topbar-right .settings-hdr-close {
      color: var(--st-text-2) !important; background: rgba(120,120,128,0.16) !important;
      border: none !important; box-shadow: none !important;
      width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important;
      border-radius: 50% !important; flex: none;
    }
    /* Same fix for the sub-page Back pill — it would otherwise inherit the
       white-on-light header text and read as a blank ghost button. */
    #page-settings .topbar-right .settings-hdr-back {
      color: var(--st-accent) !important; background: rgba(120,120,128,0.14) !important;
      border: none !important; box-shadow: none !important;
      height: 34px !important; min-height: 34px !important; padding: 0 13px 0 9px !important;
      border-radius: 17px !important; font-size: 14px !important; flex: none;
    }
    #page-settings .topbar-right .settings-hdr-back i { width: 16px !important; height: 16px !important; }
    /* ── Mobile Settings = ChatGPT-style grouped list + drill-in detail ── */
    /* Flex column that fills the fixed-height card so the visible child
       (nav in list view, panels in detail view) becomes the scroller.
       Was display:block → panels grew to full content height and the card
       clipped them (overflow:hidden), so tall pages couldn't scroll. */
    #page-settings .settings-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }

    /* Search: rounded field at the top of the list */
    #page-settings .settings-nav-search {
      display: flex; position: static; flex: 0 0 auto; margin: 12px 0 4px; padding: 0 12px; height: 40px;
      align-items: center; gap: 8px; border: none; border-radius: 11px;
      background: rgba(120,120,128,0.12);
    }
    #page-settings .settings-nav-search-input { font-size: 17px; letter-spacing: -0.01em; }
    #page-settings .settings-nav-search-icon { width: 17px; height: 17px; }
    /* Section header */
    #page-settings .settings-nav-label {
      display: block; padding: 26px 4px 8px; font-size: 13px; font-weight: 600;
      letter-spacing: -0.01em; text-transform: none; color: var(--st-text-muted); opacity: 1;
    }
    #page-settings .settings-nav-label:first-of-type { padding-top: 10px; }

    /* Nav = the full-screen grouped list */
    #page-settings .settings-nav {
      flex: 1 1 auto; width: auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0;
      overflow-y: auto; overflow-x: hidden; padding: 4px 16px max(40px, env(safe-area-inset-bottom));
      -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      border: none; border-right: none; border-bottom: none; background: transparent;
    }
    /* Rows */
    #page-settings .settings-tab {
      position: relative; width: 100%; display: flex; align-items: center; gap: 13px;
      min-height: 52px; margin: 0; padding: 11px 14px; border: none; border-radius: 0;
      background: var(--st-card); box-shadow: none; flex: 0 0 auto;
      font-size: 17px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em;
      color: var(--st-text); white-space: normal;
    }
    #page-settings .settings-tab:hover { background: var(--st-card); color: var(--st-text); box-shadow: none; }
    /* Tap feedback — iOS highlights the whole row on press */
    #page-settings .settings-tab:active { background: var(--st-elevated); transition: background .05s; }
    /* Neutralise the accent highlight in the list — you drill in on tap */
    #page-settings .settings-modal-card:not(.set-detail) .settings-tab.active {
      background: var(--st-card); color: var(--st-text); box-shadow: none;
    }
    /* Leading icon → monochrome chip (black & white, no colour) */
    #page-settings .settings-tab > i:first-child,
    #page-settings .settings-tab > svg:first-child {
      box-sizing: border-box; width: 26px; height: 26px; flex: none; padding: 0;
      border-radius: 0; background: transparent; color: var(--st-text);
    }
    #page-settings .settings-modal-card:not(.set-detail) .settings-tab.active > i:first-child,
    #page-settings .settings-modal-card:not(.set-detail) .settings-tab.active > svg:first-child { color: var(--st-text); }
    /* Trailing chevron on every row except the expandable Field-options parent */
    #page-settings .settings-tab:not(.settings-tab-parent)::after {
      content: ""; margin-left: auto; flex: none; width: 8px; height: 8px;
      border-right: 2px solid var(--st-chevron); border-bottom: 2px solid var(--st-chevron);
      transform: rotate(-45deg); opacity: 1;
    }
    #page-settings .settings-tab-parent .fo-chevron { margin-left: auto; width: 17px; height: 17px; opacity: 1; color: var(--st-chevron); }
    /* Hairline divider between adjacent rows */
    #page-settings .settings-tab + .settings-tab::before {
      content: ""; position: absolute; top: 0; left: 52px; right: 0; height: .5px; background: var(--st-border);
    }
    /* Rounded group corners */
    #page-settings .settings-nav-label + .settings-tab { border-top-left-radius: 13px; border-top-right-radius: 13px; }
    #page-settings .settings-tab:has(+ .settings-nav-label) { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
    #page-settings .settings-tab:last-of-type { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
    /* Field-options sub-list = continuous rows inside the same card, indented */
    #page-settings .settings-tab-children { border-left: none; margin: 0; background: var(--st-card); }
    #page-settings .settings-tab-child { padding-left: 32px; }
    #page-settings .settings-tab-child + .settings-tab-child::before { left: 75px; }

    /* Panels hidden in list view; full-screen in detail view */
    #page-settings .settings-panels { display: none; padding: 0; }
    #page-settings .settings-modal-card.set-detail .settings-nav { display: none; }
    #page-settings .settings-modal-card.set-detail .settings-panels { display: flex; padding: 8px 0 max(40px, env(safe-area-inset-bottom)); background: var(--st-grouped); -webkit-overflow-scrolling: touch; }

    /* Header: list shows just "Settings"; detail shows ‹ + the section name */
    #page-settings .hdr-mobile-icon { display: none !important; }
    #page-settings .settings-mobile-back { display: none; }
    #page-settings .settings-modal-card:not(.set-detail) .settings-hdr-sub { display: none; }
    #page-settings .settings-modal-card.set-detail .settings-mobile-back {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; margin-right: 2px; padding: 0; border: none;
      background: transparent; color: var(--st-accent); cursor: pointer;
    }
    #page-settings .settings-modal-card.set-detail .settings-mobile-back i { width: 24px; height: 24px; }
    #page-settings .settings-modal-card.set-detail .page-title { display: none !important; }
    #page-settings .settings-modal-card.set-detail .settings-hdr-dot { display: none; }
    #page-settings .settings-modal-card.set-detail .settings-hdr-sub { margin-left: 0; }
    #page-settings .settings-modal-card.set-detail #settings-active-label { font-size: 16px; font-weight: 600; color: var(--st-text); }

    /* ══ Detail panels → iOS grouped cards (white cards floating on grouped-gray) ══
       Generic recipe over the shared .settings-card / -head / -body blocks, so it
       covers every form panel at once. #sp-permissions keeps its own 2-pane layout. */
    #page-settings .set-detail .settings-panel:not(#sp-permissions) .settings-card {
      margin: 0 0 22px; background: transparent; border: none;
    }
    #page-settings .set-detail .settings-panel:not(#sp-permissions) .settings-card + .settings-card {
      border-top: none;
    }
    /* Head → floating gray caption above the card (aligned to the card's left edge) */
    #page-settings .set-detail .settings-panel:not(#sp-permissions) .settings-card-head {
      padding: 4px 16px 8px; background: transparent; border: none;
    }
    #page-settings .set-detail .settings-panel:not(#sp-permissions) .settings-card-title { font-size: 13px; }
    #page-settings .set-detail .settings-panel:not(#sp-permissions) .settings-card-sub  { font-size: 12px; }
    /* Body → the white rounded card holding the form rows */
    #page-settings .set-detail .settings-panel:not(#sp-permissions) .settings-card-body {
      margin: 0 16px; padding: 12px 16px 14px; background: var(--st-card);
      border: none; border-radius: 13px;
    }
    /* Loose non-card rows (e.g. a bare action-button row) get the same side inset */
    #page-settings .set-detail .settings-panel:not(#sp-permissions) > div:not(.settings-card) {
      padding: 0 16px 20px;
    }
    /* Touch-friendly inputs (16px prevents iOS focus-zoom) */
    #page-settings .set-detail .settings-panel .form-input,
    #page-settings .set-detail .settings-panel textarea.form-input,
    #page-settings .set-detail .settings-panel select.form-input,
    #page-settings .set-detail .settings-panel input.form-input {
      font-size: 16px; padding: 11px 12px; border-radius: 10px;
    }
    /* About / meta rows sit flush inside their card; drop the last hairline (iOS) */
    #page-settings .set-detail .settings-meta-row { padding: 13px 0; }
    #page-settings .set-detail .settings-card-body .settings-meta-row:last-child { border-bottom: none; padding-bottom: 2px; }

    /* ══ Management companies → flat grouped rows (kill the glassmorphism .mgmt-card) ══ */
    #page-settings .set-detail #mgmt-list.mgmt-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
    #page-settings .set-detail .mgmt-card {
      background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
      border: none !important; border-radius: 0 !important; box-shadow: none !important;
      padding: 12px 2px !important; transform: none !important;
    }
    #page-settings .set-detail .mgmt-card::before { display: none !important; }
    #page-settings .set-detail .mgmt-card + .mgmt-card { border-top: 1px solid var(--st-border) !important; }
    #page-settings .set-detail .mgmt-card:hover { transform: none !important; box-shadow: none !important; }

    /* ══ Edit profile → match the grouped iOS vibe (was a foreign dark-gradient hero) ══ */
    #page-settings #sp-profile .profile-hero {
      flex-direction: column; align-items: center; text-align: center; gap: 5px;
      padding: 6px 16px 18px; background: transparent !important; color: var(--st-text);
    }
    #page-settings #sp-profile .profile-hero > div { flex: none; text-align: center; }
    #page-settings #sp-profile .profile-avatar { width: 76px; height: 76px; font-size: 28px; }
    #page-settings #sp-profile .profile-name  { color: var(--st-text); font-size: 20px; }
    #page-settings #sp-profile .profile-email { color: var(--st-text-muted); font-size: 14px; }
    #page-settings #sp-profile .profile-role-pill {
      background: var(--st-accent-10); color: var(--st-accent); border: none; margin-top: 8px;
    }
    /* View rows → white grouped card */
    #page-settings #sp-profile .profile-rows {
      background: var(--st-card); border-radius: 13px; margin: 0 16px; padding: 2px 16px;
    }
    #page-settings #sp-profile .profile-row { border-bottom-color: var(--st-border); padding: 13px 0; }
    #page-settings #sp-profile .profile-row:last-child { border-bottom: none; }
    #page-settings #sp-profile .profile-lbl { color: var(--st-text-muted); }
    #page-settings #sp-profile .profile-val { color: var(--st-text); }
    /* Edit form sits on the grouped-gray, not a raw sheet */
    #page-settings #sp-profile #profile-edit { padding: 4px 16px 4px; }
    /* Kill the bottom-sheet grabber bar that leaks in from the popup .modal styles */
    #page-settings #sp-profile .modal.profile-inline::before { display: none !important; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     MOBILE SETTINGS — native grouped-list rebuild (MSX)
     ─────────────────────────────────────────────────────────────────────
     Replaces the phone/tablet Settings UI (≤820px) with a three-level iOS
     grouped list. Desktop (≥821px) never sees any of this: every rule below
     is inside the media query, and the switch that hides the old shell
     (.msx-on) is only ever set by JS while the media query matches.

     The OLD shell stays mounted and off-screen on purpose. Every panel's
     load/save function writes into those real inputs, so MSX renders rows
     that mirror them and commits back through the same handlers — no save
     path was rewritten, so nothing that worked can quietly stop working.
     ══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 820px) {
    /* Park the old UI off-screen but rendered — display:none would stop some
       panels laying out, and their load functions measure as they render. */
    #page-settings.msx-on .settings-shell {
      position: absolute !important; left: -20000px !important; top: 0 !important;
      width: 393px !important; height: 900px !important; overflow: hidden !important;
      pointer-events: none !important; opacity: 0 !important;
    }
    #page-settings.msx-on .settings-shell .settings-panels { display: block !important; }
    #page-settings.msx-on .settings-modal-card > .topbar { display: none !important; }
    #page-settings.msx-on .settings-modal-card {
      background: var(--st-grouped) !important; padding: 0 !important; overflow: hidden;
    }

    #msx {
      position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
      background: var(--st-grouped);
      font: 400 17px/1.35 -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: var(--st-text); -webkit-font-smoothing: antialiased;
      --msx-safe-top: env(safe-area-inset-top, 0px);
      --msx-safe-bot: env(safe-area-inset-bottom, 0px);
    }

    /* ── Nav bar ─────────────────────────────────────────────────────── */
    .msx-nav {
      flex: 0 0 auto; position: relative; z-index: 3;
      padding-top: max(var(--msx-safe-top), 10px);
      background: var(--st-glass, rgba(255,255,255,.72));
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--st-border);
    }
    .msx-nav-bar { height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 8px; }
    .msx-back {
      display: inline-flex; align-items: center; gap: 1px; min-height: 44px; min-width: 44px;
      padding: 0 6px 0 2px; border: none; background: none; cursor: pointer;
      color: var(--st-accent); font-size: 17px; letter-spacing: -.01em;
      flex: 0 0 auto; white-space: nowrap;
    }
    .msx-back i { width: 24px; height: 24px; flex: none; }
    .msx-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Centred in the BAR, iOS-style — not in the space left over. msxFitNav()
       measures the real gap on each side after render and caps the width to the
       smaller one, so the title can never reach the back button. */
    .msx-nav-title {
      position: absolute; left: 50%; transform: translateX(-50%);
      font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--st-text);
      max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      pointer-events: none;
    }
    .msx-back.is-bare { padding-right: 2px; }
    .msx-back.is-bare span { display: none; }
    .msx-nav-right {
      margin-left: auto; min-width: 44px; min-height: 44px;
      display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    }
    .msx-saved { font-size: 13px; font-weight: 500; color: var(--st-green, #047857); white-space: nowrap; }
    .msx-x {
      position: relative;   /* ::after below widens the hit area to 44px */
      width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--st-fill, rgba(120,120,128,.16)); color: var(--st-text-2);
    }
    .msx-x i { width: 17px; height: 17px; }
    .msx-x::after { content: ""; position: absolute; inset: -7px; }

    /* Root gets a large title instead of a nav bar */
    .msx-large {
      flex: 0 0 auto; padding: calc(max(var(--msx-safe-top), 10px) + 6px) 16px 8px;
      background: var(--st-grouped); display: flex; align-items: center; gap: 12px;
    }
    .msx-large h1 {
      margin: 0; flex: 1; font-size: 34px; font-weight: 700; letter-spacing: -.024em; color: var(--st-text);
    }

    /* ── Scroller ────────────────────────────────────────────────────── */
    .msx-body {
      flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
      -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      padding: 14px 0 calc(40px + var(--msx-safe-bot));
    }
    .msx-body.has-search { padding-bottom: calc(104px + var(--msx-safe-bot)); }

    /* ── Section = header + card + footnote ──────────────────────────── */
    .msx-sec { margin: 0 0 24px; }
    .msx-h {
      padding: 0 32px 7px; font-size: 13px; font-weight: 500; letter-spacing: .03em;
      text-transform: uppercase; color: var(--st-text-3, #8a92a4);
    }
    .msx-card {
      margin: 0 16px; background: var(--st-card); border-radius: 12px; overflow: hidden;
    }
    .msx-foot {
      padding: 7px 32px 0; font-size: 13px; line-height: 1.4; color: var(--st-text-3, #8a92a4);
      text-wrap: pretty;
    }

    /* ── Row ─────────────────────────────────────────────────────────── */
    .msx-row {
      position: relative; width: 100%; box-sizing: border-box;
      display: flex; align-items: center; gap: 12px;
      min-height: 52px; padding: 10px 16px; border: none; background: none; cursor: pointer;
      text-align: left; color: var(--st-text); font: inherit;
    }
    .msx-row.tall { min-height: 58px; }
    .msx-row.ro { cursor: default; }
    .msx-row + .msx-row::before {
      content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px;
      background: var(--st-border); transform: scaleY(.5); transform-origin: top;
    }
    .msx-row.has-icon + .msx-row.has-icon::before { left: 57px; }
    .msx-row:active:not(.ro) { background: var(--st-elevated); }
    .msx-ico {
      width: 29px; height: 29px; border-radius: 8px; flex: none;
      display: inline-flex; align-items: center; justify-content: center; color: #fff;
    }
    .msx-ico i { width: 17px; height: 17px; }
    .msx-txt { flex: 1 1 auto; min-width: 0; }
    .msx-t { font-size: 17px; letter-spacing: -.01em; color: var(--st-text); }
    .msx-t.emph { font-weight: 600; }
    .msx-t.dim { color: var(--st-text-3, #8a92a4); }
    .msx-t.red { color: var(--st-red); }
    .msx-t.acc { color: var(--st-accent); }
    .msx-s {
      display: block; font-size: 13px; line-height: 1.35; color: var(--st-text-2); margin-top: 2px;
      overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
    .msx-v {
      flex: 0 1 auto; font-size: 17px; letter-spacing: -.01em; color: var(--st-text-2);
      max-width: 215px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
    }
    .msx-chev { width: 19px; height: 19px; flex: none; color: var(--st-chevron); }
    .msx-badge {
      flex: none; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 7px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--st-fill, rgba(120,120,128,.16)); color: var(--st-text-2);
      font-size: 12px; font-weight: 600;
    }
    /* Picker tick: sized to the 17px row text, accent-coloured, no pill behind
       it — the selected row is marked, not badged. */
    .msx-check { width: 17px; height: 17px; flex: none; color: var(--st-accent); }
    .msx-check svg, svg.msx-check { stroke-width: 3; }
    .msx-row.center { justify-content: center; }
    .msx-row.center .msx-t { flex: none; }

    /* ── Switch ──────────────────────────────────────────────────────── */
    .msx-sw {
      flex: none; width: 51px; height: 31px; border-radius: 16px; padding: 2px;
      background: var(--st-track, rgba(120,120,128,.3)); transition: background .22s;
      pointer-events: none;
    }
    .msx-sw i {
      display: block; width: 27px; height: 27px; border-radius: 50%; background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .22s;
    }
    .msx-sw.on { background: var(--st-accent); }
    .msx-sw.on i { transform: translateX(20px); }

    /* ── Inline fields (date / time / colour) ────────────────────────── */
    .msx-inline {
      flex: 0 0 auto; min-height: 44px; font-size: 17px; color: var(--st-text);
      background: transparent; border: none; text-align: right; padding: 0;
      font-family: inherit; max-width: 200px;
    }
    input.msx-inline[type="color"] { width: 40px; height: 28px; padding: 0; border-radius: 6px; }
    /* A typed whole number (Keep screening reports for): a quiet grey field, 44px tall. */
    input.msx-inline.msx-num {
      width: 72px; height: 44px; padding: 0 12px; border-radius: 8px;
      border: 1px solid rgba(68,64,60,.18); background: var(--st-card, transparent);
      font-size: 17px; text-align: right; -moz-appearance: textfield;
    }
    input.msx-inline.msx-num::-webkit-inner-spin-button, input.msx-inline.msx-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input.msx-inline.msx-num:focus { outline: none; border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(37,99,235,.08)); }
    [data-theme="dark"] input.msx-inline.msx-num { border-color: rgba(255,255,255,.10); }
    input.msx-inline.msx-num { flex: none; }
    .msx-v.msx-unit { flex: none; max-width: none; margin-left: -4px; }
    /* Phone fields and tab pills reached through a desktop panel meet the same 44px / 16px rule. */
    #msx .msx-raw .stx-tab, #msx .msx-raw .st-tab { min-height: 44px; }
    #msx .msx-raw input.st-input:not([type=checkbox]):not([type=radio]), #msx .msx-raw select.st-input, #msx .msx-raw textarea.st-input,
    #msx .msx-raw input.form-input:not([type=checkbox]):not([type=radio]), #msx .msx-raw select.form-input { min-height: 44px; font-size: 16px; }

    /* ── Editor screen ───────────────────────────────────────────────── */
    .msx-field {
      display: block; width: 100%; box-sizing: border-box; border: none; outline: none;
      background: var(--st-card); color: var(--st-text);
      font: 400 17px/1.45 inherit; letter-spacing: -.01em; padding: 15px 16px; resize: none;
    }
    .msx-field::placeholder { color: var(--st-text-3, #8a92a4); }
    textarea.msx-field { min-height: 170px; }

    /* ── Balance card (Billing) ──────────────────────────────────────── */
    .msx-bal { margin: 0 16px 24px; background: var(--st-card); border-radius: 14px; padding: 20px; }
    .msx-bal-k {
      font-size: 13px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
      color: var(--st-text-3, #8a92a4);
    }
    .msx-bal-v {
      font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: var(--st-text);
      font-variant-numeric: tabular-nums; margin: 4px 0 14px; line-height: 1;
    }
    .msx-warn { font-size: 13px; line-height: 1.4; color: var(--st-amber); margin-top: 12px; }
    .msx-primary {
      display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
      min-height: 50px; border: none; border-radius: 12px; cursor: pointer;
      background: var(--st-accent); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
    }
    .msx-primary i { width: 19px; height: 19px; }
    #msx .msx-primary { background: var(--mx-ink); color: #fff; }
    [data-theme="dark"] #msx .msx-primary { color: #11131f; }

    /* ── Search pill (root only) ─────────────────────────────────────── */
    .msx-search {
      position: absolute; left: 16px; right: 16px; bottom: calc(24px + var(--msx-safe-bot));
      z-index: 4; height: 50px; border-radius: 25px; display: flex; align-items: center; gap: 9px;
      padding: 0 16px; background: var(--st-glass, rgba(255,255,255,.72));
      -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
      box-shadow: 0 6px 24px -6px rgba(10,14,26,.28), inset 0 0 0 1px var(--st-border);
    }
    .msx-search i { width: 19px; height: 19px; flex: none; color: var(--st-text-3, #8a92a4); }
    .msx-search input {
      flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none;
      font: 400 17px/1 inherit; letter-spacing: -.01em; color: var(--st-text);
    }
    .msx-search input::placeholder { color: var(--st-text-3, #8a92a4); }
    .msx-search button { border: none; background: none; padding: 4px; cursor: pointer; color: var(--st-text-3, #8a92a4); }

    /* ── Empty state ─────────────────────────────────────────────────── */
    .msx-empty { padding: 60px 32px; text-align: center; color: var(--st-text-2); }
    .msx-empty .msx-ec {
      width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
      background: var(--st-fill, rgba(120,120,128,.16));
      display: flex; align-items: center; justify-content: center; color: var(--st-text-3, #8a92a4);
    }
    .msx-empty .msx-ec i { width: 24px; height: 24px; }
    .msx-empty h3 { margin: 0 0 5px; font-size: 17px; font-weight: 600; color: var(--st-text); }
    .msx-empty p { margin: 0; font-size: 13px; line-height: 1.4; }

    /* ── Bottom sheet (option editor) ────────────────────────────────── */
    .msx-sheet-back {
      position: absolute; inset: 0; z-index: 10; background: rgba(10,14,26,.42);
      animation: msxFade .18s ease-out;
    }
    .msx-sheet {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
      background: var(--st-grouped); border-radius: 16px 16px 0 0;
      padding: 0 0 calc(34px + var(--msx-safe-bot));
      max-height: 88%; overflow-y: auto;
      animation: msxUp .26s cubic-bezier(.22,.9,.28,1);
    }
    .msx-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--st-border); margin: 8px auto 4px; }
    .msx-sheet-head {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 8px 16px 14px;
    }
    .msx-sheet-head button {
      min-width: 60px; min-height: 44px; border: none; background: none; cursor: pointer;
      color: var(--st-accent); font-size: 17px; letter-spacing: -.01em;
    }
    .msx-sheet-head button.done { font-weight: 600; }
    .msx-sheet-head .msx-sheet-t { font-size: 17px; font-weight: 600; color: var(--st-text); }

    @keyframes msxUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes msxFade { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .msx-sheet, .msx-sheet-back { animation: none; }
      .msx-sw, .msx-sw i { transition: none; }
    }

    /* ── Toast ───────────────────────────────────────────────────────── */
    .msx-toast {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: calc(90px + var(--msx-safe-bot)); z-index: 12;
      padding: 11px 18px; border-radius: 22px; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
      background: var(--st-glass, rgba(255,255,255,.72)); color: var(--st-text);
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
      box-shadow: 0 8px 26px -8px rgba(10,14,26,.4), inset 0 0 0 1px var(--st-border);
      animation: msxToast .2s ease-out;
    }
    @keyframes msxToast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

    /* ── Legacy panel adopted into the new shell ─────────────────────────
       A handful of screens are drawn entirely by their own JS (Brand, My
       Website, Tenant screening, Linked spreadsheets, WhatsApp, the roles
       matrix and the billing usage table). Rather than fork their renderers,
       MSX borrows the real panel and dresses it as a grouped card. ── */
    .msx-raw { margin: 0 20px 24px; }
    /* Connect Gmail draws the phone's own msx cards, which carry their own 20px inset. */
    .msx-raw:has(#gmail-page) { margin: 0 0 24px; }
    .msx-raw:has(#dbs-page), .msx-raw:has(#pam-page) { margin: 0 0 24px; }
    .msx-raw .settings-card { margin: 0 0 20px !important; background: transparent !important; border: none !important; }
    .msx-raw .settings-card-head { padding: 0 0 8px !important; background: none !important; border: none !important; }
    .msx-raw .settings-card-icon { display: none !important; }
    .msx-raw .settings-card-title { font-size: 13px !important; font-weight: 500 !important; letter-spacing: .03em; text-transform: uppercase; color: var(--st-text-3, #8a92a4) !important; }
    .msx-raw .settings-card-sub { font-size: 13px !important; line-height: 1.4; color: var(--st-text-3, #8a92a4) !important; margin-top: 4px; }
    .msx-raw .settings-card-body {
      padding: 14px 16px !important; background: var(--st-card) !important;
      border: none !important; border-radius: 12px !important; margin: 0 !important;
    }
    .msx-raw .form-input, .msx-raw input.form-input, .msx-raw select.form-input, .msx-raw textarea.form-input {
      font-size: 16px !important; min-height: 44px !important; border-radius: 10px !important;
    }
    .msx-raw button { min-height: 44px; }
    /* Every field on a borrowed panel is 44px / 16px, whatever inline style the desktop gave it. */
    #msx .msx-raw input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]), #msx .msx-raw select, #msx .msx-raw textarea { min-height: 44px !important; font-size: 16px !important; box-sizing: border-box; }
    /* Plain checkboxes become switches (blue is allowed on toggles). */
    #msx .msx-raw input[type=checkbox]:not(.st-sw-in) { -webkit-appearance: none; appearance: none; width: 51px; height: 31px; min-height: 31px !important; flex: 0 0 51px; border-radius: 16px; background: rgba(120,120,128,.32); position: relative; transition: background .2s; margin: 0; cursor: pointer; }
    #msx .msx-raw input[type=checkbox]:not(.st-sw-in)::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s; }
    #msx .msx-raw input[type=checkbox]:not(.st-sw-in):checked { background: #2563eb; }
    #msx .msx-raw input[type=checkbox]:not(.st-sw-in):checked::after { transform: translateX(20px); }
    #msx .msx-raw input[type=checkbox]:not(.st-sw-in):focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
    #msx .msx-raw label:has(> input[type=checkbox]:not(.st-sw-in)) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; flex-direction: row-reverse; }
    @media (prefers-reduced-motion: reduce) { #msx .msx-raw input[type=checkbox]::after, #msx .msx-raw input[type=checkbox] { transition: none; } }
    /* Usage history: the fund-wallet button is near-black like every other primary. */
    #msx .msx-raw .bill-topup { background: var(--st-text, #0f172a) !important; color: #fff !important; min-height: 44px; }
    [data-theme="dark"] #msx .msx-raw .bill-topup { background: #f1f5f9 !important; color: #0b1018 !important; }
    /* ── v3 phone screens: Tenant screening wizard, Add funds, website preview ── */
    #msx .scr-card { padding: 18px 18px 16px; }
    #msx .scr-st { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--mx-ink); outline: none; }
    #msx .scr-ss { margin-top: 4px; font-size: 14px; color: var(--mx-muted); }
    #msx .scr-prog { height: 6px; border-radius: 99px; background: var(--mx-field); margin: 14px 0 4px; overflow: hidden; }
    #msx .scr-prog i { display: block; height: 100%; border-radius: 99px; background: var(--mx-ink); transition: width .25s ease; }
    #msx .scr-body { min-height: 280px; padding-top: 14px; }
    #msx .scr-body.fwd { animation: scrIn .24s ease-out both; }
    #msx .scr-body.back { animation: scrInBack .24s ease-out both; }
    @keyframes scrIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
    @keyframes scrInBack { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
    #msx .scr-p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--mx-ink); }
    #msx .scr-hint { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--mx-muted); }
    #msx .scr-p a, #msx .scr-hint a { color: var(--mx-ink); text-decoration: underline; padding: 14px 4px; margin: -14px -4px; }
    #msx .scr-err { min-height: 0; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--mx-err); }
    #msx .scr-err:empty { display: none; }
    #msx .scr-ol { margin: 0 0 4px; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: var(--mx-ink); }
    #msx .scr-ol li { padding: 3px 0 3px 4px; }
    #msx .scr-tpl { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--mx-field); color: var(--mx-ink); font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
    #msx .scr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 14px; border: 0; cursor: pointer; font: 600 15px/1 inherit; font-family: inherit; color: var(--mx-ink); background: var(--mx-field); box-shadow: 0 0 0 .5px rgba(26,26,46,.14) inset; }
    #msx .scr-btn.pri { background: var(--mx-ink); color: #fff; box-shadow: none; }
    [data-theme="dark"] #msx .scr-btn.pri { color: #11131f; }
    #msx .scr-btn[disabled] { opacity: .45; cursor: default; }
    #msx .scr-btn:focus-visible, #msx .scr-opt:focus-visible, #msx .scr-range:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mx-ring); }
    #msx .scr-nav { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
    #msx .scr-nav .scr-btn { flex: 1 1 0; min-width: 120px; }
    #msx .scr-wl { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
    #msx .scr-wl .mx-input { flex: 1 1 auto; min-width: 0; }
    #msx .scr-opts { display: grid; gap: 10px; margin-top: 4px; }
    #msx .scr-opt { text-align: left; display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; min-height: 44px; border-radius: 16px; border: 1.5px solid transparent; background: var(--mx-field); color: var(--mx-ink); font-family: inherit; cursor: pointer; }
    #msx .scr-opt b { display: block; font-size: 16px; font-weight: 600; }
    #msx .scr-opt span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--mx-muted); }
    #msx .scr-opt.on { border-color: var(--mx-ink); }
    #msx .scr-rg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 0; }
    #msx .scr-range { min-height: 52px; padding: 0 10px; border-radius: 16px; border: 1.5px solid transparent; background: var(--mx-field); color: var(--mx-ink); font: 600 16px/1.2 inherit; font-family: inherit; cursor: pointer; }
    #msx .scr-range.on { border-color: var(--mx-ink); }
    #msx .scr-range[disabled] { opacity: .5; }
    #msx .scr-found { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--mx-field); font-size: 14px; color: var(--mx-muted); }
    #msx .scr-found b { font-size: 16px; font-weight: 600; color: var(--mx-ink); }
    #msx .scr-cardline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(26,26,46,.1); }
    [data-theme="dark"] #msx .scr-cardline { border-top-color: rgba(255,255,255,.12); }
    #msx .scr-cardline .scr-btn { flex: 0 0 auto; white-space: nowrap; }
    #msx .scr-cl-t { font-size: 15.5px; font-weight: 600; color: var(--mx-ink); }
    #msx .scr-cl-t small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--mx-muted); }
    @media (prefers-reduced-motion: reduce) { #msx .scr-body.fwd, #msx .scr-body.back { animation: none; } #msx .scr-prog i { transition: none; } }
    /* My website preview: a small sample of the public page, in the brand colour. */
    #msx .wp { position: relative; margin: 0 20px; border-radius: 22px; overflow: hidden; background: #fff; color: #111827; box-shadow: 0 0 0 .5px rgba(26,26,46,.14), 0 10px 30px -18px rgba(26,26,46,.3); }
    #msx .wp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f3f9; }
    #msx .wp-dots { display: inline-flex; gap: 5px; } #msx .wp-dots i { width: 8px; height: 8px; border-radius: 50%; background: #cfd4e3; }
    #msx .wp-url { flex: 1; min-width: 0; padding: 4px 10px; border-radius: 99px; background: #fff; font-size: 12.5px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #msx .wp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid #eceef6; }
    #msx .wp-name { font-size: 16px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #msx .wp-logo { max-height: 30px; max-width: 150px; object-fit: contain; }
    #msx .wp-btn { flex: 0 0 auto; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
    #msx .wp-list { display: flex; gap: 12px; align-items: center; padding: 14px; }
    #msx .wp-img { width: 64px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #dfe4f2, #c9d1e8); flex: 0 0 auto; }
    #msx .wp-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #6b7280; } #msx .wp-info b { font-size: 14.5px; color: #111827; }
    #msx .wp-shim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: wpShim 4.5s ease-in-out infinite; }
    @keyframes wpShim { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
    @media (prefers-reduced-motion: reduce) { #msx .wp-shim { display: none; } }
    #msx .msx-raw .bill-seg-btn, #msx .msx-raw .bill-action, #msx .msx-raw .bill-sel, #msx .msx-raw .cs-btn { min-height: 44px !important; }
    #msx .msx-raw a[onclick], #msx .msx-raw a[href] { display: inline-flex; align-items: center; min-height: 44px; }
    /* Security sub-screens: one section per screen, title is already in the nav. */
    .msx-raw[data-focus] .settings-card:not([data-sec]) , .msx-raw[data-focus] [data-sec="note"] { display: none !important; }
    .msx-raw[data-focus="2fa"] [data-sec]:not([data-sec="2fa"]), .msx-raw[data-focus="pw"] [data-sec]:not([data-sec="pw"]),
    .msx-raw[data-focus="sessions"] [data-sec]:not([data-sec="sessions"]), .msx-raw[data-focus="log"] [data-sec]:not([data-sec="log"]) { display: none !important; }
    .msx-raw[data-focus] .settings-card-title { display: none !important; }
    .msx-raw[data-focus] .settings-card-head { padding: 0 4px 12px !important; }
    .msx-raw[data-focus] .settings-card-sub { margin-top: 0; }
    /* Primary actions here stay near-black — blue is for switches and the focus ring only. */
    .msx-raw .btn.btn-primary { background: var(--st-text, #0f172a) !important; border-color: transparent !important; color: #fff !important; width: 100%; justify-content: center; }
    [data-theme="dark"] .msx-raw .btn.btn-primary { color: #0b1018 !important; background: #f1f5f9 !important; }
    .msx-raw .settings-card-body { background: var(--st-card) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
    /* Hosted sub-pages (Link a spreadsheet, Add a company, A2P, the sheet
       drawers). Desktop markup on a phone: give it the full width, stack the
       rows that were laid out side by side, and stop the fixed widths. */
    /* .settings-subpage is absolutely positioned at z-40 to cover the desktop
       content pane. Moved into the mobile shell it kept doing that, and covered
       the nav bar — no back button, no way out. It flows inline here. */
    .msx-raw .settings-subpage {
      position: static !important; inset: auto !important; z-index: auto !important;
      height: auto !important; max-height: none !important; overflow: visible !important;
    }
    .msx-raw .settings-subpage,
    .msx-raw .settings-subpage-body { display: block; padding: 0; width: 100%; }
    .msx-raw .settings-subpage-head { padding: 0 0 10px; }
    .msx-raw .settings-subpage-title { font-size: 13px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--st-text-3, #8a92a4); }
    .msx-raw .modal, .msx-raw .modal-body, .msx-raw .lsx-card, .msx-raw .tmd-card {
      max-width: none !important; width: 100% !important; margin: 0 0 16px !important;
      border-radius: 12px; box-shadow: none;
    }
    .msx-raw .modal-head, .msx-raw .modal-foot, .msx-raw .modal-footer { padding-left: 0; padding-right: 0; }
    .msx-raw .tmd-grid-2, .msx-raw .lsx-grid, .msx-raw .form-row { display: block !important; }
    .msx-raw .tmd-grid-2 > *, .msx-raw .form-row > * { width: 100% !important; margin-bottom: 12px; }
    .msx-raw input:not([type=checkbox]):not([type=radio]),
    .msx-raw select, .msx-raw textarea { width: 100% !important; max-width: none !important; }
    .msx-raw .tmd-actions, .msx-raw .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .msx-raw .tmd-actions .btn, .msx-raw .modal-actions .btn { flex: 1 1 46%; justify-content: center; }
  }

  
  /* ══ MSX phone redesign (MOBILE.md) — layered on the shell above ═══════════
     Liquid-glass cards, round glass back button, equal-width tabs, 44px fields.
     Blue is used only on toggles and the focus ring. */
  @media (max-width: 820px) {
    #msx {
      --mx-ink: #1a1a2e; --mx-muted: #6b7080; --mx-field: rgba(26,26,46,.05); --mx-err: #b3361f;
      --mx-glass: rgba(255,255,255,.6); --mx-edge: inset 1.5px 1.5px 1px rgba(255,255,255,.95);
      --mx-ring: rgba(37,99,235,.28); --mx-off: #d5d8e3;
      font-family: "DM Sans", -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      background:
        radial-gradient(60% 38% at 12% 2%, rgba(120,150,255,.26), transparent 70%),
        radial-gradient(55% 34% at 96% 10%, rgba(190,150,255,.22), transparent 70%),
        #f4f5fb;
      color: var(--mx-ink); font-size: 16px;
    }
    #msx .msx-nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; box-shadow: none; }
    /* Reuven, 18 Oct 2026: light mode drops the lavender glass wash; Settings sits
       on the same flat soft cream as the brand bar and the rest of the app, with
       solid white cards. Dark unchanged. */
    html:not([data-theme="dark"]) #msx { background: var(--bg2); --mx-glass: #ffffff; }
    html[data-theme="dark"] #msx { background: var(--bg2); }
    #msx .msx-nav-bar { height: 48px; padding: 0 20px; }
    #msx .msx-back { width: 44px; height: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: 50%;
      color: var(--mx-ink); background: var(--mx-glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--mx-edge), 0 0 0 .5px rgba(26,26,46,.09); }
    #msx .msx-back i { width: 18px; height: 18px; }
    #msx .msx-x { width: 44px; height: 44px; background: var(--mx-glass); color: var(--mx-ink); box-shadow: var(--mx-edge), 0 0 0 .5px rgba(26,26,46,.09); }
    #msx .msx-x::after { inset: 0; }
    #msx .msx-saved { color: var(--mx-muted); font-size: 14px; }
    #msx .msx-saved .st-save-retry { min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--mx-ink); text-decoration: underline; }
    #page-settings.msx-on .settings-modal-card { border: 0 !important; box-shadow: none !important; }
    #msx .msx-large { background: transparent; color: var(--mx-ink); padding: calc(max(var(--msx-safe-top), 10px) + 4px) 20px 4px; }
    #msx .msx-large h1 { color: var(--mx-ink); }
    #msx .msx-large h1 { font-size: 32px; letter-spacing: -.025em; }
    #msx .msx-body { padding: 0 0 calc(40px + var(--msx-safe-bot)); }
    #msx .msx-search { position: sticky; top: 0; left: auto; right: auto; bottom: auto; margin: 8px 20px 12px; height: 48px; z-index: 2;
      background: var(--mx-glass); box-shadow: var(--mx-edge), 0 0 0 .5px rgba(26,26,46,.09), 0 6px 20px -10px rgba(26,26,46,.18); }
    #msx .msx-search input { font-size: 16px; }
    #msx .msx-search button { min-width: 44px; min-height: 44px; }
    #msx .mx-title { margin: 8px 20px 14px; font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; color: var(--mx-ink); }
    #msx .mx-title.long { font-size: 22px; }
    #msx .msx-sec { margin: 0 0 20px; }
    #msx .msx-h { padding: 0 36px 8px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mx-muted); }
    #msx .msx-foot { padding: 8px 36px 0; font-size: 14px; color: var(--mx-muted); }
    #msx .msx-card { margin: 0 20px; border-radius: 28px; background: var(--mx-glass); overflow: hidden;
      -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
      box-shadow: var(--mx-edge), 0 0 0 .5px rgba(26,26,46,.06), 0 10px 30px -18px rgba(26,26,46,.22); }
    #msx .msx-card.mx-pad { padding: 8px 18px 10px; }
    #msx .msx-row { min-height: 56px; padding: 8px 20px; }
    #msx .msx-row.home { min-height: 64px; }
    #msx .msx-row.home .msx-t { font-size: 17px; font-weight: 600; }
    #msx .msx-row.home .msx-s { font-size: 14px; -webkit-line-clamp: 1; }
    #msx .msx-t { font-size: 16px; color: var(--mx-ink); }
    #msx .msx-s { font-size: 14px; color: var(--mx-muted); }
    #msx .msx-chev { color: rgba(26,26,46,.35); }
    #msx .msx-sw { background: var(--mx-off); }
    #msx .msx-sw.on { background: #2563eb; }
    #msx .mx-tabs { display: flex; margin: 0 20px 16px; border-bottom: 1px solid rgba(26,26,46,.12); }
    #msx .mx-tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--mx-muted);
      border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #msx .mx-tab.on { color: var(--mx-ink); border-bottom-color: var(--mx-ink); font-weight: 600; }
    #msx .mx-field { padding: 10px 0 4px; }
    #msx .mx-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--mx-ink); }
    #msx .mx-input { display: block; width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; outline: 0;
      background: var(--mx-field); color: var(--mx-ink); font-family: inherit; font-size: 16px; line-height: 1.2; -webkit-appearance: none; appearance: none; caret-color: #2563eb;
      box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,26,46,.09); }
    #msx textarea.mx-input { height: auto; min-height: 96px; padding: 12px 14px; resize: none; line-height: 1.4; }
    #msx .mx-input:focus { background: #fff; box-shadow: 0 0 0 3px var(--mx-ring), 0 0 0 .5px rgba(26,26,46,.09); }
    #msx .mx-input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--mx-err); }
    #msx .mx-hint { margin-top: 6px; font-size: 14px; color: var(--mx-muted); }
    #msx .st-err { margin-top: 6px; font-size: 14px; color: var(--mx-err); }
    #msx .st-err:empty { display: none; }
    #msx .mx-photo { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
    #msx .mx-avatar { width: 72px; height: 72px; flex: none; border: 0; border-radius: 50%; background: #e1e4ef; color: var(--mx-ink); font-family: inherit; font-size: 26px; font-weight: 600; overflow: hidden; padding: 0; cursor: pointer; }
    #msx .mx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #msx .mx-photo-side { min-width: 0; flex: 1; }
    #msx .mx-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
    #msx .mx-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--mx-field); color: var(--mx-ink); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform .12s; }
    #msx .mx-btn:active { transform: scale(.97); }
    #msx .mx-photo .mx-btn { background: transparent; box-shadow: inset 0 0 0 1px var(--st-border, rgba(0,0,0,.12)); min-height: 40px; font-size: 14px; }
    #msx .mx-photo .mx-hint { font-size: 12.5px; margin-top: 8px; line-height: 1.4; }
    #msx button:focus-visible, #msx .msx-row:focus-visible { outline: 3px solid var(--mx-ring); outline-offset: 2px; }
    /* Dark follows the APP's own light/dark switch, never the phone's system setting. */
      [data-theme="dark"] #msx {
        --mx-ink: #e8eaf2; --mx-muted: rgba(225,228,242,.58); --mx-field: rgba(255,255,255,.1); --mx-err: #ff8a80;
        --mx-glass: rgba(255,255,255,.065); --mx-edge: inset 1.5px 1.5px 1px rgba(255,255,255,.16); --mx-off: rgba(255,255,255,.22);
        background:
          radial-gradient(60% 38% at 12% 2%, rgba(80,120,255,.2), transparent 70%),
          radial-gradient(55% 34% at 96% 10%, rgba(140,100,255,.18), transparent 70%),
          #1a1d2c;
      }
            [data-theme="dark"] #msx .msx-back, #msx .msx-x { box-shadow: var(--mx-edge), 0 0 0 .5px rgba(255,255,255,.12); }
      [data-theme="dark"] #msx .msx-card { box-shadow: var(--mx-edge), 0 0 0 .5px rgba(255,255,255,.08); }
      [data-theme="dark"] #msx .msx-chev { color: rgba(232,234,242,.4); }
      [data-theme="dark"] #msx .mx-tabs { border-bottom-color: rgba(255,255,255,.14); }
      [data-theme="dark"] #msx .mx-input { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.12), 0 0 0 .5px rgba(255,255,255,.12); }
      [data-theme="dark"] #msx .mx-input:focus { background: rgba(255,255,255,.16); }
      [data-theme="dark"] #msx .mx-avatar { background: rgba(255,255,255,.14); }
    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
      #msx { background: #f4f5fb; }
      #msx .msx-card, #msx .msx-back, #msx .msx-x, #msx .msx-search { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
      #msx .mx-input { background: #eceef6; }
    }
    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
      [data-theme="dark"] #msx { background: #1a1d2c; }
      [data-theme="dark"] #msx .msx-card, [data-theme="dark"] #msx .msx-back, [data-theme="dark"] #msx .msx-x, [data-theme="dark"] #msx .msx-search { background: #262a3d; }
      [data-theme="dark"] #msx .mx-input { background: #30344a; }
    }
    @media (prefers-reduced-motion: reduce) { #msx .mx-btn { transition: none; } }
  }

  /* Dark-theme extras the new shell needs on top of the existing --st-* set. */
  #page-settings { --st-glass: rgba(255,255,255,.72); --st-fill: rgba(120,120,128,.16); --st-track: rgba(120,120,128,.3); --st-text-3: #8a92a4; }
  [data-theme="dark"] #page-settings { --st-glass: rgba(23,32,53,.72); --st-fill: rgba(120,160,230,.14); --st-track: rgba(140,170,220,.28); --st-text-3: #6b7590; --st-green: #34d399; }


  /* ══ SETTINGS v3 — bubbles (handoff v3: README "Layout" + "Dark mode") ══
     One number: 16px. Page #faf9f6, white 16px-radius bubbles with a hairline ring.
     Scoped to #page-settings, appended last so it wins the cascade. */
  #page-settings { --st-page: #faf9f6; --st-bub: #ffffff; }
  [data-theme="dark"] #page-settings {
    --st-page: #141c2e; --st-bub: #1d2840; --st-surface: #1d2840; --st-body: #141c2e;
    --st-elevated: rgba(255,255,255,.1); --st-border: rgba(255,255,255,.1);
    --st-text: #e8eaf2; --st-text-2: rgba(225,228,242,.58); --st-text-muted: rgba(225,228,242,.58);
    --st-accent: #6f9bf0; color-scheme: dark;
  }
  #page-settings .settings-panels, #page-settings #settings-subpage { background: var(--st-page); align-self: stretch; }
  [data-theme="dark"] #page-settings .settings-panels, [data-theme="dark"] #page-settings #settings-subpage {
    background: radial-gradient(520px 380px at 90% -4%, rgba(70,115,235,.22), transparent 62%),
                radial-gradient(460px 380px at -12% 32%, rgba(130,115,235,.16), transparent 62%),
                radial-gradient(520px 420px at 105% 82%, rgba(70,150,215,.15), transparent 62%), #141c2e;
  }
  #page-settings .settings-shell { padding-bottom: 0; }
  #page-settings .settings-panel { padding-top: 0; }
  /* Tab row: 8px from the top, 34px tall, 107px tabs, 16px side margins, 16px to the first bubble */
  #page-settings .settings-panel > .settings-merge-strip.st-tabs { margin: 8px 16px 16px; padding: 0; gap: 8px; height: 34px; min-height: 34px; box-sizing: border-box; }
  #page-settings .settings-merge-strip.st-tabs .settings-merge-pill { flex: 0 0 auto; min-width: 107px; padding: 0 10px; box-sizing: border-box; white-space: nowrap; }
  /* The bubble */
  #page-settings .st2 .st-sec, #page-settings .lp-bub,
  #page-settings #sp-security .settings-card, #page-settings #sp-notifications .settings-card {
    background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border);
    padding: 16px; margin: 0 16px 16px; box-sizing: border-box;
  }
  #page-settings .settings-panel > div.st2.st2 { padding: 0; }
  #page-settings .st2 .st-sec { border-top: 0; }
  #page-settings .st2 .st-sec:first-of-type, #page-settings .st2 .st-h1 + .st-sec { padding-top: 16px; }
  #page-settings .st2 .st-sec > :first-child, #page-settings #sp-security .settings-card-body > :first-child { margin-top: 0; }
  #page-settings .st2 .st-sec > :last-child, #page-settings #sp-security .settings-card-body > :last-child,
  #page-settings #sp-notifications .settings-card-body > :last-child { margin-bottom: 0; }
  [data-theme="dark"] #page-settings .st2 .st-sec, [data-theme="dark"] #page-settings .lp-bub,
  [data-theme="dark"] #page-settings #sp-security .settings-card, [data-theme="dark"] #page-settings #sp-notifications .settings-card {
    background: #1d2840;
    box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2);
  }
  /* Titles live inside the bubble */
  #page-settings .lp-ph1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--st-text); margin: 0 0 16px; }
  #page-settings .lp-ph2 { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--st-text); margin: -12px 0 16px; }
  #page-settings .settings-card-head { display: block; padding: 0; border: 0; margin: 0 0 16px; }
  #page-settings #sp-security .settings-card-icon, #page-settings #sp-notifications .settings-card-icon { display: none; }
  #page-settings #sp-security .settings-card-title, #page-settings #sp-notifications .settings-card-title { font-size: 15px; font-weight: 700; color: var(--st-text); }
  #page-settings #sp-security .settings-card-sub, #page-settings #sp-notifications .settings-card-sub { font-size: 13px; font-weight: 400; color: var(--st-text-muted); margin-top: 3px; }
  #page-settings #sp-security .settings-card-body, #page-settings #sp-notifications .settings-card-body { padding: 0; }
  /* ── Pace: tabs + white bubbles (v3 handoff) ── */
  #page-settings .sec-2fa-flow { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--st-border); max-width: 420px; }
  #page-settings .sec-2fa-flow h2 { font-size: 14px !important; font-weight: 600 !important; margin: 0 0 4px !important; color: var(--st-text) !important; }
  #page-settings .sec-2fa-flow p { font-size: 13px !important; color: var(--st-text-muted) !important; margin: 0 0 12px !important; }
  #page-settings .sec-2fa-flow input { font-size: 14px !important; padding: 9px 12px !important; border-radius: 10px !important; border: 1px solid var(--st-border) !important; }
  #page-settings .sec-2fa-flow input#tf-code { letter-spacing: 6px !important; font-size: 18px !important; }
  #page-settings .sec-2fa-flow button { width: auto !important; padding: 9px 18px !important; border-radius: 10px !important; font-size: 13px !important; }
  #page-settings .sec-2fa-flow button[id="tf-go"] { margin-bottom: 4px; }
  #page-settings .sec-2fa-flow > div[style*="text-align:center"] { text-align: left !important; flex-direction: row !important; gap: 16px !important; margin-top: 10px !important; flex-wrap: wrap; }
  #page-settings #sp-ai-assistant .pc-hide { display: none !important; }
  #page-settings #sp-ai-assistant #missedcall-autotext-body > .pc-row { border-top: 1px solid var(--st-border); padding: 14px 0; }
  #page-settings #sp-ai-assistant .pc-qsub { font-size: 13px; line-height: 1.5; color: var(--st-text-muted); margin: -8px 0 8px; }
  #page-settings #sp-ai-assistant .pc-always { font-size: 12.5px; line-height: 1.5; color: var(--st-text-muted); padding-top: 14px; }
  #page-settings #sp-ai-assistant .pc-card .settings-card-icon { display: none; }
  #page-settings #sp-ai-assistant .pc-card .settings-card-head { margin: 0 0 12px; }
  #page-settings #sp-ai-assistant .pc-card .settings-card-title { font-size: 15px; font-weight: 700; color: var(--st-text); }
  #page-settings #sp-ai-assistant .pc-card .settings-card-sub { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--st-text-muted); margin-top: 3px; max-width: none; }
  #page-settings #sp-ai-assistant .pc-card .settings-card-body { padding: 0; }
  #page-settings #sp-ai-assistant .pc-formwrap { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  #page-settings #sp-ai-assistant .pc-formwrap .settings-card-body { padding: 0; }
  #page-settings #sp-ai-assistant .pc-bub, #page-settings #sp-ai-assistant .pc-card { background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border); padding: 16px; margin: 0 16px 16px; box-sizing: border-box; }
  [data-theme="dark"] #page-settings #sp-ai-assistant .pc-bub, [data-theme="dark"] #page-settings #sp-ai-assistant .pc-card { background: #1d2840; box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2); }
  #page-settings #sp-ai-assistant .pc-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--st-text); margin: 0 0 12px; }
  #page-settings #sp-ai-assistant .pc-bub > .lp-ph1 { margin: 0 0 16px; }
  #page-settings #sp-ai-assistant .pc-bub > .lp-ph2 { margin: -12px 0 12px; }
  /* A row: label + hint on the left, the control on the right, hairline between rows */
  #page-settings #sp-ai-assistant .pc-row { position: relative; padding: 14px 0; border-top: 1px solid var(--st-border); }
  #page-settings #sp-ai-assistant .pc-lead + .pc-row, #page-settings #sp-ai-assistant .lp-ph2 + .pc-row, #page-settings #sp-ai-assistant .pc-title + .pc-row { border-top: 0; padding-top: 4px; }
  #page-settings #sp-ai-assistant .pc-row:last-child { padding-bottom: 0; }
  #page-settings #sp-ai-assistant .form-label { text-transform: none; letter-spacing: 0; }
  #page-settings #sp-ai-assistant .pc-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #page-settings #sp-ai-assistant .pc-more { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--st-accent); cursor: pointer; }
  #page-settings #sp-ai-assistant .pc-row > .form-label { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; margin: 0; font-size: 13.5px; font-weight: 400; color: var(--st-text); cursor: pointer; }
  #page-settings #sp-ai-assistant .pc-row > .form-label .toggle-switch { flex: 0 0 auto; }
  #page-settings #sp-ai-assistant .pc-row > div:not(.form-label) { font-size: 12.5px !important; line-height: 1.55 !important; color: var(--st-text-muted) !important; margin-top: 2px !important; padding-right: 64px; }
  #page-settings #sp-ai-assistant .pc-row .form-label span[style*="text3"] { color: var(--st-text-muted); }
  #page-settings #sp-ai-assistant .pc-enabled > div:not(.form-label) { margin-top: 2px !important; }
  #page-settings #sp-ai-assistant .pc-intro > .form-label { display: block; margin: 0 0 4px; font-size: 13.5px; font-weight: 400; color: var(--st-text); }
  #page-settings #sp-ai-assistant .pc-intro > div:not(#ai-prequal-toggles) { font-size: 12.5px !important; color: var(--st-text-muted) !important; margin: 0 0 8px !important; }
  #page-settings #sp-ai-assistant .pc-row:first-child { border-top: 0; }
  /* Pace › General: a row that opens its own panel (Unanswered renters). */
  #page-settings #sp-ai-assistant .pc-row-go { cursor: pointer; }
  #page-settings #sp-ai-assistant .pc-row-go:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 8px; }
  #page-settings #sp-ai-assistant .pc-go-v { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 12.5px; color: var(--st-text-muted); }
  #page-settings #sp-ai-assistant .pc-go-v svg { width: 16px; height: 16px; }
  #page-settings .st2.dbs .dbs-opt { width: 100%; text-align: left; }
  #page-settings .dbs-check { width: 16px; height: 16px; color: var(--st-accent); flex: 0 0 auto; }
  #page-settings .dbs-msg { font-size: 12.5px; color: var(--st-text-muted); margin-top: 8px; }
  #page-settings .dbs-msg.err { color: var(--danger); }
  #page-settings #sp-ai-assistant .pc-row > .form-label[style*="color:var(--text2)"] { cursor: default; color: var(--st-text-muted) !important; }
  #page-settings #sp-ai-assistant .pc-sec { padding: 14px 0; border-top: 1px solid var(--st-border); }
  #page-settings #sp-ai-assistant .pc-title + .pc-sec { border-top: 0; padding-top: 0; }
  #page-settings #sp-ai-assistant .pc-sec:last-child { padding-bottom: 0; }
  #page-settings #sp-ai-assistant .pc-sec > .form-label, #page-settings #sp-ai-assistant .pc-bub > .form-label { display: block; font-size: 13.5px; font-weight: 400; color: var(--st-text); margin: 0 0 6px; }
  #page-settings #sp-ai-assistant .pc-bub details { border: 0 !important; border-radius: 0 !important; }
  #page-settings #sp-ai-assistant .pc-bub details > summary { background: none !important; padding: 0 !important; font-size: 13.5px !important; font-weight: 400 !important; color: var(--st-text) !important; }
  #page-settings #sp-ai-assistant .pc-bub details[open] > summary { margin-bottom: 10px; }
  #page-settings #sp-ai-assistant .pc-bub details > div { padding: 0 !important; }
  #page-settings #sp-ai-assistant .pc-body > div[style*="justify-content:flex-end"] { margin: 0 16px 16px; }
  #page-settings #sp-ai-assistant .pc-body > div[style*="border-top"] { margin: 0 16px 16px; border-top: 0 !important; padding-top: 0 !important; }
  #page-settings #sp-ai-assistant .pc-body > div[style*="border-top"] { font-size: 12.5px !important; color: var(--st-text-muted) !important; }
  #page-settings #sp-ai-assistant .pc-bub div[style*="border:1px solid var(--border)"] { background: var(--st-elevated) !important; border: 0 !important; border-radius: 10px !important; }
  #page-settings #sp-ai-assistant .pc-bub .form-input { border-radius: 10px; }
  /* Profile: photo + name bubble */
  #page-settings .lp-top .st-photo { gap: 20px; }
  #page-settings .lp-top .st-avatar { width: 84px; height: 84px; font-size: 28px; }
  #page-settings .lp-role { font-size: 13px; color: var(--st-text-muted); }
  #page-settings .lp-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--st-text); }
  #page-settings .lp-top .st-photo-actions .st-btn { box-shadow: none; background: none; padding: 0; height: auto; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--st-text-muted); }
  #page-settings .lp-top .st-photo-actions .st-btn:hover { color: var(--st-text); background: none; }
  #page-settings .lp-top .st-hint { display: none; }
  /* Security */
  #page-settings #sp-security .lp-pw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #page-settings #sp-security .lp-pw label { display: block; font-size: 12.5px; font-weight: 600; color: var(--st-text); margin: 0 0 6px; }
  #page-settings #sp-security .lp-pw input { display: block; width: 100%; height: 38px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 10px;
    background: var(--st-bub); color: var(--st-text); font: inherit; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--st-border); outline: none; }
  #page-settings #sp-security .lp-pw input::placeholder { color: var(--st-text-muted); }
  #page-settings #sp-security .lp-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--st-text);
    font: inherit; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--st-border); cursor: pointer; }
  #page-settings #sp-security .lp-btn:hover { background: var(--st-elevated); }
  #page-settings #sp-security .lp-btn.lp-full { display: flex; align-items: center; justify-content: center; width: 100%; }
  #page-settings #sp-security .lp-btn.lp-full.lp-start { justify-content: flex-start; padding: 0 14px; }
  #page-settings #sp-security .lp-btn.lp-danger { color: #b3361f; }
  [data-theme="dark"] #page-settings #sp-security .lp-btn.lp-danger { color: #ff8a80; }
  #page-settings #sp-security .lp-note { font-size: 12.5px; line-height: 1.6; color: var(--st-text-muted); margin: 8px 0 0; }
  #page-settings #sp-security .lp-pwmsg { margin-top: 12px; }
  /* Notifications: rows are plain, hairlines only between rows */
  #page-settings #sp-notifications .lp-sub { font-size: 13px; font-weight: 700; color: var(--st-text); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
  #page-settings #sp-notifications .lp-sub span { font-weight: 400; color: var(--st-text-muted); }
  #page-settings #sp-notifications .lp-group { margin-top: 24px; }
  #page-settings #sp-notifications .pm-notif-row { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; min-height: 49px; border-top: 1px solid var(--st-border); }
  #page-settings #sp-notifications .pm-notif-row:first-of-type { border-top: 0; }
  #page-settings #sp-notifications .pm-notif-row span { color: var(--st-text); }
  #page-settings #sp-notifications .pm-notif-row strong { font-weight: 400; color: inherit; }
  /* v3 design: plain rows, not tinted boxes; sentence-case field labels; hairline only between rows. */
  #page-settings #sp-notifications .set-toggle-row { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; min-height: 44px; }
  #page-settings #sp-notifications .set-toggle-row:hover { background: none; }
  #page-settings #sp-notifications .trs-note + .set-toggle-row,
  #page-settings #sp-notifications .set-toggle-row + .set-toggle-row { border-top: 1px solid var(--st-border); min-height: 57px; }
  #page-settings #sp-notifications .form-label { font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--st-text); margin-bottom: 8px; }
  #page-settings #sp-notifications .trs-note { font-size: 12.5px; color: var(--st-text-muted); margin: 16px 0 8px; }
  #page-settings .st2 .st-sec-title { margin: 0 0 16px; }
  #page-settings .st2 .st-sec-title + .st-sec-desc { margin: -8px 0 16px; }
  #page-settings #sp-security-body, #page-settings #sp-notifications-body { padding: 0; }
  #page-settings #sp-security .settings-card, #page-settings #sp-notifications .settings-card { margin-left: 16px; margin-right: 16px; }
  /* Dark inputs */
  [data-theme="dark"] #page-settings .st2 .st-input, [data-theme="dark"] #page-settings #sp-security .lp-pw input, [data-theme="dark"] #page-settings #sp-notifications .form-input {
    background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.07) 100%); color: #e8eaf2; border: 0;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.18), 0 0 0 .5px rgba(255,255,255,.12);
  }
  
  [data-theme="dark"] #page-settings .st2 select.st-input, [data-theme="dark"] #page-settings #sp-notifications select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a9b3c9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.07) 100%);
    background-repeat: no-repeat, no-repeat; background-position: right 12px center, 0 0; background-size: 12px 12px, 100% 100%;
  }
  [data-theme="dark"] #page-settings .st2 select.st-input option { background: #1b2540; color: #e8eaf2; }
  /* Stage 2a: grids inside bubbles use the same 16px rhythm */
  #page-settings .st2 .st-sec .st-grid { gap: 16px 24px; }
  #page-settings .st2 .st-sec .st-grid-3 { gap: 16px 24px; margin-top: 16px !important; }
  #page-settings .st2 .st-sec .st-grid + .st-grid { margin-top: 16px !important; }
  #page-settings .st2 .st-sec .st-drop { margin: 0 0 16px; }
  #page-settings .st2 .st-sec .st-label { font-size: 12.5px; font-weight: 600; }
  
  #page-settings #sp-business-hours .st-day { padding: 8px 0; }
  #page-settings #sp-business-hours .st-day-name { font-weight: 500; }
  #page-settings #sp-business-hours #business-hours-body .st-field { margin-bottom: 8px; }
  #page-settings #sp-business-hours #vacation-autoreply-body .st-row { padding-left: 0; padding-right: 0; }
  /* v3 design: the day's switch leads the row, Add hours / Copy to all days are quiet text links,
     and the time zone label sits beside its box. */
  #page-settings #sp-business-hours .st-day .st-switch { order: -1; }
  #page-settings #sp-business-hours .st-day-name { flex-basis: 96px; }
  #page-settings #sp-business-hours .st-slot .st-btn { height: 38px; padding: 0 6px; border: 0; background: none; box-shadow: none; color: var(--st-text-muted); font-size: 13px; font-weight: 400; }
  #page-settings #sp-business-hours .st-slot .st-btn:hover { color: var(--st-text); background: none; }
  #page-settings #sp-business-hours #business-hours-body > .st-field:first-child { display: flex; align-items: center; gap: 12px; max-width: none !important; }
  #page-settings #sp-business-hours #business-hours-body > .st-field:first-child .st-label { margin: 0; }
  #page-settings #sp-business-hours #bh-tz { width: 300px; }
  /* Company logo: a picture placeholder, a title, the hint, then Upload. */
  #page-settings #sp-general .st-logo { width: 122px; height: 96px; background: color-mix(in srgb, var(--st-accent) 8%, var(--st-surface)); box-shadow: inset 0 0 0 1px var(--st-border); }
  #page-settings #sp-general .st-logo-ph { color: var(--st-text-muted); }
  #page-settings #sp-general .st-logo-title { font-size: 13.5px; font-weight: 600; color: var(--st-text); margin: 2px 0 4px; }
  #page-settings #sp-general .st-drop .st-hint { margin: 0 0 10px; }
  /* E-sign (v3): a read-only page — one bubble with the short How it works. */
  #page-settings #sp-esign > .st2 { padding-top: 16px; }
  #page-settings #sp-esign .esg-sel { flex: 0 0 auto; width: 140px; }
  #page-settings #sp-esign .esg-text { flex: 0 0 auto; width: 260px; max-width: 50%; }
  #page-settings #sp-esign .esg-logo { display: inline-flex; align-items: center; justify-content: center; height: 32px; max-width: 96px; padding: 4px 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--st-border); background: var(--st-bub); box-sizing: border-box; }
  #page-settings #sp-esign .esg-logo img { display: block; max-height: 24px; max-width: 80px; object-fit: contain; }
  #page-settings #sp-esign .st-row-hint .st-link { font-size: inherit; font-weight: 400; color: var(--st-accent); }
  #page-settings #sp-esign .st-grid { gap: 16px 24px; }
  #page-settings #sp-esign .cl-reset { margin-top: 16px; }
  #page-settings #sp-esign #esign-load-err { margin: -8px 0 8px; }
  [data-theme="dark"] #page-settings #sp-esign .st-color { background: transparent; box-shadow: inset 0 0 0 1px var(--st-border); }
  #page-settings #sp-esign #esign-set-body { min-height: 124px; }
  #page-settings :is(#sp-esign, #gmail-page, #sp-email, #dbs-page, #pam-page, #sp-twilio, #sp-calendar, #sp-ai-assistant, #sp-notifications, #sp-lease-pdf, #sp-invoicing, #sp-website) .esg-how p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--st-text-muted); }
  #page-settings :is(#sp-esign, #gmail-page, #sp-email, #dbs-page, #pam-page, #sp-twilio, #sp-calendar, #sp-ai-assistant, #sp-notifications, #sp-lease-pdf, #sp-invoicing, #sp-website) .esg-how p:last-child { margin-bottom: 0; }
  #page-settings :is(#sp-esign, #gmail-page, #sp-email, #dbs-page, #pam-page, #sp-twilio, #sp-calendar, #sp-ai-assistant, #sp-notifications, #sp-lease-pdf, #sp-invoicing, #sp-website) .esg-how b { font-weight: 600; color: var(--st-text); }
  /* Messaging > Email: a status pill at the top right of the Sending address group — green when
     Gmail is connected, red when not (the one colour the owner asked for). */
  #page-settings #sp-email .em-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #page-settings #sp-email .em-head .gm-pill { margin: -2px 0; }   /* the 26px pill must not make the group taller than WhatsApp's */
  #page-settings #sp-email .settings-card-body > .st-row:first-child { border-top: 0; }
  #page-settings #sp-email .st-row.ro { cursor: default; }
  #page-settings #sp-email .st-row.ro:hover { background: none; box-shadow: none; }
  #page-settings #sp-email .st-row .em-reply { width: 280px; flex: 0 0 auto; }
  #page-settings #sp-email .em-chev { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  #page-settings #sp-email .em-chev i, #page-settings #sp-email .em-chev svg { width: 16px; height: 16px; color: var(--st-text-muted); }
  #page-settings #msx .em-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #page-settings #msx .em-h .gm-pill { height: 24px; margin: -4px 0; font-size: 12px; letter-spacing: 0; text-transform: none; }   /* the header line keeps its own height */
  #page-settings .gm-pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  #page-settings .gm-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent), 0 0 8px currentColor; }
  #page-settings .gm-pill.is-on { color: #15803d; background: color-mix(in srgb, #22c55e 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 35%, transparent), 0 0 14px color-mix(in srgb, #22c55e 22%, transparent); }
  #page-settings .gm-pill.is-off { color: #b91c1c; background: color-mix(in srgb, #ef4444 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 32%, transparent), 0 0 14px color-mix(in srgb, #ef4444 18%, transparent); }
  [data-theme="dark"] #page-settings .gm-pill.is-on { color: #4ade80; }
  [data-theme="dark"] #page-settings .gm-pill.is-off { color: #f87171; }
  #page-settings .st-how { border-top: 1px solid var(--st-border); padding: 12px 0 4px; margin-top: 4px; }
  #page-settings .st-how .st-how-h { display: block; margin: 0 0 8px; }
  /* Connect Gmail (v3): the E-sign page's pieces in the sub-page host. No inner title strip,
     the same 16px bubble inset as a panel, rows with the value on the right. */
  #page-settings .settings-subpage-body > #gmail-page.st2 { padding: 16px 0 24px; }
  #page-settings .settings-subpage-body > #dbs-page.st2, #page-settings .settings-subpage-body > #pam-page.st2 { padding: 16px 0 24px; }
  #page-settings :is(#dbs-page, #pam-page) .st-row { border-top: 1px solid var(--st-border); }
  #page-settings #dbs-page .st-sec-desc + .st-row, #page-settings #dbs-page .st-sec-desc + [role="radiogroup"] > .st-row:first-child { border-top: 0; }
  #page-settings :is(#dbs-page, #pam-page) div.st-row { cursor: default; }
  #page-settings #dbs-page button.st-row[disabled] { opacity: .5; cursor: default; }
  #page-settings #gmail-page .st-row, #page-settings #gmail-page .st-row:first-of-type { border-top: 1px solid var(--st-border); }
  #page-settings #gmail-page .st-sec-title + .st-row, #page-settings #gmail-page .st-sec-desc + .st-row, #page-settings #gmail-page .st-err + .st-row { border-top: 0; }
  #page-settings #gmail-page div.st-row { cursor: default; }
  #page-settings #gmail-page .st-row-go { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-settings #gmail-page button.st-row[disabled] { opacity: .5; cursor: default; }
  #page-settings #gmail-page .gm-act { margin-top: 16px; }

  /* Email signature check (Connect Gmail > Email signature). Greys only; fix steps are plain text. */
  #page-settings .dns-fix { padding: 4px 0 4px; }
  #page-settings .st2 .dns-fix { border-top: 1px solid var(--st-border); padding-top: 12px; }
  #page-settings .dns-why { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--st-text); }
  #page-settings .dns-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--st-text-muted); }
  #page-settings .dns-ol { margin: 0 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--st-text); }
  #page-settings .dns-ol li { margin: 0 0 4px; }
  #page-settings .dns-rec { position: relative; display: grid; gap: 8px; margin: 8px 0 4px; padding: 12px; background: var(--st-elevated); border-radius: 10px; }
  #page-settings .dns-f { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: baseline; min-width: 0; }
  #page-settings .dns-fl { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-text-muted); }
  #page-settings .dns-fv { font-size: 13px; color: var(--st-text); min-width: 0; overflow-wrap: anywhere; user-select: all; }
  #page-settings .dns-fv.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
  #page-settings .dns-copy { justify-self: start; height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--st-text); background: transparent; border: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--st-border); cursor: pointer; }
  #page-settings .dns-s { display: block; -webkit-line-clamp: unset; overflow: visible; }
  #page-settings #dns-page .gm-act { margin-top: 16px; }
  #page-settings #gmail-page #dns-row-state { max-width: none; overflow: visible; text-overflow: clip; }
  html[data-theme="dark"] #page-settings #dns-page .st-btn-primary { background: var(--accent); color: #0b1018; box-shadow: none; }
  html[data-theme="dark"] #page-settings #dns-page .st-btn-primary:hover { background: var(--accent); opacity: .9; }
  #page-settings .dns-act { margin: 0 16px 24px; }
  #page-settings .dns-act .msx-primary { width: 100%; }
  #page-settings #dns-page .msx-fix-pad { padding: 0 16px; }
  #page-settings #dns-page .msx-card .dns-fix { padding: 12px 16px 16px; border-top: 1px solid var(--st-border); }
  #page-settings #gmail-page .st-confirm { margin-top: 0; padding-bottom: 8px; }
  
  /* Stage 2b: Team members */
  #page-settings #sp-users .tl-rule { height: 1px; background: var(--st-border); margin: 16px 0; }
  #page-settings #sp-users .tl-bar { margin-top: 16px; }
  #page-settings #sp-users .st-sec-title + .st-sec-desc { margin-top: -10px; }
  #page-settings #sp-users .st-people { margin: 0; }
  #page-settings #sp-users .st-people-group { padding: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--st-text); }
  #page-settings #sp-users .tl-cnt { font-weight: 400; color: var(--st-text-muted); }
  #page-settings #sp-users .tl-u { padding: 14px 0; }
  #page-settings #sp-users .tl-grp .tl-u:last-child { padding-bottom: 0; }
  #page-settings #sp-users .tl-grp .st-empty { padding: 0; }
  
  /* Stage 2c: Permissions */
  #page-settings #perm-root .pm-head .st-sec-title { font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; }
  #page-settings #perm-root .pm-head .st-sec-desc { margin: 0; }
  #page-settings #perm-root .pm-top { margin-top: 16px; }
  #page-settings #perm-root .pm-note { margin-top: 8px; }
  #page-settings #perm-root .pm-table { display: block; }
  #page-settings #perm-root .pm-grp { margin-top: 0; }
  #page-settings #perm-root .pm-gh { padding-bottom: 8px; }
  #page-settings #perm-root .pm-row:last-child { min-height: 44px; }
  #page-settings #perm-root .pm-cb { width: 16px; height: 16px; border-radius: 4px; }
  #page-settings #perm-root .pm-cb svg { width: 11px; height: 11px; }
  #page-settings #perm-root .pm-col { font-weight: 700; }
  #page-settings #perm-root .pm-row { min-height: 44px; }
  
  /* Stage 2d: Clients — design handoff v3 (list + client page, Details / Documents / Spreadsheets).
     One 16px rhythm; inputs 38px / r10; tabs 34px with a 2px underline; hairlines var(--st-border).
     Colours are all --st-* tokens, so light and dark both come from the same rules. */
  #page-settings #sp-mgmt .st2 { padding-top: 16px; }
  #page-settings #sp-mgmt #mgmt-detail-view { padding-top: 8px; }
  /* Reuven, 19 Oct: the bubble runs to the bottom of the panel, no dead space under it.
     The panel is already a flex column that fills the frame; the open view and its last
     bubble grow into it. Every px above (16 padding, 16 margins, 38 inputs, 34 tabs) is unchanged. */
  #page-settings #sp-mgmt.settings-panel { flex: 1 0 auto; }
  #page-settings #sp-mgmt > #mgmt-list-view, #page-settings #sp-mgmt > #mgmt-detail-view { flex: 1 0 auto; display: flex; flex-direction: column; }
  #page-settings #sp-mgmt > #mgmt-list-view[style*="none"], #page-settings #sp-mgmt > #mgmt-detail-view[style*="none"] { display: none !important; }
  #page-settings #sp-mgmt > #mgmt-list-view > .st-sec:last-child, #page-settings #sp-mgmt > #mgmt-detail-view > .st-sec:last-child { flex: 1 0 auto; }
  #page-settings #sp-mgmt .lp-ph1 { margin-top: 13px; }
  #page-settings #sp-mgmt .lp-ph1 + .st-sec-desc { margin: -12px 0 0; line-height: 1.5; max-width: 640px; }
  #page-settings #sp-mgmt .mg-top { margin: 16px 0 0; }
  #page-settings #sp-mgmt .tl-search .st-input { padding-left: 12px; }
  #page-settings #sp-mgmt .tl-bar .st-btn, #page-settings #sp-mgmt .mg-add .st-btn, #page-settings #sp-mgmt .mgd2-dh .st-btn, #page-settings #sp-mgmt .mgd2-rep { height: 38px; padding: 0 16px; border-radius: 10px; flex: none; }
  #page-settings #sp-mgmt .mg-add { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
  #page-settings #sp-mgmt .mg-add .st-input { flex: 1; min-width: 0; }
  #page-settings #sp-mgmt .mg-quiet { box-shadow: none; padding: 0 2px; height: auto; color: var(--st-text-muted); }
  #page-settings #sp-mgmt .mg-quiet:hover { background: none; color: var(--st-text); text-decoration: underline; text-underline-offset: 3px; }
  #page-settings #sp-mgmt .mg-err { font-size: 12.5px; color: #b3361f; margin-top: 8px; line-height: 17px; }
  #page-settings #sp-mgmt .mg-err:empty { display: none; }
  #page-settings #sp-mgmt .mg-list { margin: 0; }
  #page-settings #sp-mgmt .mg-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; box-sizing: border-box; padding: 12px 0; cursor: pointer; border-top: 1px solid var(--st-border); outline: 0; border-radius: 8px; transition: background .13s, box-shadow .13s; }
  #page-settings #sp-mgmt .mg-row:hover, #page-settings #sp-mgmt .mg-row:focus-visible { background: var(--st-elevated); box-shadow: -10px 0 0 var(--st-elevated), 10px 0 0 var(--st-elevated); }
  #page-settings #sp-mgmt .mg-row:hover .mg-nm { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  #page-settings #sp-mgmt .mg-row:focus-visible { outline: 2px solid var(--st-text); outline-offset: 2px; }
  #page-settings #sp-mgmt .mg-who { min-width: 0; display: flex; flex-direction: column; }
  #page-settings #sp-mgmt .mg-nm { font-size: 13.5px; font-weight: 400; color: var(--st-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-settings #sp-mgmt .mg-em { font-size: 12.5px; color: var(--st-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; line-height: 1.45; }
  #page-settings #sp-mgmt .mg-em:empty { display: none; }
  #page-settings #sp-mgmt .mg-ct { flex: none; min-width: 96px; text-align: right; font-size: 13.5px; color: var(--st-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  #page-settings #sp-mgmt .st-empty { padding: 28px 0; border-top: 1px solid var(--st-border); font-size: 13.5px; color: var(--st-text-muted); text-wrap: pretty; }

  /* Client page */
  #page-settings #sp-mgmt .mgd2-bk { display: flex; align-items: center; width: auto; height: 34px; margin: 0 16px 16px; padding: 0; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--st-border); color: var(--st-text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
  #page-settings #sp-mgmt .mgd2-bk:hover { color: var(--st-text); text-decoration: underline; text-underline-offset: 3px; }
  #page-settings #sp-mgmt .mgd2-bk:focus-visible, #page-settings #sp-mgmt .mgd2-tab:focus-visible, #page-settings #sp-mgmt .mgd2-lk:focus-visible, #page-settings #sp-mgmt .mgd2-row.go:focus-visible { outline: 2px solid var(--st-text); outline-offset: 2px; border-radius: 8px; }
  #page-settings #sp-mgmt .mgd2-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
  #page-settings #sp-mgmt .mgd2-hl { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  #page-settings #sp-mgmt .mgd2-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--st-text); overflow-wrap: anywhere; }
  #page-settings #sp-mgmt .mgd2-meta { font-size: 12.5px; color: var(--st-text-muted); }
  #page-settings #sp-mgmt .mgd2-sv { font-size: 12.5px; color: var(--st-text-muted); min-height: 17px; line-height: 17px; margin-top: -2px; }
  #page-settings #sp-mgmt .mgd2-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 0 0 16px; box-shadow: inset 0 -1px 0 var(--st-border); }
  #page-settings #sp-mgmt .mgd2-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--st-text-muted); font: inherit; font-weight: 500; font-size: 13px; cursor: pointer; }
  #page-settings #sp-mgmt .mgd2-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--st-text); transform: scaleX(0); transition: transform .18s; }
  #page-settings #sp-mgmt .mgd2-tab.on, #page-settings #sp-mgmt .mgd2-tab:hover { color: var(--st-text); }
  #page-settings #sp-mgmt .mgd2-tab.on::after { transform: scaleX(1); }
  #page-settings #sp-mgmt .mgd2-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  #page-settings #sp-mgmt .mgd2-g .wide { grid-column: 1 / -1; }
  #page-settings #sp-mgmt .mgd2-f { min-width: 0; }
  #page-settings #sp-mgmt .mgd2-l { display: block; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--st-text); margin: 0 0 6px; }
  #page-settings #sp-mgmt .mgd2-hint { font-size: 12.5px; color: var(--st-text-muted); line-height: 1.45; margin-top: 6px; }
  #page-settings #sp-mgmt .mgd2-sec { margin: 24px 0 10px; padding-top: 22px; border-top: 1px solid var(--st-border); }
  #page-settings #sp-mgmt .mgd2-st { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--st-text); }
  #page-settings #sp-mgmt .mgd2-ss { font-size: 13px; color: var(--st-text-muted); margin-top: 3px; line-height: 1.5; }
  #page-settings #sp-mgmt .mgd2-lk { display: inline-flex; padding: 0; border: 0; background: none; color: var(--st-text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
  #page-settings #sp-mgmt .mgd2-lk:hover { color: var(--st-text); text-decoration: underline; text-underline-offset: 3px; }
  #page-settings #sp-mgmt .mgd2-lk.arm, #page-settings #sp-mgmt .mgd2-lk.red { color: #b3361f; }
  #page-settings #sp-mgmt .mgd2-er-link { margin-top: 12px; }
  #page-settings #sp-mgmt .mgd2-er { margin-top: 16px; }
  #page-settings #sp-mgmt .mgd2-logo-row { display: flex; align-items: center; gap: 14px; }
  #page-settings #sp-mgmt .mgd2-dh { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  #page-settings #sp-mgmt .mgd2-note { margin: 0; text-align: right; }
  #page-settings #sp-mgmt .mgd2-dt { margin-bottom: 12px; padding-top: 20px; border-top: 1px solid var(--st-border); }
  #page-settings #sp-mgmt .mgd2-zone { border-top: 1px solid var(--st-border); transition: box-shadow .13s; }
  #page-settings #sp-mgmt .mgd2-zone.drag { box-shadow: inset 0 0 0 2px var(--st-text-muted); border-radius: 10px; }
  #page-settings #sp-mgmt .mgd2-empty { padding: 28px 0; font-size: 13.5px; color: var(--st-text-muted); text-wrap: pretty; }
  #page-settings #sp-mgmt .mgd2-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; box-sizing: border-box; padding: 12px 0; border-top: 1px solid var(--st-border); }
  #page-settings #sp-mgmt .mgd2-zone > .mgd2-row:first-child { border-top: 0; }
  #page-settings #sp-mgmt .mgd2-row.go { cursor: pointer; outline: 0; border-radius: 8px; transition: background .13s, box-shadow .13s; }
  #page-settings #sp-mgmt .mgd2-row.go:hover, #page-settings #sp-mgmt .mgd2-row.go:focus-visible { background: var(--st-elevated); box-shadow: -10px 0 0 var(--st-elevated), 10px 0 0 var(--st-elevated); }
  #page-settings #sp-mgmt .mgd2-row.go:hover .n { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  #page-settings #sp-mgmt .mgd2-acct { border-top: 0; }
  #page-settings #sp-mgmt .mgd2-t { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; color: var(--st-text); }
  #page-settings #sp-mgmt .mgd2-t .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-settings #sp-mgmt .mgd2-t small { font-size: 12.5px; color: var(--st-text-muted); margin-top: 2px; line-height: 1.45; text-wrap: pretty; }
  #page-settings #sp-mgmt .mgd2-t small.warn { color: #b3361f; }
  #page-settings #sp-mgmt .mgd2-r { display: flex; align-items: center; gap: 20px; flex: none; font-size: 13.5px; color: var(--st-text-muted); font-variant-numeric: tabular-nums; }
  #page-settings #sp-mgmt .mgd2-when { min-width: 140px; text-align: right; }
  #page-settings #sp-mgmt .mgd2-ctl { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
  #page-settings #sp-mgmt .mgd2-sel { display: block; width: 210px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; height: 38px; padding: 0 34px 0 12px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--st-border); background-color: transparent; font: inherit; font-size: 13.5px; color: var(--st-text); appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
  #page-settings #sp-mgmt .mgd2-sel option { color: #111827; }
  /* End relationship, inline: the existing ranked choices, flattened into the page */
  #page-settings #sp-mgmt .mgd2-er .erx-lead { font-size: 13.5px; color: var(--st-text); margin: 0 0 12px; }
  #page-settings #sp-mgmt .mgd2-er .erx-foot { display: flex; gap: 12px; justify-content: flex-start; margin-top: 16px; }
  #page-settings #sp-mgmt .mgd2-er .erx-foot .btn { height: 38px; padding: 0 16px; border-radius: 10px; }
  
  /* Stage 3a: Messaging tabs reuse the Security/Notifications card -> bubble rules */
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card {
    background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border);
    padding: 16px; margin: 0 16px 16px; box-sizing: border-box;
  }
  [data-theme="dark"] #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card {
    background: #1d2840;
    box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2);
  }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card-icon { display: none; }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card-title { font-size: 15px; font-weight: 700; color: var(--st-text); }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card-sub { font-size: 13px; font-weight: 400; color: var(--st-text-muted); margin-top: 3px; }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card-body { padding: 0; }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card-body > :last-child { margin-bottom: 0; }
  
  /* Stage 3b: Messaging */
  #page-settings #sp-twilio .tx-row, #page-settings #sp-twilio .tx-push { min-height: 0; padding-left: 0; padding-right: 0; }
  #page-settings #sp-twilio .tx-row { border-top: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 16px; cursor: pointer; }
  #page-settings #sp-twilio .tx-push { border-top: 1px solid var(--st-border); margin-top: 16px; padding-top: 16px; }
  #page-settings #sp-twilio #twilio-compliance-body .st-field { margin: 0 0 16px; }
  #page-settings #sp-twilio #twilio-compliance-body .st-grid { margin-bottom: 16px; }
  #page-settings #sp-twilio textarea.st-input { height: auto; min-height: 62px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card > .settings-card-head { margin-bottom: 16px; }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card > .lp-ph1 { margin-top: 0; }
  #page-settings :is(#sp-twilio, #sp-phone-numbers, #sp-whatsapp, #sp-email, #sp-a2p) .settings-card > .lp-ph2 { margin: -12px 0 16px; }
  #page-settings #sp-a2p .settings-card { margin-top: 0; }
  #page-settings #sp-twilio #twilio-compliance-body .st-grid textarea.st-input { min-height: 84px; }
  
  /* Stage 3d: A2P status, tour reminders */
  #page-settings #sp-a2p .tx-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #page-settings #sp-a2p .tx-tri b { display: block; font-size: 12.5px; font-weight: 700; color: var(--st-text); margin-bottom: 4px; }
  #page-settings #sp-a2p .tx-tri span { font-size: 13.5px; color: var(--st-text-muted); }
  #page-settings #sp-a2p #a2p-form-host { display: contents; }
  #page-settings #sp-a2p .a2p-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-bottom: 16px; }
  #page-settings #sp-a2p .a2p-grid[hidden] { display: none; }
  #page-settings #sp-a2p .st-field { margin-bottom: 16px; }
  #page-settings #sp-a2p .a2p-grid .st-field { margin-bottom: 0; }
  #page-settings #sp-a2p .a2p-ro { min-height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: var(--st-elevated); font-size: 13.5px; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; }
  #page-settings #sp-a2p .a2p-ro-empty { color: var(--st-text-muted); }
  #page-settings #sp-a2p .a2p-actions { display: flex; gap: 12px; align-items: center; margin: 4px 0 16px; }
  #page-settings #sp-a2p .st-btn.a2p-quiet { box-shadow: none; background: none; color: var(--st-text-muted); padding: 0 4px; }
  #page-settings #sp-a2p .st-btn.a2p-quiet:hover { color: var(--st-text); text-decoration: underline; text-underline-offset: 3px; }
  #page-settings #sp-a2p .a2p-count.a2p-bad { color: #b3361f; }
  #page-settings #sp-a2p .a2p-sw { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--st-border); cursor: pointer; }
  #page-settings #sp-a2p .a2p-swt { display: flex; flex-direction: column; font-size: 13.5px; color: var(--st-text); }
  #page-settings #sp-a2p .a2p-swt small { font-size: 12.5px; color: var(--st-text-muted); margin-top: 2px; line-height: 1.45; max-width: 520px; }
  #page-settings #sp-a2p .a2p-steps { display: flex; flex-direction: column; }
  #page-settings #sp-a2p .a2p-step { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--st-border); font-size: 13.5px; }
  #page-settings #sp-a2p .a2p-step:first-child { border-top: 0; padding-top: 0; }
  #page-settings #sp-a2p .a2p-step b { font-weight: 400; color: var(--st-text-muted); }
  #page-settings #sp-a2p .a2p-submit:disabled { opacity: .45; cursor: default; }
  #add-mgmt-modal { z-index: 1500; }   /* the Add client sheet sits above the Settings sheet (z 1400) */
  /* On a phone the Add client sheet wears the same glass as the Edit Appointment sheet on the calendar. */
  @media (max-width: 768px) {
    html body #add-mgmt-modal { background: transparent !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); align-items: flex-end !important; justify-content: center !important; padding: 0 !important; }
    html body #add-mgmt-modal .modal { color-scheme: light; width: 100% !important; max-width: 100% !important; max-height: 86dvh; background: rgba(255,255,255,0.70) !important; -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6); border: 1px solid rgba(200,220,255,.55) !important; border-radius: 22px 22px 0 0 !important; box-shadow: 0 20px 60px rgba(20,50,140,.35), 0 8px 24px rgba(30,70,160,.22) !important; animation: calSheetUp .34s cubic-bezier(.32,.72,0,1); }
    html body #add-mgmt-modal .modal { height: min(86dvh, 760px) !important; position: relative; display: flex; flex-direction: column; overflow: hidden; }
    html body #add-mgmt-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    html body #add-mgmt-modal .modal-body .form-group { margin-bottom: 18px; }
    html body #add-mgmt-modal .modal::before { content: ''; display: block; flex: none; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(26,51,112,.22); }
    html body #add-mgmt-modal .modal-head { padding: 8px 16px 12px; border-bottom: 1px solid var(--border2); background: none; border-radius: 0; align-items: center; }
    html body #add-mgmt-modal .modal-title { font-size: 20px; font-weight: 700; color: #1a3370; }
    html body #add-mgmt-modal .modal-x { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); border: 1px solid rgba(200,220,255,.7); color: #1a3370; }
    html body #add-mgmt-modal .modal-body { padding: 16px !important; }
    html body #add-mgmt-modal .modal-body label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .5px; color: #2a4a85 !important; }
    html body #add-mgmt-modal .form-input { border-radius: 12px; border: 1px solid rgba(200,220,255,.8); background: rgba(255,255,255,.88); min-height: 44px; color: var(--text); }
    html body #add-mgmt-modal .modal, html body #add-mgmt-modal input, html body #add-mgmt-modal button, html body #add-mgmt-modal label, html body #add-mgmt-modal a { font-family: inherit !important; }
    html body #add-mgmt-modal .modal-footer { flex-direction: row !important; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: flex-start !important; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border2); background: none; border-radius: 0; }
    html body #add-mgmt-modal .modal-footer .btn { flex: 1 1 0; min-width: 0; width: auto !important; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; display: flex; align-items: center; justify-content: center; margin: 0; }
    html body #add-mgmt-modal .modal-footer .btn-primary { flex: 1.5 1 0; }
    html body #add-mgmt-modal .modal-footer .btn:not(.btn-primary) { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(180,210,255,.6) !important; color: var(--text) !important; }
    html body #add-mgmt-modal .modal-footer .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
    html body #linked-sheet-modal { background: transparent !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); align-items: flex-end !important; justify-content: center !important; padding: 0 !important; }
    html body #linked-sheet-modal .modal { color-scheme: light; width: 100% !important; max-width: 100% !important; max-height: 86dvh; background: rgba(255,255,255,0.70) !important; -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6); border: 1px solid rgba(200,220,255,.55) !important; border-radius: 22px 22px 0 0 !important; box-shadow: 0 20px 60px rgba(20,50,140,.35), 0 8px 24px rgba(30,70,160,.22) !important; animation: calSheetUp .34s cubic-bezier(.32,.72,0,1); }
    html body #linked-sheet-modal .modal { height: min(86dvh, 760px) !important; position: relative; display: flex; flex-direction: column; overflow: hidden; }
    html body #linked-sheet-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    html body #linked-sheet-modal .modal-body .form-group { margin-bottom: 18px; }
    html body #linked-sheet-modal .modal::before { content: ''; display: block; flex: none; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(26,51,112,.22); }
    html body #linked-sheet-modal .modal-head { padding: 8px 16px 12px; border-bottom: 1px solid var(--border2); background: none; border-radius: 0; align-items: center; }
    html body #linked-sheet-modal .modal-title { font-size: 20px; font-weight: 700; color: #1a3370; }
    html body #linked-sheet-modal .modal-x { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); border: 1px solid rgba(200,220,255,.7); color: #1a3370; }
    html body #linked-sheet-modal .modal-body { padding: 16px !important; }
    html body #linked-sheet-modal .modal-body label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .5px; color: #2a4a85 !important; }
    html body #linked-sheet-modal .form-input { border-radius: 12px; border: 1px solid rgba(200,220,255,.8); background: rgba(255,255,255,.88); min-height: 44px; color: var(--text); }
    html body #linked-sheet-modal .modal, html body #linked-sheet-modal input, html body #linked-sheet-modal button, html body #linked-sheet-modal label, html body #linked-sheet-modal a { font-family: inherit !important; }
    html body #linked-sheet-modal .modal-footer { flex-direction: row !important; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: flex-start !important; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border2); background: none; border-radius: 0; }
    html body #linked-sheet-modal .modal-footer .btn { flex: 1 1 0; min-width: 0; width: auto !important; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; display: flex; align-items: center; justify-content: center; margin: 0; }
    html body #linked-sheet-modal .modal-footer .btn-primary { flex: 1.5 1 0; }
    html body #linked-sheet-modal .modal-footer .btn:not(.btn-primary) { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(180,210,255,.6) !important; color: var(--text) !important; }
    html body #linked-sheet-modal .modal-footer .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
    html body #add-mgmt-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 16px; }
    html body #add-mgmt-modal .modal-title { line-height: 1.2; margin: 0; }
    html body #add-mgmt-modal .modal-x { position: static; margin: 0; flex: none; }
    html body #linked-sheet-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 16px; }
    html body #linked-sheet-modal .modal-title { line-height: 1.2; margin: 0; }
    html body #linked-sheet-modal .modal-x { position: static; margin: 0; flex: none; }
  }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] { margin: 0; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .tl-bar { margin: 16px 0 16px !important; gap: 10px; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .tl-bar .st-input, #msx .msx-raw[data-msx-raw="sp-mgmt"] .tl-bar .st-btn { height: 44px; box-sizing: border-box; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .tl-search { flex: 1 1 auto; min-width: 0; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .tl-bar .st-btn { flex: 0 0 auto; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .mg-row { border-radius: 0 !important; min-height: 60px; padding: 12px 0; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .mg-row:first-child { border-top: 0; }
  #msx .msx-raw[data-msx-raw="sp-mgmt"] .mgd2-g { grid-template-columns: minmax(0, 1fr) !important; }
  #page-settings #billing-root .bu-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 12px; }
  #page-settings #billing-root .bu-tabs { display: flex; gap: 20px; }
  #page-settings #billing-root .bu-tab { position: relative; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--st-text-muted); cursor: pointer; }
  #page-settings #billing-root .bu-tab.on { color: var(--st-text); }
  #page-settings #billing-root .bu-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--st-text); border-radius: 2px; }
  #page-settings #billing-root .bu-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px 0 6px; }
  #page-settings #billing-root .bu-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px 12px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 -1px 0 var(--st-border); }
  #page-settings #billing-root .bu-tile + .bu-tile { padding-left: 14px; }
  #page-settings #billing-root .bu-tile.on { box-shadow: inset 0 -2px 0 var(--st-text); }
  #page-settings #billing-root .bu-tile b { font-size: 12.5px; font-weight: 700; color: var(--st-text); }
  #page-settings #billing-root .bu-amt { font-size: 18px; font-weight: 600; color: var(--st-text); }
  #page-settings #billing-root .bu-sub { font-size: 12.5px; color: var(--st-text-muted); }
  #page-settings #billing-root .bu-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 0; font-size: 12.5px; color: var(--st-text-muted); }
  #page-settings #billing-root .bu-pg { display: flex; align-items: center; gap: 12px; }
  /* Billing is not wrapped in .st2, so its Export CSV / Previous / Next buttons need the same look. */
  #page-settings #billing-root .st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
    height: 32px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500;
    color: var(--st-text); background: transparent; border: none; border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--st-border); cursor: pointer;
    transition: background .13s, transform .16s;
  }
  #page-settings #billing-root .st-btn:hover { background: var(--st-elevated); }
  #page-settings #billing-root .st-btn:active { transform: scale(.97); }
  #page-settings #billing-root .bu-pager .st-btn:disabled { opacity: .45; cursor: default; }
  #page-settings #sp-phone-numbers .ph-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #page-settings #sp-phone-numbers .ph-stats b { display: block; font-size: 12.5px; font-weight: 700; color: var(--st-text); margin-bottom: 4px; }
  #page-settings #sp-phone-numbers .ph-stats span { font-size: 13.5px; color: var(--st-text-muted); }
  #page-settings #sp-phone-numbers .ph-conn-act { margin-top: 18px; }
  #page-settings #sp-phone-numbers .ph-list { display: flex; flex-direction: column; }
  #page-settings #sp-phone-numbers .ph-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--st-border); font-size: 13.5px; color: var(--st-text); }
  #page-settings #sp-phone-numbers .ph-row:first-child { border-top: 0; }
  #page-settings #sp-phone-numbers .ph-row small { display: block; font-size: 12px; color: var(--st-text-muted); }
  #page-settings #sp-phone-numbers .ph-r { display: flex; align-items: center; gap: 14px; }
  #page-settings #sp-phone-numbers .ph-r small { display: inline; }
  #page-settings #sp-phone-numbers .ph-tag { font-size: 13px; color: var(--st-text-muted); padding-right: 4px; }
  #page-settings #sp-phone-numbers .ph-empty { font-size: 13px; color: var(--st-text-muted); }
  #page-settings #sp-phone-numbers .ph-buy { display: flex; gap: 12px; align-items: center; }
  #page-settings #sp-phone-numbers .ph-buy .form-input { flex: 1; min-width: 0; }
  #page-settings #sp-phone-numbers .ph-results { margin-top: 14px; }
  #page-settings #sp-phone-numbers .st-btn.arm { color: var(--st-accent); }
  #page-settings #sp-email .wa-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #page-settings #sp-email .wa-stats b { display: block; font-size: 12.5px; font-weight: 700; color: var(--st-text); margin-bottom: 4px; }
  #page-settings #sp-email .wa-stats span { font-size: 13.5px; color: var(--st-text-muted); overflow-wrap: anywhere; }
  #page-settings #sp-whatsapp .wa-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #page-settings #sp-whatsapp .wa-stats b { display: block; font-size: 12.5px; font-weight: 700; color: var(--st-text); margin-bottom: 4px; }
  #page-settings #sp-whatsapp .wa-stats span { font-size: 13.5px; color: var(--st-text-muted); }
  #page-settings #sp-whatsapp .wa-steps p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--st-text); }
  #page-settings #sp-whatsapp .wa-note { font-size: 13px; color: var(--st-text-muted); }
  #page-settings #sp-whatsapp .ph-list { display: flex; flex-direction: column; }
  #page-settings #sp-whatsapp .ph-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--st-border); font-size: 13.5px; color: var(--st-text); }
  #page-settings #sp-whatsapp .ph-row:first-child { border-top: 0; padding-top: 0; }
  #page-settings #sp-whatsapp .ph-row small { display: block; font-size: 12px; color: var(--st-text-muted); }
  #page-settings #sp-whatsapp .ph-tag { font-size: 13px; color: var(--st-text-muted); }
  #page-settings #twilio-tour-body .tx-sum { border-top: 1px solid var(--st-border); padding: 12px 0; min-height: 0; }
  #page-settings #twilio-tour-body .tx-sum:first-child { border-top: 0; padding-top: 0; }
  #page-settings #twilio-tour-body .tx-val { font-size: 13.5px; color: var(--st-text-muted); text-align: right; }
  #page-settings #twilio-mynumber-card .settings-card-title { font-size: 15px; }
  
  /* Stage 3e: Billing (restyle only) */
  #page-settings #billing-root .bill-wrap { padding: 0; }
  #page-settings #billing-root .bill-bub, #page-settings #billing-root .bill-sec {
    background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border);
    padding: 16px; margin: 0 16px 16px; box-sizing: border-box;
  }
  [data-theme="dark"] #page-settings #billing-root :is(.bill-bub, .bill-sec) {
    background: #1d2840;
    box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2);
  }
  #page-settings #billing-root .bill-bub:first-child, #page-settings #billing-root .bill-wrap > :first-child.bill-sec { margin-top: 16px; }
  #page-settings #billing-root > .bill-wrap > :is(.bill-banner, .bill-panel) { margin: 16px 16px 0; }
  #page-settings #billing-root .bill-bub > .lp-ph1 { margin: 0 0 16px; }
  #page-settings #billing-root .bill-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; cursor: default; }
  #page-settings #billing-root .bill-row-t { font-size: 14px; font-weight: 500; color: var(--st-text); line-height: 1.4; }
  #page-settings #billing-root .bill-row-h { font-size: 13px; color: var(--st-text-muted); line-height: 1.5; margin-top: 2px; }
  #page-settings #billing-root .bill-nocard { color: var(--st-amber); font-weight: 500; }
  #page-settings #billing-root .bill-row-r { display: flex; align-items: center; gap: 12px; flex: none; }
  #page-settings #billing-root .bill-amt { font-size: 20px; font-weight: 700; color: var(--st-text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  #page-settings #billing-root .bill-state { font-size: 13px; color: var(--st-text-muted); }
  #page-settings #billing-root .bill-state.warn { color: var(--st-amber); }
  #page-settings #billing-root .bill-state.bad { color: var(--st-red); }
  #page-settings #billing-root .bill-btn {
    font: inherit; font-size: 13px; font-weight: 500; color: var(--st-text); background: var(--st-bub);
    border: 1px solid var(--st-border); border-radius: 10px; min-width: 100px; height: 36px; padding: 0 14px; cursor: pointer; white-space: nowrap;
  }
  #page-settings #billing-root .bill-btn:hover { background: var(--st-elevated); }
  #page-settings #billing-root .bill-btn:focus-visible { outline: 2px solid var(--st-text); outline-offset: 2px; }
  #page-settings #billing-root .bill-row-switch { cursor: pointer; }
  #page-settings #billing-root .bill-refill { display: none; margin: -4px 0 20px; }
  #page-settings #billing-root .bill-row-switch:has(#billing-autorenew:checked) + .bill-refill { display: block; }
  #page-settings #billing-root .bill-refill-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  #page-settings #billing-root .bill-refill-top label { font-size: 13px; font-weight: 500; color: var(--st-text-muted); }
  #page-settings #billing-root .bill-refill-val { font-size: 20px; font-weight: 700; color: var(--st-accent); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  #page-settings #billing-root .bill-refill-range { width: 100%; margin: 0; accent-color: var(--st-accent); cursor: pointer; }
  #page-settings #billing-root .bill-refill-range:disabled { cursor: default; opacity: .55; }
  #page-settings #billing-root .bill-refill-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--st-text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
  #page-settings #billing-root .bill-stops { margin: 0; max-width: none; }
  #page-settings #billing-root .bill-stops div { font-size: 13px; color: var(--st-text-muted); line-height: 1.5; }
  #page-settings #billing-root .bill-sec-title { font-size: 15px; font-weight: 700; }
  #page-settings #billing-root .bill-sec-sub { font-size: 13px; }
  #page-settings #billing-root .bill-seg { background: transparent; padding: 0; gap: 18px; border-radius: 0; }
  #page-settings #billing-root .bill-seg-btn { background: transparent; border-radius: 0; padding: 0 0 6px; min-height: 0; font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; }
  #page-settings #billing-root .bill-seg-btn.active { background: transparent; color: var(--st-text); border-bottom-color: var(--st-text); }
  #page-settings #billing-root .bill-sel { width: auto; min-width: 140px; height: 36px; min-height: 0; padding: 0 12px; border-radius: 10px; }
  #page-settings #billing-root .bill-action { font-size: 13px; font-weight: 500; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--st-bub); }
  #page-settings #billing-root .bill-action :is(i, svg) { display: none; }
  #page-settings #billing-root .bill-usage-head { margin-top: 20px; }
  #page-settings #billing-root .bill-fund { background: var(--st-bub); border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border); padding: 16px; margin: 16px; box-sizing: border-box; }
  [data-theme="dark"] #page-settings #billing-root .bill-fund { background: #1d2840; box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2); }
  
  /* Stage 3f: My website */
  #page-settings #sp-website-body.st2 { padding: 0; }
  #page-settings #sp-website-body :is(.web-bub), #page-settings #sp-website-body:not(:has(.web-bub)) {
    background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border);
    padding: 16px; margin: 16px 16px 0; box-sizing: border-box;
  }
  #page-settings #sp-website-body:not(:has(.web-bub)) { margin: 16px; }
  [data-theme="dark"] #page-settings #sp-website-body :is(.web-bub), [data-theme="dark"] #page-settings #sp-website-body:not(:has(.web-bub)) {
    background: #1d2840;
    box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2);
  }
  #page-settings #sp-website-body .web-bub:last-child { margin-bottom: 16px; }
  #page-settings #sp-website-body .web-bub .st-sec { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; border-radius: 0; }
  #page-settings #sp-website-body .web-bub .st-sec-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
  #page-settings #sp-website-body .web-bub .st-sec-desc { margin: 0 0 8px; }
  #page-settings #sp-website-body .web-bub .st-h1 { margin: 0 0 8px; }
  #page-settings #sp-website-body .web-prev-h { font-size: 12.5px; font-weight: 700; color: var(--st-text); margin: 20px 0 8px; }
  #page-settings #sp-website-body .web-prev { border: 1px solid var(--st-border); border-radius: 12px; overflow: hidden; background: var(--st-elevated); }
  #page-settings #sp-website-body .web-prev-bar { padding: 9px 14px; font-size: 12px; color: var(--st-text-muted); background: rgba(128,128,128,.12); }
  #page-settings #sp-website-body .web-prev-body { padding: 14px; }
  #page-settings #sp-website-body .web-prev-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  #page-settings #sp-website-body .web-prev-name { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--st-text); min-width: 0; }
  #page-settings #sp-website-body .web-prev-name img { height: 24px; max-width: 80px; object-fit: contain; }
  #page-settings #sp-website-body .web-prev-cta { font-size: 12px; font-weight: 700; color: #fff; background: #1a3370; border-radius: 8px; padding: 8px 12px; white-space: nowrap; }
  #page-settings #sp-website-body .web-prev-card { display: flex; gap: 12px; align-items: center; background: var(--st-bub); border: 1px solid var(--st-border); border-radius: 10px; padding: 10px; }
  #page-settings #sp-website-body .web-prev-ph { width: 96px; height: 56px; border-radius: 8px; background: rgba(128,128,128,.18); flex: none; }
  #page-settings #sp-website-body .web-prev-price { font-size: 14px; font-weight: 700; color: var(--st-text); }
  #page-settings #sp-website-body .web-prev-meta { font-size: 12px; color: var(--st-text-muted); margin-top: 2px; }
  
  /* Stage 3g: Application checklists */
  #page-settings #checklist-root.st2 { padding: 0; }
  #page-settings #checklist-root .stx-tabs { margin: 8px 16px 16px; }
  #page-settings #checklist-root .chk-bub {
    background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border);
    padding: 16px; margin: 0 16px 16px; box-sizing: border-box;
  }
  [data-theme="dark"] #page-settings #checklist-root .chk-bub {
    background: #1d2840;
    box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2);
  }
  #page-settings #checklist-root .chk-bub .st-h1 { margin: 0 0 8px; }
  #page-settings #checklist-root .chk-bub .st-sec-desc { margin: 0 0 16px; }
  #page-settings #checklist-root .chk-bub > .cl-block .cl-h { margin: 0 0 8px; padding-top: 0; border-top: 0; font-size: 14px; font-weight: 700; }
  #page-settings #checklist-root .chk-how p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--st-text-muted); }
  #page-settings #checklist-root .chk-how p:last-child { margin-bottom: 0; }
  #page-settings #checklist-root .chk-how b { color: var(--st-text); font-weight: 600; }
  
  /* Stage 3h: Tenant screening */
  #page-settings #screening-root.st2 { padding: 0; }
  #page-settings #screening-root .stx-tabs { margin: 8px 16px 16px; }
  #page-settings #screening-root .scr-pane[hidden] { display: none; }
  #page-settings #screening-root.scr-noadmin #screening-tabs, #page-settings #screening-root.scr-noadmin #scr-pane-setup, #page-settings #screening-root.scr-noadmin #scr-pane-how { display: none !important; }
  #page-settings #screening-root .scr-bub, #page-settings #weimark-settings-body > .st-sec, #page-settings #weimark-settings-body > .st-sec-desc, #page-settings #weimark-settings-body > .st-err {
    background: var(--st-bub); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--st-border);
    padding: 16px; margin: 0 16px 16px; box-sizing: border-box;
  }
  [data-theme="dark"] #page-settings #screening-root .scr-bub, [data-theme="dark"] #page-settings #weimark-settings-body > .st-sec, [data-theme="dark"] #page-settings #weimark-settings-body > .st-sec-desc, [data-theme="dark"] #page-settings #weimark-settings-body > .st-err {
    background: #1d2840;
    box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.2);
  }
  #page-settings #weimark-settings-body > .st-sec { border-top: 0; }
  #page-settings #screening-root .st-h1 { margin: 0 0 8px; }
  #page-settings #screening-root .st-sec-title { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--st-text); }
  #page-settings #screening-root .scr-how { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--st-text-muted); }
  #page-settings #screening-root .scr-p { font-size: 13.5px; line-height: 1.5; color: var(--st-text); margin: 10px 0 0; }
  #page-settings #screening-root .scr-h { font-size: 12.5px; color: var(--st-text-muted); line-height: 1.5; }
  #page-settings #screening-root .scr-h:empty { display: none; }
  #page-settings #screening-root .scr-wiz { display: flex; flex-direction: column; min-height: 470px; }
  #page-settings #screening-root .scr-st { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--st-text); }
  #page-settings #screening-root .scr-ss { font-size: 13px; color: var(--st-text-muted); margin-top: 3px; }
  #page-settings #screening-root .scr-prog { height: 4px; border-radius: 2px; background: var(--st-elevated); overflow: hidden; margin: 16px 0; }
  #page-settings #screening-root .scr-prog i { display: block; height: 100%; width: 0; border-radius: 2px; background: #2563eb; transition: width .5s cubic-bezier(.22,1,.36,1); }
  #page-settings #screening-root .scr-body { flex: 1; display: flex; flex-direction: column; gap: 16px; align-content: flex-start; transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1); }
  #page-settings #screening-root .scr-body.scr-leave { opacity: 0; transform: translateX(var(--sx,-14px)); transition: opacity .15s ease, transform .15s ease; }
  #page-settings #screening-root .scr-body.scr-pre { opacity: 0; transform: translateX(var(--sx,14px)); transition: none; }
  #page-settings #screening-root .scr-wiz-head { transition: opacity .22s ease; }
  #page-settings #screening-root .scr-wiz-head.scr-leave { opacity: 0; transition: opacity .15s ease; }
  #page-settings #screening-root .scr-wiz-head.scr-pre { opacity: 0; transition: none; }
  @media (prefers-reduced-motion: reduce) { #page-settings #screening-root .scr-body, #page-settings #screening-root .scr-wiz-head, #page-settings #screening-root .scr-prog i { transition: none !important; } }
  #page-settings #screening-root .scr-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
  #page-settings #screening-root .st-btn.scr-pri { background: #2563eb; color: #fff; box-shadow: none; }
  #page-settings #screening-root .st-btn.scr-pri:hover { background: #1d4ed8; }
  #page-settings #screening-root .scr-tpl { position: relative; background: var(--st-elevated); border: 1px solid var(--st-border); border-radius: 10px; padding: 12px 14px; }
  #page-settings #screening-root .scr-tx { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--st-text); padding-right: 64px; }
  #page-settings #screening-root .scr-tpl .st-btn { position: absolute; top: 8px; right: 8px; height: 28px; background: var(--st-bub); }
  #page-settings #screening-root .scr-wl { display: flex; gap: 8px; align-items: center; }
  #page-settings #screening-root .scr-wl .st-input { flex: 1; min-width: 0; }
  #page-settings #screening-root .scr-fw { display: grid; gap: 8px; }
  #page-settings #screening-root .scr-opts { display: flex; flex-direction: column; gap: 8px; }
  #page-settings #screening-root .scr-opt { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--st-border); font-family: inherit; color: var(--st-text); cursor: pointer; transition: box-shadow .15s, background .15s; }
  #page-settings #screening-root .scr-opt b { font-size: 13.5px; font-weight: 600; }
  #page-settings #screening-root .scr-opt span { font-size: 12.5px; color: var(--st-text-muted); line-height: 1.45; }
  #page-settings #screening-root .scr-opt:hover { background: var(--st-elevated); }
  #page-settings #screening-root .scr-opt.on { box-shadow: inset 0 0 0 2px #2563eb; }
  #page-settings #screening-root .scr-opt.on b { color: #2563eb; }
  #page-settings #screening-root .scr-opt:active { transform: scale(.985); }
  #page-settings #screening-root .scr-rg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #page-settings #screening-root .scr-rop { align-items: center; text-align: center; padding: 14px 8px; }
  #page-settings #screening-root .scr-rop b { font-size: 14px; }
  #page-settings #screening-root .scr-opt:focus-visible, #page-settings #screening-root .stx-tab:focus-visible { outline: 2px solid var(--st-text); outline-offset: 2px; }