/* Reachly UI system — the LIST PAGE layout and the people filter panel.
   (Tokens and components: /ui/rl-ui.css.) Every list screen — Contacts first,
   then campaigns, webinars, templates — is this same frame: page header,
   optional AI notice, and a board with the filter panel beside the results. */

/* ── the list page: header · notice · board ── */
/* A list page owns the whole area under the top bar and scrolls inside itself,
   so the old content wrapper gives up its padding while one is showing. */
.content:has(> .rl-page.active){padding:0!important;overflow:hidden}
/* --rl-banner-h: the owner's announcement banner sits between the header and
   the page (rl-bell.js publishes its height, 0 when there is none). A page
   sized to the window under the header ran that much past the bottom — on a
   phone, its last rows under the tab bar where nothing could scroll them out. */
.rlx.rl-page{display:none;flex-direction:column;height:calc(100vh - 68px - var(--rl-banner-h,0px));height:calc(100dvh - 68px - var(--rl-banner-h,0px));margin:0;padding:20px 24px 18px;background:var(--rl-bg);overflow:hidden}
.rlx.rl-page.active{display:flex}
.rlx .rl-pg-hd{flex:none;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rlx .rl-pg-hd h1{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0;color:var(--rl-ink)}
.rlx .rl-pg-hd p{color:var(--rl-ink3);font-size:13px;margin:2px 0 0}
.rlx .rl-pg-hd p b{color:var(--rl-ink2);font-weight:600}
.rlx .rl-pg-hd .acts{margin-left:auto;display:flex;gap:8px}
.rlx .rl-live{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:0;color:var(--rl-ok);background:color-mix(in srgb,var(--rl-ok) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-ok) 22%,transparent);vertical-align:middle;margin-left:10px;position:relative;top:-3px}
.rlx .rl-live i{width:6px;height:6px;border-radius:50%;background:var(--rl-ok);animation:rl-pulse 2s infinite}
.rlx .rl-live.is-off{color:var(--rl-ink3);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair)}
.rlx .rl-live.is-off i{background:var(--rl-ink4);animation:none}
@keyframes rl-pulse{0%{box-shadow:0 0 0 0 rgba(14,159,110,.5)}70%{box-shadow:0 0 0 7px rgba(14,159,110,0)}100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}}
.rlx .rl-notice{flex:none;display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:10px 12px 10px 10px;font-size:13.5px}
.rlx .rl-notice .rl-tile{--c:#ff8a70;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);width:34px;height:34px;border-radius:10px}
.rlx .rl-notice b{color:#fff}
.rlx .rl-notice .t{flex:1;min-width:0}
.rlx .rl-notice .rl-btn{height:32px;min-height:32px!important}
.rlx .rl-notice .x{color:#8e95a8;display:grid;place-items:center;width:28px;height:28px;border-radius:8px}
.rlx .rl-notice .x:hover{background:rgba(255,255,255,.1);color:#fff}
.rlx .rl-board{flex:1;min-height:0;display:flex;border:1px solid var(--rl-line);border-radius:var(--rl-r16);background:var(--rl-surface);overflow:hidden;box-shadow:var(--rl-sh-sm)}
.rlx .rl-res{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.rlx .rl-res-hd{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rl-line)}
.rlx .rl-res-hd .cnt{font-size:14px;color:var(--rl-ink2);white-space:nowrap}
.rlx .rl-res-hd .cnt b{color:var(--rl-ink);font-weight:700}
.rlx .rl-res-hd .acts{margin-left:auto;display:flex;gap:8px}
.rlx .rl-search{flex:0 1 250px;min-width:120px;display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;border:1px solid var(--rl-line);border-radius:var(--rl-r10);background:#fff;color:var(--rl-ink3);box-shadow:var(--rl-sh-xs);transition:.15s}
.rlx .rl-search:focus-within{border-color:var(--rl-acc);box-shadow:0 0 0 4px var(--rl-ring);color:var(--rl-ink)}
.rlx .rl-active{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--rl-line);overflow-x:auto;scrollbar-width:none;background:#fcfcfd}
.rlx .rl-active .lb{flex:none;font-size:12.5px;font-weight:700;color:var(--rl-ink2)}
.rlx .rl-fchip{flex:none;display:inline-flex;align-items:center;height:30px;max-width:340px;border-radius:99px;border:1px solid var(--rl-line);background:#fff;font-size:12.5px;white-space:nowrap;overflow:hidden;box-shadow:var(--rl-sh-xs);animation:rl-pop .22s var(--rl-ease)}
@keyframes rl-pop{from{opacity:0;transform:scale(.92)}}
.rlx .rl-fchip:hover{border-color:#c9cedb}
.rlx .rl-fchip.is-ex{border-color:color-mix(in srgb,var(--rl-danger) 35%,var(--rl-line));background:#fff7f8}
.rlx .rl-fchip .t{display:inline-flex;align-items:center;gap:6px;height:100%;min-width:0;padding:0 4px 0 12px;color:var(--rl-ink2);font-weight:500}
.rlx .rl-fchip .t b{color:var(--rl-ink);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.rlx .rl-fchip .t .no{color:var(--rl-danger);font-weight:700}
.rlx .rl-fchip .x{flex:none;height:100%;padding:0 10px 0 5px;color:var(--rl-ink3);display:grid;place-items:center}
.rlx .rl-fchip .x:hover{color:var(--rl-danger)}
.rlx .rl-joiner{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--rl-ink4)}
/* The word between two chips is a CHOICE (owner: "can we click on AND and
   make it OR" ... "make it clearly visible so that users should see they can
   switch AND/OR on click"). So it is drawn as a button at REST, not only on
   hover: a small outlined pill that reads as something to press. AND binds
   tighter, so a line reads the way SQL does — Tag1 AND Tag2 OR Tag3 is
   (Tag1 AND Tag2) OR Tag3. A word that cannot be flipped (two values of one
   filter a contact can only hold one of) stays plain text. */
.rlx button.rl-joiner{padding:3px 8px;border-radius:999px;color:var(--rl-ink3);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line);cursor:pointer;transition:.13s var(--rl-ease)}
.rlx button.rl-joiner:hover{color:var(--rl-acc2);background:var(--rl-acc-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 34%,transparent);transform:translateY(-1px)}
.rlx button.rl-joiner:active{transform:none}
.rlx button.rl-joiner:focus-visible{outline:0;color:var(--rl-acc2);box-shadow:0 0 0 3px var(--rl-ring)}
.rlx button.rl-joiner.is-or{color:var(--rl-acc2);background:var(--rl-acc-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 22%,transparent)}
.rlx .rl-clr{flex:none;font-size:12.5px;font-weight:600;color:var(--rl-ink3);padding:0 6px}
.rlx .rl-clr:hover{color:var(--rl-ink)}
.rlx .rl-ask{flex:none;margin:12px 16px 0;padding:14px 16px;animation:rl-drop .25s var(--rl-ease)}
@keyframes rl-drop{from{opacity:0;transform:translateY(-4px)}}
.rlx .rl-ask .row{display:flex;align-items:center;gap:11px;color:#ff8a70}
.rlx .rl-ask input.rl-bare{font-size:15px!important;color:#fff!important}
.rlx .rl-ask input::placeholder{color:#7d8498}
.rlx .rl-ask .rl-kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#b9bfce}
.rlx .rl-ask .try{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;font-size:12px;color:#8e95a8;align-items:center}
.rlx .rl-ask .try button{height:27px;padding:0 11px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#d5d9e4;font-weight:500;font-size:12px}
.rlx .rl-ask .try button:hover{background:rgba(255,255,255,.14);color:#fff}
.rlx .rl-ask .note{margin-top:9px;font-size:12.5px;color:#b9bfce}
.rlx .rl-res-body{flex:1;min-height:0;overflow:auto}
.rlx .rl-res-ft{flex:none;display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--rl-line);font-size:13px;color:var(--rl-ink2);background:#fff}
.rlx .rl-res-ft b{color:var(--rl-ink)}
.rlx .rl-res-ft .acts{margin-left:auto;display:flex;gap:8px}
.rlx .rl-who{display:flex;align-items:center;gap:11px;min-width:160px;white-space:nowrap}
.rlx .rl-who b{display:block;font-weight:700;font-size:13.5px;letter-spacing:-.005em;color:var(--rl-ink)}
.rlx .rl-who span{font-size:12px;color:var(--rl-ink3)}
.rlx .rl-who .out{color:var(--rl-danger);font-weight:600}
.rlx .rl-read{max-width:280px}
.rlx .rl-read div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .rl-read .nx{display:flex;align-items:center;gap:5px;color:var(--rl-acc2);font-size:12.5px;font-weight:600;margin-top:1px}
.rlx button.rl-dotpill{height:28px;padding:0 8px;margin-left:-8px;border-radius:var(--rl-r8)}
.rlx button.rl-dotpill:hover{background:var(--rl-surface3)}
.rlx .rl-cards{display:none}
.rlx .rl-card{display:block;width:100%;padding:13px 0;border-bottom:1px solid #f0f1f5}
.rlx .rl-card .top{display:flex;align-items:center;gap:11px}
.rlx .rl-card .top b{font-size:14.5px;font-weight:700}
.rlx .rl-card .top .sp{margin-left:auto;font-weight:700}
.rlx .rl-card .meta{display:flex;align-items:center;gap:10px;margin:7px 0 0 45px;flex-wrap:wrap}
.rlx .rl-card .rd{margin:6px 0 0 45px;font-size:13px;color:var(--rl-ink2)}
.rlx .rl-bulk{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:2px;padding:6px 6px 6px 8px;border-radius:var(--rl-r16);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;white-space:nowrap;animation:rl-rise .28s var(--rl-ease)}
@keyframes rl-rise{from{opacity:0;transform:translate(-50%,14px)}}
.rlx .rl-bulk .ct{display:flex;align-items:center;gap:8px;padding:0 12px 0 4px;margin-right:4px;border-right:1px solid rgba(255,255,255,.12);font-weight:700}
.rlx .rl-bulk .ct i{font-style:normal;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--rl-acc);display:grid;place-items:center;font-size:12px}
.rlx .rl-bulk button{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:var(--rl-r10);color:#cdd2de;font-size:12.5px;font-weight:600}
.rlx .rl-bulk button:hover{background:rgba(255,255,255,.1);color:#fff}
.rlx .rl-bulk button.is-danger:hover{background:rgba(225,29,72,.25);color:#ffb3c4}
.rlx .rl-only-ph{display:none}
.rlx .rl-choice{width:100%;display:flex;align-items:center;gap:13px;padding:13px;border-radius:var(--rl-r12);box-shadow:inset 0 0 0 1px var(--rl-line);transition:.15s;background:#fff}
.rlx .rl-choice:hover{box-shadow:inset 0 0 0 1px #c9cedb}
.rlx .rl-choice.is-on{box-shadow:inset 0 0 0 2px var(--rl-acc);background:#fffaf8}
.rlx .rl-choice .t{flex:1;min-width:0}
.rlx .rl-choice .t b{display:block;font-size:14px}
.rlx .rl-choice .t span{font-size:12.5px;color:var(--rl-ink3)}

/* ── the people filter panel ── */
.rlx .rl-pf{flex:none;width:296px;display:flex;flex-direction:column;border-right:1px solid var(--rl-line);min-height:0;background:linear-gradient(180deg,#fff,#fcfcfd)}
.rlx .rl-pf-top{flex:none;padding:14px 14px 8px}
.rlx .rl-pf-find{display:flex;align-items:center;gap:9px;height:40px;margin:0;padding:0 12px;border:1px solid var(--rl-line);border-radius:var(--rl-r10);color:var(--rl-ink3);background:#fff;box-shadow:var(--rl-sh-xs);transition:.15s}
.rlx .rl-pf-find:focus-within{border-color:var(--rl-acc);box-shadow:0 0 0 4px var(--rl-ring);color:var(--rl-ink)}
.rlx .rl-pf-scroll{flex:1;min-height:0;overflow:hidden auto;padding:0 14px 8px}
.rlx .rl-pf-lbl{display:flex;align-items:center;padding:16px 2px 6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rl-ink3)}
.rlx .rl-pf-view{display:flex;align-items:center;border-radius:var(--rl-r8);transition:background .12s}
.rlx .rl-pf-view>button:first-child{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:34px;padding:0 9px;font-size:13.5px;color:var(--rl-ink2);font-weight:500}
.rlx .rl-pf-view .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-pf-view .n{margin-left:auto;font-size:12px;color:var(--rl-ink3);font-weight:500}
.rlx .rl-pf-view:hover{background:var(--rl-surface2)}
.rlx .rl-pf-view.is-on{background:var(--rl-acc-soft);box-shadow:inset 0 0 0 1px rgba(241,91,65,.16)}
.rlx .rl-pf-view.is-on>button:first-child{color:var(--rl-acc2);font-weight:700}
.rlx .rl-pf-view .rm{width:26px;height:26px;margin-right:4px;border-radius:7px;display:none;place-items:center;color:var(--rl-ink3)}
.rlx .rl-pf-view:hover .rm{display:grid}
.rlx .rl-pf-view .rm:hover{background:#fff;color:var(--rl-danger)}
.rlx .rl-pf-grp{display:flex;gap:9px;align-items:flex-start;margin-top:8px;padding:9px 10px;border-radius:var(--rl-r10);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair);font-size:12.5px;color:var(--rl-ink2)}
.rlx .rl-pf-grp b{display:block;color:var(--rl-ink);font-size:12.5px}
.rlx .rl-pf-grp>span{color:var(--rl-ink3);margin-top:1px}
.rlx .rl-pf-grp>div{flex:1;min-width:0;word-break:break-word}
.rlx .rl-pf-grp>button{color:var(--rl-ink3);display:grid}
.rlx .rl-pf-row{border-bottom:1px solid var(--rl-line)}
.rlx .rl-pf-row:last-child{border-bottom:0}
.rlx .rl-pf-hd{display:flex;align-items:center;gap:11px;height:46px;padding:0 2px}
.rlx .rl-pf-hd .t{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:100%;font-size:14px;font-weight:500}
.rlx .rl-pf-hd .l{white-space:nowrap}
.rlx .rl-pf-hd .s{flex:0 1 auto;min-width:0;margin-left:auto;font-size:12px;color:var(--rl-acc2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .rl-pf-hd .cv{color:var(--rl-ink4);transition:transform .2s var(--rl-ease);margin-left:auto;display:grid}
.rlx .rl-pf-hd .s+.cv{margin-left:0}
.rlx .rl-pf-hd:hover .cv{color:var(--rl-ink2)}
.rlx .rl-pf-row.is-open .cv{transform:rotate(180deg)}
.rlx .rl-pf-body{margin:0 0 12px;padding:8px;border-radius:var(--rl-r12);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair);animation:rl-drop .22s var(--rl-ease)}
.rlx .rl-pf-opt{display:flex;align-items:center;border-radius:7px;transition:background .1s}
.rlx .rl-pf-opt:hover{background:#e8eaf0}
.rlx .rl-pf-opt.is-zero{opacity:.45}
.rlx .rl-pf-opt.is-ex .l{color:var(--rl-danger);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--rl-danger) 45%,transparent)}
.rlx .rl-pf-optmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:32px;padding:4px 6px;font-size:13px}
.rlx .rl-pf-optmain .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-pf-opt .n{flex:none;padding:0 6px 0 4px;font-size:12px;color:var(--rl-ink3);min-width:34px;text-align:right}
.rlx .rl-pf-ex{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--rl-ink4);opacity:0}
.rlx .rl-pf-opt:hover .rl-pf-ex,.rlx .rl-pf-opt.is-ex .rl-pf-ex,.rlx .rl-pf-ex:focus-visible{opacity:1}
.rlx .rl-pf-ex:hover,.rlx .rl-pf-opt.is-ex .rl-pf-ex{color:var(--rl-danger);background:#fff}
.rlx .rl-pf-more{width:100%;padding:7px 6px 3px;font-size:12px;font-weight:600;color:var(--rl-ink3);text-align:left}
.rlx .rl-pf-more:hover{color:var(--rl-ink)}
.rlx .rl-pf-none{padding:10px 6px;font-size:12.5px;color:var(--rl-ink3);text-align:center}
/* A one-line note under a group heading (the website group, when the workspace has no tracking line). */
.rlx .rl-pf-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 6px;padding:9px 11px;border-radius:10px;background:var(--rl-surface2);font-size:12px;line-height:1.45;color:var(--rl-ink2)}
.rlx .rl-pf-note svg{flex:none;margin-top:1px;color:var(--rl-ink3)}
.rlx .rl-pf-load{display:flex;flex-direction:column;gap:9px;padding:8px 6px}
.rlx .rl-pf-rng{position:relative;height:24px;margin:6px 9px 10px}
.rlx .rl-pf-rng .trk,.rlx .rl-pf-rng .fill{position:absolute;top:10px;height:4px;border-radius:9px}
.rlx .rl-pf-rng .trk{left:0;right:0;background:#d5d9e2}
.rlx .rl-pf-rng .fill{background:var(--rl-ink)}
.rlx .rl-pf-rng input{position:absolute;left:-9px;top:0;width:calc(100% + 18px);height:24px;min-height:0!important;margin:0;padding:0;border:0!important;-webkit-appearance:none;appearance:none;background:none!important;box-shadow:none!important;pointer-events:none}
.rlx .rl-pf-rng input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--rl-ink);cursor:grab;box-shadow:0 2px 5px rgba(16,24,40,.25)}
.rlx .rl-pf-rng input::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--rl-ink);cursor:grab}
.rlx .rl-pf-io{display:flex;align-items:center;gap:8px;padding:0 2px 2px}
.rlx .rl-pf-io label{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:38px;margin:0;padding:0 10px;border:1px solid var(--rl-line);border-radius:var(--rl-r8);background:#fff;color:var(--rl-ink3);font-size:13px;box-shadow:var(--rl-sh-xs)}
.rlx .rl-pf-io label:focus-within{border-color:var(--rl-ink)}
.rlx .rl-pf-io:not(.is-dates) input.rl-bare{text-align:right;font-weight:700}
.rlx .rl-pf-io.is-dates{margin-top:8px}
.rlx .rl-pf-pills{display:flex;flex-wrap:wrap;gap:6px;padding:2px}
.rlx .rl-pf-pills button,.rlx .rl-pf-vals button{height:30px;padding:0 12px;border-radius:var(--rl-r8);border:1px solid var(--rl-line);background:#fff;font-size:12.5px;font-weight:600;color:var(--rl-ink2);box-shadow:var(--rl-sh-xs)}
.rlx .rl-pf-pills button.is-on,.rlx .rl-pf-vals button.is-on{background:var(--rl-ink);border-color:var(--rl-ink);color:#fff}
.rlx .rl-pf-cust{display:flex;flex-direction:column;gap:6px;padding:2px}
.rlx .rl-pf-vals{display:flex;flex-wrap:wrap;gap:6px;padding:8px 2px 2px}
.rlx .rl-pf-vals button{font-weight:500}
.rlx .rl-pf-vals button span{color:var(--rl-ink3);margin-left:4px}
.rlx .rl-pf-vals button.is-on span{color:#c9cedb}
.rlx .rl-pf-ft{flex:none;display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid var(--rl-line);background:#fff}
.rlx .rl-pf-ft .rs{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rl-ink4);color:var(--rl-ink2);white-space:nowrap}
.rlx .rl-pf-ft .rs:hover{color:var(--rl-ink)}
.rlx .rl-pf-ft .rl-btn{flex:1}
.rlx .rl-pf-scrim{display:none}

@media (max-width:1360px){.rlx .rl-col-src{display:none}}
@media (max-width:1180px){.rlx .rl-col-add{display:none}.rlx .rl-pf{width:268px}}
@media (max-width:760px){
  /* A rebuilt page ends ABOVE the app's tab bar, which is fixed over the
     bottom 59px of every phone screen. Each page used to pay for that itself
     — a bottom padding here, a pinned bar offset there — and the ones that
     did not simply ran their last rows underneath it. One subtraction, and
     "the bottom of the page" means the bottom you can see.
     Two things deliberately keep their own offset, because BOTH are fixed to
     the viewport rather than laid out in the page, so shortening the page
     cannot move them: the phone FABs (.wb-fab, .wf-fab) and the full-screen
     overlays (.rl-cb-host and friends, which cover the tab bar and so carry
     env(safe-area-inset-bottom) of their own).
     The inbox thread hides the tab bar while it is open and the old sheet
     gives #page-inbox height:100dvh !important there, which still wins. */
  /* 61px, measured: that is this shell's top bar on every rebuilt page at
     360, 375 and 414 wide. The sheet's own --rl-topbar-h says 52, which the
     bar has not been for a while, and the 56 that used to be here left the
     last few pixels of every page under the tab bar. */
  /* The old shell animates .page in with translateY(8px) on a phone, and on
     these pages it never settles — measured at rest, the page sat 8px low and
     8px of it under the tab bar. Each rebuilt page used to turn that off in
     the old sheet (`#page-contacts.active{animation:none!important}`); now
     the pages do it themselves, with their own entry left to the parts that
     move inside them. */
  .rlx.rl-page{height:calc(100vh - 61px - var(--rl-tabbar-h,59px) - var(--rl-banner-h,0px));height:calc(100dvh - 61px - var(--rl-tabbar-h,59px) - var(--rl-banner-h,0px));padding:14px 0 0;animation:none}
  .rlx .rl-pg-hd{padding:0 16px;margin-bottom:12px}
  .rlx .rl-pg-hd p,.rlx .rl-pg-hd .lbl,.rlx .rl-live,.rlx .rl-hide-ph{display:none!important}
  .rlx .rl-only-ph{display:inline-flex}
  .rlx .rl-pg-hd h1{font-size:22px}
  .rlx .rl-notice{margin:0 16px 12px;font-size:12.5px}
  .rlx .rl-notice .rl-tile{display:none}
  .rlx .rl-board{border-radius:0;border-width:1px 0 0;flex-direction:column;box-shadow:none}
  .rlx .rl-pf-scrim.is-on{display:block;position:fixed;inset:0;z-index:1900;background:rgba(15,18,24,.45);backdrop-filter:blur(4px)}
  .rlx .rl-pf{position:fixed;left:0;right:0;bottom:0;z-index:1901;width:auto;height:86vh;border:0;border-radius:24px 24px 0 0;background:#fff;box-shadow:var(--rl-sh-lg);transform:translateY(105%);transition:transform .32s var(--rl-ease)}
  .rlx .rl-pf.is-show{transform:none}
  .rlx .rl-pf::before{content:"";flex:none;width:38px;height:4px;border-radius:9px;background:#d5d9e3;margin:9px auto 0}
  .rlx .rl-pf-hd{height:50px}
  .rlx .rl-pf-hd .t{font-size:15px}
  .rlx .rl-pf-optmain{min-height:40px;font-size:14.5px}
  .rlx .rl-pf-ex{opacity:1}
  .rlx .rl-pf-ft .rl-btn{height:46px;min-height:46px!important}
  .rlx .rl-res-hd{padding:10px 16px;flex-wrap:wrap}
  .rlx .rl-search{flex:1 1 100%;order:5;height:40px}
  .rlx .rl-res-body table{display:none}
  .rlx .rl-cards{display:block;padding:0 16px}
  .rlx .rl-res-ft .acts .rl-btn:not(.is-pri),.rlx .rl-res-ft .showing{display:none}
  .rlx .rl-res-ft .acts{flex:1}
  .rlx .rl-res-ft .acts .is-pri{flex:1;height:46px;min-height:46px!important;border-radius:var(--rl-r12)!important}
  .rlx .rl-bulk{bottom:78px;max-width:94vw;overflow-x:auto}
  .rlx .rl-bulk button span{display:none}
}