/* Reachly UI system (docs/UI-REDESIGN-PLAN.md, approved reference
   mockups/contacts-v3.html). Every rebuilt page is made of these parts and
   nothing else: tokens only, one icon set, four overlay shapes.

   Everything is prefixed rl- and lives under .rlx, so it cannot collide with
   the old stylesheet while pages are being moved over one at a time. The old
   sheet styles bare `input, textarea, select` with !important; the form
   controls here answer in kind, and only for those contested properties.
   When the last page has moved (plan step 13) the old sheet and these
   !importants go together. */
.rlx{
  --rl-bg:#f6f7fa;--rl-surface:#fff;--rl-surface2:#f4f5f8;--rl-surface3:#eceef3;--rl-line:#e6e8ef;--rl-hair:rgba(16,24,40,.08);
  --rl-ink:#0f1218;--rl-ink2:#475067;--rl-ink3:#8a92a6;--rl-ink4:#b3b9c7;
  --rl-acc:#f15b41;--rl-acc2:#e04a30;--rl-acc-soft:#fff1ed;--rl-ring:rgba(241,91,65,.2);
  --rl-ok:#0e9f6e;--rl-warn:#d97706;--rl-danger:#e11d48;--rl-info:#2563eb;
  --rl-ready:#0e9f6e;--rl-loyal:#2563eb;--rl-customer:#0891b2;--rl-winback:#d97706;--rl-cold:#64748b;--rl-qualify:#7c3aed;--rl-none:#8a92a6;
  --rl-r8:8px;--rl-r10:10px;--rl-r12:12px;--rl-r16:16px;--rl-r20:20px;
  --rl-sh-xs:0 1px 2px rgba(16,24,40,.05);
  --rl-sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --rl-sh-md:0 6px 16px -4px rgba(16,24,40,.12),0 2px 6px -2px rgba(16,24,40,.06);
  --rl-sh-lg:0 32px 64px -16px rgba(16,24,40,.28),0 8px 20px -8px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.05);
  --rl-ease:cubic-bezier(.2,.8,.2,1);
  color:var(--rl-ink);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased}
.rlx *,.rlx *::before,.rlx *::after{box-sizing:border-box}
.rlx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;padding:0;margin:0}
.rlx .rl-ic{flex:none;display:block}

/* ── scrollbars ──────────────────────────────────────────────
   Owner, 2026-09-21, looking at four columns each wearing a chunky grey bar:
   "I am not liking these grey scrolling bars."

   A scrollbar is chrome, not content. Thin, drawn from the ink token, faint
   at rest so a pane still SAYS it scrolls, and darker once you are pointing
   at it. Declared once here rather than hand-copied onto every scroller —
   it was pasted twelve times across six files, with a hex that was not even
   a token, and Chromium ignored half of it.

   The two paths are mutually exclusive and the @supports is what keeps them
   apart. Chromium DISABLES every ::-webkit-scrollbar rule the moment a
   non-auto scrollbar-color reaches the element — and scrollbar-color
   inherits, so one declaration on .rlx silently turned the webkit path off
   for the whole page. What was left was Chromium's own Fluent bar, which
   draws stepper arrows at both ends; measured, 15px wide with arrows, and
   scrollbar-width:thin does NOT take those arrows away. Only
   ::-webkit-scrollbar-button does. So the standard properties are fenced to
   engines with no webkit pseudos (Firefox, which never draws arrows), and
   Chromium and Safari get the webkit path alone.

   A pane that wants NO bar still says scrollbar-width:none, and those are
   left alone — they out-specify the reset.

   Every webkit rule is written twice, `.rlx::x` and `.rlx ::x`. A descendant
   combinator never reaches the host's OWN scrollbar, and Workflows and
   Webinars scroll .rlx itself. */
@supports not selector(::-webkit-scrollbar){
  .rlx,.rlx *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--rl-ink3) 34%,transparent) transparent}
  .rlx :hover{scrollbar-color:color-mix(in srgb,var(--rl-ink3) 58%,transparent) transparent}
}
.rlx::-webkit-scrollbar,.rlx ::-webkit-scrollbar{width:11px;height:11px}
/* The stepper arrows are the chunky part. They also show up INSIDE a
   textarea, which is where the composer grew a pair of spinner arrows. */
.rlx::-webkit-scrollbar-button,.rlx ::-webkit-scrollbar-button{display:none;width:0;height:0}
.rlx::-webkit-scrollbar-track,.rlx ::-webkit-scrollbar-track,.rlx::-webkit-scrollbar-corner,.rlx ::-webkit-scrollbar-corner{background:transparent}
/* The transparent border plus background-clip is what makes an 11px track
   draw a 5px thumb with room around it. */
.rlx::-webkit-scrollbar-thumb,.rlx ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--rl-ink3) 30%,transparent);border-radius:999px;border:3px solid transparent;background-clip:content-box}
.rlx:hover::-webkit-scrollbar-thumb,.rlx :hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--rl-ink3) 52%,transparent);background-clip:content-box}
.rlx::-webkit-scrollbar-thumb:hover,.rlx ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--rl-ink2) 62%,transparent);background-clip:content-box}
/* On a dark surface the same grey disappears, so it is drawn from white. */
.rlx .rl-cb-host .is-dark ::-webkit-scrollbar-thumb,.rlx .ib-sec.is-case ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);background-clip:content-box}

.rlx .rl-num{font-variant-numeric:tabular-nums}
.rlx .rl-muted{color:var(--rl-ink3)}
.rlx mark{background:#ffe3a3;color:inherit;border-radius:3px;padding:0}

/* ── buttons ── */
.rlx .rl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-height:36px!important;padding:0 14px;border-radius:var(--rl-r10)!important;font-size:13px!important;font-weight:600;border:1px solid var(--rl-line);background:var(--rl-surface);color:var(--rl-ink);white-space:nowrap;box-shadow:var(--rl-sh-xs);transition:background .15s,box-shadow .15s,transform .1s,border-color .15s}
.rlx .rl-btn:hover{background:#fafbfc;border-color:#d5d9e3;box-shadow:var(--rl-sh-sm)}
.rlx .rl-btn:active{transform:translateY(.5px)}
.rlx .rl-btn:focus-visible{outline:0;box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .rl-btn[disabled]{opacity:.45;cursor:not-allowed}
.rlx .rl-btn.is-pri{background:linear-gradient(180deg,#f56a51,#ec4f33);border-color:var(--rl-acc2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(224,74,48,.45),0 4px 12px -4px rgba(241,91,65,.5)}
.rlx .rl-btn.is-pri:hover{background:linear-gradient(180deg,#f7745c,#ee5539)}
.rlx .rl-btn.is-dark{background:linear-gradient(180deg,#262b38,#11141b);border-color:#0b0d12;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(16,24,40,.4)}
.rlx .rl-btn.is-dark:hover{background:linear-gradient(180deg,#2f3545,#171b24)}
.rlx .rl-btn.is-danger{background:linear-gradient(180deg,#f0385f,#d81b49);border-color:#c5153f;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(225,29,72,.4)}
.rlx .rl-btn.is-quiet{border-color:transparent;background:transparent;color:var(--rl-ink2);box-shadow:none}
.rlx .rl-btn.is-quiet:hover{background:var(--rl-surface3);color:var(--rl-ink)}
.rlx .rl-btn.is-ai{color:var(--rl-acc2);border-color:rgba(241,91,65,.3);background:linear-gradient(180deg,#fff,#fff6f3)}
.rlx .rl-btn.is-ai.is-on,.rlx .rl-btn.is-ai:hover{background:var(--rl-acc-soft);border-color:rgba(241,91,65,.45)}
.rlx .rl-btn.is-sq{width:36px;padding:0}
.rlx .rl-btn.is-lg{height:44px;min-height:44px!important;padding:0 18px;font-size:14px!important;border-radius:var(--rl-r12)!important}
.rlx .rl-btn.is-sm{height:30px;min-height:30px!important;padding:0 10px;font-size:12.5px!important;border-radius:var(--rl-r8)!important}
.rlx .rl-kbd{font-size:10.5px;font-weight:700;color:var(--rl-ink3);background:var(--rl-surface2);border:1px solid var(--rl-line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;white-space:nowrap}

/* ── form controls ── */
.rlx input.rl-ipt,.rlx select.rl-ipt,.rlx textarea.rl-ipt{display:block;width:100%;height:42px;min-height:42px!important;margin:0;padding:0 13px;border:1px solid var(--rl-line)!important;border-radius:var(--rl-r10)!important;background:#fff!important;color:var(--rl-ink)!important;font-size:14px!important;font-weight:500;box-shadow:var(--rl-sh-xs);transition:border-color .15s,box-shadow .15s}
.rlx textarea.rl-ipt{height:96px;padding:11px 13px;resize:none}
.rlx .rl-ipt::placeholder{color:var(--rl-ink4)}
.rlx .rl-ipt:hover{border-color:#d5d9e3!important}
.rlx .rl-ipt:focus{outline:0!important;border-color:var(--rl-acc)!important;box-shadow:0 0 0 4px var(--rl-ring)!important}
.rlx select.rl-ipt{appearance:none;-webkit-appearance:none;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center!important}
.rlx .rl-ipt.is-sm{height:34px;min-height:34px!important;font-size:13px!important}
/* A bare input inside a composed field: the field draws the box. */
.rlx input.rl-bare{flex:1;min-width:0;width:auto;height:auto;min-height:0!important;margin:0;padding:0;border:0!important;border-radius:0!important;outline:0!important;background:none!important;box-shadow:none!important;color:var(--rl-ink)!important;font-size:13.5px!important;font-weight:500}
.rlx .rl-fld{display:block;margin:0}
.rlx .rl-fld>span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--rl-ink2);margin-bottom:6px;text-transform:none;letter-spacing:0}
.rlx .rl-fld>span em{font-style:normal;font-weight:400;color:var(--rl-ink3)}
.rlx .rl-chk{flex:none;width:17px;height:17px;border-radius:5px;border:1.5px solid #b9bfcc;display:grid;place-items:center;color:transparent;background:#fff;box-shadow:var(--rl-sh-xs);transition:background .12s,border-color .12s}
.rlx .rl-chk .rl-ic{transform:scale(.4);transition:transform .18s var(--rl-ease)}
.rlx .rl-chk.is-on{background:var(--rl-ink);border-color:var(--rl-ink);color:#fff}
.rlx .rl-chk.is-on .rl-ic{transform:none}
.rlx .rl-chk.is-acc.is-on{background:var(--rl-acc);border-color:var(--rl-acc2)}
.rlx .rl-chk.is-ex.is-on{background:var(--rl-danger);border-color:var(--rl-danger)}
.rlx .rl-sw{flex:none;position:relative;width:38px;height:22px;border-radius:99px;background:#cfd4df;transition:background .2s;box-shadow:inset 0 1px 2px rgba(16,24,40,.12)}
.rlx .rl-sw::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.3);transition:transform .22s var(--rl-ease)}
.rlx .rl-sw.is-on{background:var(--rl-ok)}
.rlx .rl-sw.is-on::after{transform:translateX(16px)}
.rlx .rl-seg{display:flex;padding:3px;border-radius:var(--rl-r10);background:var(--rl-surface3);gap:2px}
.rlx .rl-seg button{flex:1;height:32px;padding:0 10px;border-radius:var(--rl-r8);font-size:12.5px;font-weight:600;color:var(--rl-ink2);text-align:center;white-space:nowrap;transition:.15s}
.rlx .rl-seg button.is-on{background:#fff;color:var(--rl-ink);box-shadow:var(--rl-sh-sm)}
/* A segment can carry how many are behind it — the media library's tabs do. */
.rlx .rl-seg .n{margin-left:6px;font-size:11px;font-weight:600;color:var(--rl-ink4)}
.rlx .rl-seg button.is-on .n{color:var(--rl-ink3)}

/* ── small parts ── */
/* A tile and an avatar are <span>s that centre one icon. A page stylesheet
   writing `.nm span{display:block}` for the subtitle NEXT to them also
   matches them, flattens the grid, and drops a 17px icon to the top of a
   36px box — a 9px lean, which is what Campaigns and Workflows had. Their
   centring is not a page's to override, so it is not overridable. */
.rlx .rl-tile{flex:none;width:40px;height:40px;border-radius:var(--rl-r12);display:grid!important;place-items:center!important;color:var(--c,var(--rl-acc));background:color-mix(in srgb,var(--c,var(--rl-acc)) 11%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--rl-acc)) 18%,transparent)}
.rlx .rl-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid!important;place-items:center!important;font-size:11.5px;font-weight:700;color:var(--c,var(--rl-ink2));background:color-mix(in srgb,var(--c,var(--rl-ink3)) 13%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--rl-ink3)) 22%,transparent)}
.rlx .rl-chipx{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:600;color:var(--c,var(--rl-ink2));background:color-mix(in srgb,var(--c,var(--rl-ink3)) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--rl-ink3)) 20%,transparent);white-space:nowrap}
.rlx .rl-dotpill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--rl-ink2);white-space:nowrap;font-weight:500}
.rlx .rl-dotpill i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--rl-ink4));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--rl-ink4)) 18%,transparent)}
.rlx .rl-meter{display:flex;align-items:center;gap:8px}
.rlx .rl-meter .b{width:46px;height:5px;border-radius:9px;background:var(--rl-surface3);overflow:hidden}
.rlx .rl-meter .b i{display:block;height:100%;border-radius:9px;background:var(--c,var(--rl-ink3))}
.rlx .rl-meter b{font-weight:700;font-size:12.5px}
.rlx .rl-tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair);font-size:12px;font-weight:500;color:var(--rl-ink2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rlx .rl-tag button{color:var(--rl-ink3);display:grid;place-items:center}
.rlx .rl-tag button:hover{color:var(--rl-ink)}
.rlx .rl-badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff)}
.rlx [data-tip]{position:relative}
.rlx [data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);z-index:70;padding:5px 9px;border-radius:7px;background:var(--rl-ink);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:var(--rl-sh-md);pointer-events:none}
.rlx .rl-callout{display:flex;gap:11px;padding:12px;border-radius:var(--rl-r12);font-size:13px;color:var(--rl-ink2);background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.rlx .rl-callout>.rl-ic{color:var(--c);margin-top:1px}
.rlx .rl-callout b{color:var(--rl-ink)}
.rlx .rl-callout a{color:var(--c);font-weight:700;cursor:pointer;white-space:nowrap}
.rlx .rl-rowline{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--rl-r12);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .rl-rowline .t{flex:1;min-width:0}
.rlx .rl-rowline .t b{display:block;font-size:13.5px}
.rlx .rl-rowline .t span{font-size:12.5px;color:var(--rl-ink3)}
.rlx .rl-math{display:flex;flex-direction:column;gap:7px;padding:13px;border-radius:var(--rl-r12);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair);font-size:13px;color:var(--rl-ink2)}
.rlx .rl-math div{display:flex}
.rlx .rl-math div b{margin-left:auto;color:var(--rl-ink);font-weight:700}
.rlx .rl-math .tot{padding-top:8px;border-top:1px dashed #cdd2dd;color:var(--rl-ink);font-weight:700}
.rlx .rl-math .tot b{color:var(--rl-acc2);font-size:15px}
.rlx .rl-blank{padding:64px 20px;text-align:center;color:var(--rl-ink3)}
.rlx .rl-blank .rl-tile{margin:0 auto 12px;--c:var(--rl-ink3)}
.rlx .rl-blank b{display:block;color:var(--rl-ink);font-size:15px;margin-bottom:4px}
.rlx .rl-blank .rl-btn{margin-top:14px}
.rlx .rl-skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#eef0f4 0%,#f7f8fa 50%,#eef0f4 100%);background-size:200% 100%;animation:rl-shimmer 1.2s infinite linear}
@keyframes rl-shimmer{to{background-position:-200% 0}}
/* the dark glass AI zone: only where the AI is speaking or being asked */
.rlx .rl-ai{border-radius:var(--rl-r16);color:#e9ebf2;background:radial-gradient(80% 200% at 0% 0%,rgba(241,91,65,.34),transparent 60%),linear-gradient(135deg,#252a3a,#141722);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 32px -16px rgba(21,24,35,.7)}
.rlx .rl-ai .rl-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.rlx .rl-ai .rl-btn:hover{background:rgba(255,255,255,.18)}
.rlx .rl-ai .rl-btn.is-solid{background:#fff;border-color:#fff;color:var(--rl-ink)}

/* ── data table ── */
.rlx .rl-table{width:100%;border-collapse:collapse;margin:0}
.rlx .rl-table th{position:sticky;top:0;z-index:1;background:rgba(252,252,253,.94);backdrop-filter:blur(6px);text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--rl-ink3);padding:10px 12px;border:0;border-bottom:1px solid var(--rl-line);white-space:nowrap}
.rlx .rl-table th button{display:inline-flex;align-items:center;gap:4px;font-weight:700;letter-spacing:.02em}
.rlx .rl-table th button:hover,.rlx .rl-table th .is-sorted{color:var(--rl-ink)}
.rlx .rl-table td{padding:11px 12px;border:0;border-bottom:1px solid #f0f1f5;vertical-align:middle;background:none}
.rlx .rl-table tbody tr{cursor:pointer;transition:background .1s}
.rlx .rl-table tbody tr:hover{background:#fafbfc}
.rlx .rl-table tbody tr.is-sel{background:var(--rl-acc-soft)}
.rlx .rl-table tbody tr.is-cur{box-shadow:inset 3px 0 0 var(--rl-acc);background:#fff8f6}
.rlx .rl-rowact{display:flex;gap:2px;opacity:0;transition:opacity .12s;justify-content:flex-end}
.rlx tr:hover .rl-rowact,.rlx .rl-rowact:focus-within{opacity:1}
.rlx .rl-rowact button{width:30px;height:30px;border-radius:var(--rl-r8);display:grid;place-items:center;color:var(--rl-ink3)}
.rlx .rl-rowact button:hover{background:var(--rl-surface3);color:var(--rl-ink)}
.rlx .rl-rowact button.is-danger:hover{background:#fff1f3;color:var(--rl-danger)}

/* ── overlays: menu · dialog · wizard · side panel ── */
#rlOverlays{position:fixed;inset:0;z-index:4000;pointer-events:none}
#rlOverlays>*{pointer-events:auto}
.rlx .rl-veil{position:fixed;inset:0;background:rgba(15,18,24,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.rlx .rl-veil.is-clear{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.rlx .is-enter.rl-veil{animation:rl-fade .2s ease}
@keyframes rl-fade{from{opacity:0}}
.rlx .rl-menu{position:fixed;width:286px;padding:6px;border-radius:var(--rl-r16);background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:var(--rl-sh-lg);transform-origin:top right}
.rlx .rl-menu.is-enter{animation:rl-menuin .18s var(--rl-ease)}
@keyframes rl-menuin{from{opacity:0;transform:scale(.95) translateY(-6px)}}
.rlx .rl-mi{width:100%;display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:var(--rl-r10);font-size:13.5px;font-weight:600}
.rlx .rl-mi:hover,.rlx .rl-mi:focus-visible{background:var(--rl-surface2);outline:0}
.rlx .rl-mi .rl-tile{width:32px;height:32px;border-radius:9px;--c:var(--rl-ink2)}
.rlx .rl-mi small{display:block;font-size:12px;font-weight:400;color:var(--rl-ink3);margin-top:1px}
.rlx .rl-mi .rl-kbd{margin-left:auto}
.rlx .rl-mi.is-danger{color:var(--rl-danger)}
.rlx .rl-mi.is-danger .rl-tile{--c:var(--rl-danger)}
.rlx .rl-mi.is-danger:hover{background:#fff1f3}
.rlx .rl-menu hr{border:0;border-top:1px solid var(--rl-line);margin:6px 4px}
/* The (i) beside a label, and the card it opens (RlUI.why / explain). */
.rlx .rl-why-i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:3px;padding:0;border:0;border-radius:50%;background:none;color:var(--rl-ink3);cursor:pointer;vertical-align:-4px;flex:none}
.rlx .rl-why-i .rl-ic{color:inherit}
.rlx .rl-why-i:hover{color:var(--rl-ink)}
.rlx .rl-why-i:focus-visible{outline:2px solid var(--rl-acc);outline-offset:1px}
.rlx .rl-why{padding:8px 10px 6px}
.rlx .rl-why .h{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.35;color:var(--rl-ink)}
.rlx .rl-why .h .k{flex:none;display:inline-flex;margin-top:1px}
.rlx .rl-why .h .k .rl-ic{color:var(--c)}
.rlx .rl-why p{margin:7px 0 0;font-size:12.5px;line-height:1.5;color:var(--rl-ink2)}
.rlx .rl-dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;border-radius:var(--rl-r20);background:var(--rl-surface);box-shadow:var(--rl-sh-lg);overflow:hidden}
.rlx .rl-dlg.is-wide{width:min(780px,calc(100vw - 32px))}
.rlx .rl-dlg.is-slim{width:min(440px,calc(100vw - 32px))}
.rlx .rl-dlg.is-enter{animation:rl-modalin .26s var(--rl-ease)}
@keyframes rl-modalin{from{opacity:0;transform:translate(-50%,-47%) scale(.96)}}
.rlx .rl-drawer{position:fixed;right:12px;top:12px;bottom:12px;width:min(480px,calc(100vw - 24px));display:flex;flex-direction:column;border-radius:var(--rl-r20);background:var(--rl-surface);box-shadow:var(--rl-sh-lg);overflow:hidden}
.rlx .rl-drawer.is-wide{width:min(640px,calc(100vw - 24px))}
.rlx .rl-drawer.is-enter{animation:rl-drawerin .32s var(--rl-ease)}
@keyframes rl-drawerin{from{opacity:0;transform:translateX(40px)}}
.rlx .rl-ov-hd{flex:none;display:flex;align-items:flex-start;gap:13px;padding:20px 20px 16px}
.rlx .rl-ov-hd h2{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0;color:var(--rl-ink)}
.rlx .rl-ov-hd p{font-size:13px;color:var(--rl-ink3);margin:2px 0 0}
.rlx .rl-ov-x{margin-left:auto;flex:none;width:32px;height:32px;border-radius:var(--rl-r8);display:grid;place-items:center;color:var(--rl-ink3)}
.rlx .rl-ov-x:hover{background:var(--rl-surface3);color:var(--rl-ink)}
.rlx .rl-ov-bd{flex:1;min-height:0;overflow:auto;padding:4px 20px 20px}
.rlx .rl-ov-ft{flex:none;display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--rl-line);background:#fcfcfd}
.rlx .rl-ov-ft .hint{font-size:12.5px;color:var(--rl-ink3);display:flex;align-items:center;gap:6px}
.rlx .rl-ov-ft .sp{flex:1}
.rlx .rl-stack{display:flex;flex-direction:column;gap:16px}
.rlx .rl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rlx .rl-sec{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rl-ink3)}
/* toast */
/* On TOP, under the top bar (owner, 2026-09-20): at the bottom it sat on the
   very buttons that raised it. */
.rlx .rl-toast{position:fixed;left:50%;top:80px;transform:translate(-50%,-18px);display:flex;align-items:center;gap:10px;padding:9px 10px 9px 12px;border-radius:var(--rl-r12);color:#fff;background:linear-gradient(180deg,#262b38,#12151c);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--rl-sh-lg);font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.3s var(--rl-ease);max-width:min(92vw,560px);overflow:hidden}
.rlx .rl-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rlx .rl-toast .k{color:#4ade9a;display:grid}
.rlx .rl-toast.is-err .k{color:#ff8fa6}
.rlx .rl-toast .m{overflow:hidden;text-overflow:ellipsis}
.rlx .rl-toast button{height:28px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,.1);font-weight:700;font-size:12.5px;color:#fff}
.rlx .rl-toast button:hover{background:rgba(255,255,255,.2)}
.rlx .rl-toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rl-acc);transform-origin:left}
.rlx .rl-toast.is-on::after{animation:rl-bar var(--rl-life,3.2s) linear forwards}
@keyframes rl-bar{to{transform:scaleX(0)}}

@media (max-width:760px){
  .rlx .rl-dlg,.rlx .rl-dlg.is-wide,.rlx .rl-dlg.is-slim{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:92vh;border-radius:24px 24px 0 0}
  .rlx .rl-dlg::before{content:"";flex:none;width:38px;height:4px;border-radius:9px;background:#d5d9e3;margin:9px auto 0}
  .rlx .rl-dlg.is-enter{animation:rl-sheetin .32s var(--rl-ease)}
  .rlx .rl-drawer,.rlx .rl-drawer.is-wide{inset:0;width:auto;border-radius:0}
  .rlx .rl-menu{left:12px!important;right:12px!important;top:auto!important;bottom:12px;width:auto;transform-origin:bottom}
  .rlx .rl-grid2{grid-template-columns:1fr}
  .rlx .rl-ov-ft .hint{display:none}
  .rlx .rl-ov-ft .rl-btn{flex:1;height:46px;min-height:46px!important}
  .rlx .rl-toast{top:64px;max-width:calc(100vw - 24px)}
}
@keyframes rl-sheetin{from{transform:translateY(60%);opacity:.4}}
@media (prefers-reduced-motion:reduce){.rlx *,.rlx *::before,.rlx *::after{animation:none!important;transition:none!important}}