:root{
  --accent:#5B33E0; --accent-hover:#4A28C7; --accent-press:#3E20A8;
  --accent-050:#F4F1FE; --accent-100:#ECE6FD; --accent-200:#DBCFFA;
  --focus:rgba(91,51,224,.30); --lime:#C6F24E;
  --ink-900:#17161C; --ink-800:#26242D; --ink-700:#3A3742; --ink-600:#57545F;
  --ink-500:#6E6B77; --ink-400:#8B8892; --ink-300:#B7B4BE;
  --bg:#F8F9FA; --surface:#fff; --surface-subtle:#FAFAFB; --surface-inset:#F3F3F6;
  --border:#E6E6EB; --border-subtle:#EFEFF3; --border-strong:#D8D8DF;
  --ok-bg:#E9F6EF; --ok-fg:#15803D; --ok-bd:#BFE3CD;
  --warn-bg:#FDF3E3; --warn-fg:#B45309; --warn-bd:#F1D9AE;
  --err-bg:#FDECEC; --err-fg:#DC2626; --err-bd:#F5C9C9;
  --info-bg:#EEF3FE; --info-fg:#1D4ED8; --info-bd:#CBD9F8;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --shadow-card:0 1px 2px rgba(23,22,28,.05),0 1px 3px rgba(23,22,28,.05);
  --shadow-pop:0 12px 32px rgba(23,22,28,.12);
  --sidebar:250px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink-600);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-100)}

/* ---------- App frame ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------- Sidebar ---------- */
.brand{display:flex;align-items:center;gap:9px;padding:20px 18px 14px}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--lime);display:grid;place-items:center;flex:0 0 28px}
.brand .mark svg{width:16px;height:16px}
.brand .word{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink-900)}
.brand .word b{color:var(--accent);font-weight:700}
.brand-logo{height:27px;width:auto;display:block}
.side-search{margin:2px 14px 10px;position:relative}
.side-search input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff;padding:0 12px 0 34px;font:inherit;font-size:13px;color:var(--ink-700);box-shadow:var(--shadow-card)}
.side-search input::placeholder{color:var(--ink-400)}
.side-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-400)}
.side-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus);background:#fff}
.nav{flex:1;overflow-y:auto;padding:6px 10px 20px}
.nav::-webkit-scrollbar{width:8px}.nav::-webkit-scrollbar-thumb{background:#e3e3e8;border-radius:8px}
.nav-group{font-size:10.5px;font-weight:600;letter-spacing:.07em;color:var(--ink-400);text-transform:uppercase;padding:16px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-600);font-size:13.5px;font-weight:500;cursor:pointer;position:relative}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;color:var(--ink-400)}
.nav-item .chev{margin-left:auto;width:14px;height:14px;color:var(--ink-400)}
.nav-item:hover{background:var(--surface-inset);color:var(--ink-800)}
.nav-item.open{color:var(--ink-900);font-weight:600}
.subnav{margin:2px 0 4px}
.sub-item{display:flex;align-items:center;height:34px;padding:0 12px 0 40px;border-radius:var(--r-md);font-size:13px;color:var(--ink-700);cursor:pointer;font-weight:500}
.sub-item:hover{background:var(--surface-inset);color:var(--ink-900)}
.sub-item.active{background:var(--accent-100);color:var(--accent);font-weight:600}

/* ---------- Topbar ---------- */
.topbar{height:60px;background:var(--bg);display:flex;align-items:center;padding:0 24px 0 20px;gap:14px;position:sticky;top:0;z-index:20}
.topbar .tb-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink-900)}
.tb-info{width:16px;height:16px;color:var(--ink-400)}
.tb-spacer{flex:1}
.tb-icon{width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--ink-500);cursor:pointer}
.tb-icon:hover{background:var(--surface-inset);color:var(--ink-800)}
.tb-icon svg{width:17px;height:17px}
.tb-user{display:flex;align-items:center;gap:9px;padding-left:6px;cursor:pointer}
.tb-user .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6E4FF0,#9B7BFF);display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}
.tb-user .who{line-height:1.15}
.tb-user .who b{display:block;font-size:13px;color:var(--ink-900);font-weight:600}
.tb-user .who span{font-size:10.5px;letter-spacing:.05em;color:var(--ink-400);font-weight:600}

/* ---------- Page ---------- */
.page{padding:28px 32px 56px;max-width:1500px;width:100%;margin:0 auto}
.page-head{display:block;margin-bottom:24px}
.page-head .crumb{margin-bottom:10px}
.ph-row{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.ph-left h1,.page-head .ph-left h1{font-size:22px;line-height:1.2;font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
/* One row. The 560px cap wrapped half the screens' descriptions onto a second line
   while ~900px of empty header sat beside them; three pages had already overridden it
   locally, so it belongs here. .ph-row still wraps, so on a narrow window the brand
   switch drops below rather than the sentence breaking. */
.ph-left p,.page-head .ph-left p{font-size:13.5px;color:var(--ink-500);margin-top:5px;max-width:none;white-space:nowrap}
.ph-right,.page-head .ph-right{margin-left:auto;display:flex;align-items:center;gap:10px}
/* controls toolbar (scope + view filters) */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.toolbar .scope{margin-bottom:0}
.toolbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill-btn.icon{padding:0;width:40px;justify-content:center}

/* Brand context switcher */
/* dimensions match the environment switch on Sandbox — these sit side by side in the page header */
.brand-switch{display:flex;align-items:center;gap:11px;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-card);cursor:pointer;font-weight:600;color:var(--ink-800);font-size:13.5px}
.brand-switch:hover{border-color:var(--border-strong)}
.brand-switch .globe{width:26px;height:26px;border-radius:7px;background:var(--accent-050);display:grid;place-items:center;color:var(--accent)}
.brand-switch .globe svg{width:15px;height:15px}
.brand-switch .lbl{line-height:1.1}
.brand-switch .lbl small{display:block;font-size:10px;letter-spacing:.05em;color:var(--ink-400);font-weight:600;text-transform:uppercase}
.brand-switch .cx{width:15px;height:15px;color:var(--ink-400);margin-left:2px;transition:transform .16s}

/* ---------- Dropdown menu (shared component) ---------- */
.dd{position:relative;display:inline-flex}
[data-dd]{cursor:pointer}
[data-dd].dd-open .cx,[data-dd].dd-open .chev{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:6px;display:none;flex-direction:column;gap:1px}
.dd-menu.dd-right{left:auto;right:0}
.dd-menu.open{display:flex;animation:dd-in .13s ease}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-head{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);padding:8px 10px 5px}
.dd-item{display:flex;align-items:center;gap:11px;min-height:38px;padding:6px 10px;border:none;background:none;border-radius:var(--r-sm);font:inherit;font-size:13px;font-weight:500;color:var(--ink-700);cursor:pointer;text-align:left;width:100%}
.dd-item:hover{background:var(--surface-inset);color:var(--ink-900)}
.dd-item.sel{color:var(--accent);font-weight:600}
.dd-item .dd-ic{width:28px;height:28px;border-radius:8px;background:var(--surface-inset);color:var(--ink-500);display:grid;place-items:center;flex:0 0 28px}
.dd-item .dd-ic svg{width:15px;height:15px}
.dd-item.sel .dd-ic{background:var(--accent-050);color:var(--accent)}
.dd-item .dd-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.dd-item .dd-tx small{font-size:11px;font-weight:500;color:var(--ink-400)}
.dd-item .dd-check{width:16px;height:16px;color:var(--accent);opacity:0;flex:0 0 16px}
.dd-item.sel .dd-check{opacity:1}
.dd-sep{height:1px;background:var(--border-subtle);margin:5px 4px}

/* ---------- Form fields (shared) ---------- */
.input{width:100%;height:42px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:0 13px;font:inherit;font-size:13.5px;color:var(--ink-800)}
.input::placeholder{color:var(--ink-400)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
.select{width:100%;height:42px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:0 38px 0 13px;font:inherit;font-size:13.5px;color:var(--ink-800);appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238B8892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 13px center;cursor:pointer}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
.field{margin-bottom:18px}
.field>label{display:block;font-size:13px;font-weight:500;color:var(--ink-700);margin-bottom:7px}

/* ---------- Multi-select dropdown (shared) ----------
   Promoted from Sandbox when Fees & Charges became the second screen to need it. */
.ms{position:relative}
.ms-trigger{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:0 13px;display:flex;align-items:center;gap:9px;font:inherit;font-size:13.5px;color:var(--ink-800);cursor:pointer;text-align:left}
.ms-trigger:hover{border-color:var(--border-strong)}
.ms-trigger.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
.ms-trigger .ph{color:var(--ink-400)}
.ms-trigger .cx{margin-left:auto;width:16px;height:16px;flex:0 0 16px;color:var(--ink-400);transition:transform .18s}
.ms-trigger.on .cx{transform:rotate(180deg)}
.ms-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-pop);display:none;z-index:10;overflow:hidden}
.ms-menu.open{display:block}
/* flat search bar — the menu reads as one list, not three stacked boxes */
.ms-search{position:relative;border-bottom:1px solid var(--border-subtle)}
.ms-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-400)}
.ms-search input{width:100%;height:44px;border:none;background:transparent;padding:0 12px 0 38px;font:inherit;font-size:13.5px;color:var(--ink-800)}
.ms-search input:focus{outline:none}
/* "Select all" is the first row of the list, not a footer bar that fights the popover's own buttons */
.ms-all{border-bottom:1px solid var(--border-subtle);border-radius:0;padding:11px 13px}
.ms-all .tx{color:var(--accent);font-weight:600}
.ms-list{max-height:188px;overflow:auto;padding:6px}
.ms-empty{padding:18px;text-align:center;font-size:12.5px;color:var(--ink-400)}
.ms-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ms-chip{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 5px 0 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-050);border:1px solid var(--accent-100)}
.ms-chip button{width:17px;height:17px;border:none;background:none;padding:0;display:grid;place-items:center;color:var(--accent);cursor:pointer;border-radius:50%}
.ms-chip button:hover{background:var(--accent-100)}
.ms-chip button svg{width:11px;height:11px}

/* option rows */
.fcheck{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s}
.fcheck:hover{background:var(--surface-subtle)}
/* the hidden input must be anchored INSIDE its own row — otherwise focus-on-click
   makes the browser scroll .ms-menu (still scrollable despite overflow:hidden),
   shoving the search + list out of the clipped box */
.fcheck input{position:absolute;left:10px;top:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.fcheck .bx{position:relative;width:17px;height:17px;flex:0 0 17px;border:1.5px solid var(--border-strong);border-radius:5px;display:grid;place-items:center;background:var(--surface);transition:background .15s,border-color .15s}
.fcheck .bx svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .12s}
.fcheck input:checked + .bx{background:var(--accent);border-color:var(--accent)}
.fcheck input:checked + .bx svg{opacity:1}
/* partial selection reads as a dash, not a tick */
.fcheck .bx.ind{background:var(--accent);border-color:var(--accent)}
.fcheck .bx.ind svg{opacity:0}
.fcheck .bx.ind::after{content:"";position:absolute;width:9px;height:2px;border-radius:1px;background:#fff}
.fcheck .tx{flex:1;min-width:0;font-size:13px;color:var(--ink-800);display:flex;align-items:center;gap:8px}
.fcheck .sd{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.fcheck .cnt{font-size:11.5px;font-weight:600;color:var(--ink-400);background:var(--surface-inset);border-radius:999px;padding:2px 8px}
.fcheck .cnt.zero{color:var(--ink-300);background:transparent}

/* ---------- Rule conditions (shared) ----------
   Promoted from the Threshold editor so Limits & Thresholds and Rules & Conditions
   draw a condition the same way. The container differs by screen (full page, drawer
   or inline) but the condition block itself does not. */
.cond-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:17px 19px;margin-bottom:14px}
.cond-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.cond-ic{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--accent-050);color:var(--accent);display:grid;place-items:center}
.cond-ic svg{width:17px;height:17px}
.cond-tt{flex:1;min-width:0}
.cond-tt .ct{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink-900)}
.cond-tt p{font-size:12.5px;color:var(--ink-500);margin:3px 0 0;line-height:1.5}
.cond-x{width:26px;height:26px;flex:0 0 26px;border:0;background:transparent;border-radius:var(--r-sm);color:var(--ink-400);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.cond-x:hover{background:var(--err-bg);color:var(--err-fg)}
.cond-x svg{width:15px;height:15px}
.cond-body{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
/* a switched-off condition is kept but greyed — you don't have to delete it to test without it */
.cond-card.is-off .cond-body{opacity:.45;pointer-events:none}
.fgrp{display:flex;flex-direction:column;gap:6px;min-width:0}
.fgrp>label{font-size:12px;color:var(--ink-600)}
.w-op{width:200px}.w-amt{width:190px}.w-cur{width:150px}.w-num{width:150px}.w-wide{flex:1;min-width:260px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.chiprow:not(:empty){margin-top:13px}
.vchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-inset);border-radius:999px;padding:5px 6px 5px 12px;font-size:12px;font-weight:600;color:var(--ink-700)}
.vchip button{width:18px;height:18px;border:0;background:transparent;border-radius:50%;color:var(--ink-400);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.vchip button:hover{background:var(--border);color:var(--ink-800)}
.vchip button svg{width:10px;height:10px}

/* "Add condition" picker — searchable, and only offers types not already used */
.cpick{width:340px;padding:0}
.cpick-search{position:relative;border-bottom:1px solid var(--border-subtle)}
.cpick-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-400)}
.cpick-search input{width:100%;height:42px;border:none;background:transparent;padding:0 12px 0 36px;font:inherit;font-size:13px;color:var(--ink-800)}
.cpick-search input:focus{outline:none}
.cpick-list{max-height:264px;overflow:auto;padding:6px}
.cpick-item{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;border:none;background:none;font:inherit;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s}
.cpick-item:hover{background:var(--surface-inset)}
.cpick-ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--accent-050);color:var(--accent);display:grid;place-items:center}
.cpick-ic svg{width:15px;height:15px}
.cpick-tx{flex:1;min-width:0;line-height:1.35}
.cpick-tx b{display:block;font-size:13px;font-weight:600;color:var(--ink-900)}
.cpick-tx small{display:block;font-size:11.5px;color:var(--ink-500);margin-top:2px}
.cpick-none{padding:18px;text-align:center;font-size:12.5px;color:var(--ink-400)}

/* the rule read back in words, so it can be checked before it is saved */
.rb-say{display:flex;gap:11px;align-items:flex-start;background:var(--surface-inset);border-radius:var(--r-md);padding:13px 15px;font-size:13px;line-height:1.6;color:var(--ink-700)}
.rb-say svg{width:16px;height:16px;flex:0 0 16px;color:var(--ink-400);margin-top:3px}
.rb-say .pill{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 9px;font-size:12.5px;font-weight:600;color:var(--accent);margin:0 2px}
.rb-say b{font-weight:600;color:var(--ink-900)}

/* ---------- Slide-over drawer (shared) ---------- */
.drawer{position:fixed;inset:0;z-index:200;display:none}
.drawer.open{display:block}
.drawer-overlay{position:absolute;inset:0;background:rgba(23,22,28,.42);opacity:0;transition:opacity .22s}
.drawer.open .drawer-overlay{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(760px,94vw);background:var(--surface);box-shadow:-16px 0 44px rgba(23,22,28,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:flex-start;gap:14px;padding:24px 28px 0}
.drawer-title{font-size:19px;font-weight:700;color:var(--ink-900);display:flex;align-items:center;gap:12px}
.drawer-x{margin-left:auto;width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--ink-500);cursor:pointer;flex:0 0 34px}
.drawer-x:hover{background:var(--surface-inset);color:var(--ink-800)}
.drawer-x svg{width:16px;height:16px}
.drawer-desc{padding:8px 28px 0;font-size:13px;color:var(--ink-500);line-height:1.5;max-width:640px}
.drawer-body{flex:1;overflow-y:auto;padding:22px 28px 28px}
.drawer-foot{display:flex;align-items:center;gap:12px;padding:15px 28px;border-top:1px solid var(--border)}
.drawer-foot-right{margin-left:auto;display:flex;gap:10px}
.badge-soft{font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-050);border:1px solid var(--accent-100);border-radius:999px;padding:3px 10px}

/* ---------- Table (shared, airy) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);padding:0 12px 10px;border-bottom:1px solid var(--border)}
.tbl tbody td{padding:13px 12px;border-bottom:1px solid var(--border-subtle);color:var(--ink-700);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface-subtle)}
.tbl thead th:first-child,.tbl tbody td:first-child{padding-left:2px}
.tbl thead th:last-child,.tbl tbody td:last-child{padding-right:2px}
.tbl .t-actions{width:48px;text-align:right}

/* Buttons */
.btn{height:40px;padding:0 16px;border-radius:var(--r-md);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;transition:background .15s,box-shadow .15s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}
.btn-secondary{background:var(--surface);color:var(--ink-800);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-inset)}
.btn-ghost{background:transparent;color:var(--accent);padding:0 10px}
.btn-ghost:hover{background:var(--accent-050)}
.btn-tint{background:var(--accent-050);color:var(--accent);border-color:var(--accent-100)}
.btn-tint:hover{background:var(--accent-100)}
.btn[disabled]{background:var(--surface-inset);color:var(--ink-300);border-color:var(--border);cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover{background:var(--surface-inset)}

/* Breadcrumb */
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-400);margin-bottom:8px}
.crumb .cur{color:var(--accent);font-weight:600}
.crumb svg{width:13px;height:13px}

/* Status chip w/ dot */
.chip-status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--ok-bg);color:var(--ok-fg)}
.chip-status .d{width:6px;height:6px;border-radius:50%;background:currentColor}

/* Toast */
/* Toasts float over the page at z-index 100, so anything that scrolls under them —
   dropdown menus, table row actions, the commit bar — had its clicks swallowed while
   a toast was visible. They are purely informational, so the toast itself ignores
   the pointer and only its close button stays interactive. */
#toasts{position:fixed;right:24px;bottom:24px;z-index:100;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
/* on screens with a sticky commit bar the stack must clear it — otherwise a toast
   sits on top of Save/Discard and swallows the click */
body:has(.commitbar) #toasts{bottom:88px}
.toast{display:flex;align-items:flex-start;gap:11px;min-width:290px;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:13px 14px;transform:translateY(8px);opacity:0;transition:opacity .18s,transform .18s}
.toast.show{transform:translateY(0);opacity:1}
.toast .ti{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px}
.toast .ti.ok{background:var(--ok-bg);color:var(--ok-fg)}
.toast .ti.info{background:var(--accent-050);color:var(--accent)}
.toast .ti svg{width:16px;height:16px}
.toast .tb b{display:block;font-size:13px;font-weight:600;color:var(--ink-900)}
.toast .tb span{font-size:12.5px;color:var(--ink-500)}
.toast .tx{margin-left:auto;color:var(--ink-400);cursor:pointer;background:none;border:none;padding:2px;pointer-events:auto}
.toast .tx svg{width:14px;height:14px;display:block}

/* Segmented tabs (page-level) */
.tabs{display:inline-flex;gap:2px;background:var(--surface-inset);border-radius:999px;padding:4px;margin-bottom:24px}
.tab{height:34px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-500);cursor:pointer;display:flex;align-items:center;border:none;background:transparent;font-family:inherit;transition:color .18s ease-out,background .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease-out}
.tab:hover{color:var(--ink-800)}
.tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-card)}

/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.card-pad{padding:28px}
.section-label{font-size:15px;font-weight:600;color:var(--ink-900);margin-bottom:2px}
.section-help{font-size:12.5px;color:var(--ink-500);margin-bottom:16px}

/* Segmented (inline control) */
.segmented{display:inline-flex;background:var(--surface-inset);border-radius:999px;padding:3px;gap:2px}
.segmented button{height:32px;padding:0 16px;border:none;background:transparent;border-radius:999px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-500);cursor:pointer;transition:color .18s ease-out,background .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease-out;display:inline-flex;align-items:center;gap:7px}
.segmented button:hover{color:var(--ink-800)}
.segmented button.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-card)}
.td{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.td.ok{background:var(--ok-fg)}.td.err{background:var(--err-fg)}.td.warn{background:var(--warn-fg)}

/* Toggle */
.toggle{width:40px;height:23px;border-radius:999px;background:var(--border-strong);position:relative;cursor:pointer;flex:0 0 40px;transition:background .24s cubic-bezier(.22,1,.36,1)}
/* knob eases with a touch of overshoot so the flick feels physical */
.toggle::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .26s cubic-bezier(.34,1.4,.64,1)}
.toggle.on{background:var(--accent)}.toggle.on::after{left:19.5px}
.toggle:active::after{width:21px}

.note{font-size:12px;color:var(--ink-400);margin-top:24px;text-align:center}

/* Anyone who asks for less motion gets none of it */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.hidden{display:none!important}

/* =========================================================
   ANALYTICS (Session Analytics screen)
   ========================================================= */
.scope{display:inline-flex;background:var(--surface-inset);border-radius:999px;padding:4px;margin-bottom:22px}
.scope button{height:38px;padding:0 24px;border:none;background:transparent;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-500);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.scope button svg{width:16px;height:16px}
.scope button.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-card)}

.pill-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer;font-weight:600;color:var(--ink-700);font-size:13px}
.pill-btn:hover{background:var(--surface-inset)}
.pill-btn svg{width:15px;height:15px;color:var(--ink-400)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1180px){.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}

.card-title{font-size:14px;font-weight:600;color:var(--ink-900)}
.card-sub{font-size:12px;color:var(--ink-500);margin-top:2px}

/* stat tile */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px 20px}
.stat .lbl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400)}
.stat .num{font-size:28px;font-weight:600;color:var(--ink-900);letter-spacing:-.01em;margin-top:9px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .foot{display:flex;align-items:center;gap:10px;margin-top:11px}
.stat .sub{font-size:12px;color:var(--ink-500)}

/* delta chip */
.delta{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.delta svg{width:12px;height:12px}
.delta.pos{background:var(--ok-bg);color:var(--ok-fg)}
.delta.neg{background:var(--err-bg);color:var(--err-fg)}
.delta.flat{background:var(--surface-inset);color:var(--ink-500)}

/* chart card */
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px}

/* Cashier Performance */
.perf-body{display:flex;gap:22px;align-items:center}
@media(max-width:520px){.perf-body{flex-direction:column;align-items:stretch}}
.perf-rates{flex:1;min-width:0}
.mrow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border-subtle)}
.mrow:last-child{border-bottom:none}
.mrow .mk{font-size:12.5px;color:var(--ink-600)}
.mrow .mv{display:flex;align-items:center;gap:8px}
.mrow .mv b{font-size:14px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.legend i{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-600);font-style:normal}
.legend i em{width:9px;height:9px;border-radius:3px;display:inline-block}

/* donut / gauge */
.donut-wrap{position:relative;display:grid;place-items:center;flex:0 0 auto}
.donut-c{position:absolute;text-align:center;pointer-events:none}
.donut-c b{display:block;font-size:20px;font-weight:700;color:var(--ink-900);line-height:1;font-variant-numeric:tabular-nums}
.donut-c span{font-size:11px;color:var(--ink-500)}

/* conversion block */
.conv{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.conv .cfoot{text-align:center}
.conv .cfoot .k{font-size:12.5px;color:var(--ink-500)}
.conv .cfoot .d{margin-top:6px}

/* approval trend block */
.appr{display:flex;flex-direction:column;gap:12px}
.appr .big{font-size:30px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums;line-height:1}
.appr .row{display:flex;align-items:center;gap:10px}
.spark{width:100%;height:60px;display:block}

/* line chart */
.linechart{width:100%;height:180px;display:block}

/* waterfall */
.wf{display:flex;gap:12px;align-items:flex-end;height:190px;margin-top:8px}
.wcol{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.wcap{font-size:12px;font-weight:600;color:var(--ink-800);margin-bottom:6px;font-variant-numeric:tabular-nums}
.wbar{width:100%;max-width:66px;border-radius:6px}
.wf-x{display:flex;gap:12px;margin-top:12px}
.wf-x div{flex:1;text-align:center;font-size:11px;color:var(--ink-500);line-height:1.35}
.wf-x div b{display:block;color:var(--ink-800);font-weight:600;font-size:12px;font-variant-numeric:tabular-nums}

/* Empty / error state (guideline 3A) */
.emptybox{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 16px;min-height:158px}
.emptybox .ei{width:46px;height:46px;border-radius:12px;background:var(--surface-inset);display:grid;place-items:center;color:var(--ink-400);margin-bottom:14px}
.emptybox .ei svg{width:22px;height:22px}
.emptybox.err .ei{background:var(--err-bg);color:var(--err-fg)}
.emptybox b{font-size:13.5px;color:var(--ink-800);font-weight:600}
.emptybox .et{font-size:12.5px;color:var(--ink-500);margin-top:4px;max-width:250px}

/* Global-disabled nested controls (guideline 3A) */
.is-disabled{opacity:.5;pointer-events:none}
/* ---------- Save & apply to brands ----------
   Publishing settings to OTHER brands overwrites their own values, so saving is a
   deliberate two-step: the modal is the checkpoint where you name the blast radius.
   Injected by app.js on first use — no per-page markup. */
/* Above .drawer (200): the brand modal is a confirmation OVER whatever is already
   open — Save inside the translation drawer opens it, and at 140 it rendered behind
   the drawer and could not be reached. It is the topmost dialog layer by definition. */
.bm{position:fixed;inset:0;z-index:240;display:none;align-items:center;justify-content:center;padding:20px}
.bm.open{display:flex}
.bm-ov{position:absolute;inset:0;background:rgba(23,22,28,.36)}
.bm-box{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 40px);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);display:flex;flex-direction:column}
.bm-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border-subtle)}
.bm-ic{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--warn-bg);color:var(--warn-fg);display:grid;place-items:center}
.bm-ic svg{width:18px;height:18px}
.bm-head h3{flex:1;min-width:0;font-size:16.5px;font-weight:600;color:var(--ink-900)}
.bm-x{width:30px;height:30px;border:0;background:none;border-radius:var(--r-sm);color:var(--ink-400);display:grid;place-items:center;cursor:pointer}
.bm-x:hover{background:var(--surface-inset);color:var(--ink-800)}
.bm-x svg{width:16px;height:16px}
.bm-body{padding:20px 22px;overflow:auto;flex:1;min-height:0}
/* The brand menu expands INLINE here. Floated as usual it covered the footer, so the
   Save button underneath it could not be clicked at all. */
.bm-pick .ms-menu{position:static;margin-top:8px;box-shadow:none}
.bm-pick .ms-list{max-height:150px}
.bm-lede{font-size:13px;color:var(--ink-500);line-height:1.55;margin-bottom:16px}
.bm-lede b{font-weight:600;color:var(--ink-900)}
.bm-radio{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;margin-bottom:9px;transition:border-color .15s,background .15s}
.bm-radio:hover{border-color:var(--border-strong)}
.bm-radio.on{border-color:var(--accent);background:var(--accent-050)}
.bm-radio input{position:absolute;opacity:0;width:1px;height:1px}
.bm-radio .rb{width:17px;height:17px;flex:0 0 17px;border:1.5px solid var(--border-strong);border-radius:50%;margin-top:2px;display:grid;place-items:center;transition:border-color .15s}
.bm-radio.on .rb{border-color:var(--accent)}
.bm-radio .rb::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .16s cubic-bezier(.34,1.4,.64,1)}
.bm-radio.on .rb::after{transform:scale(1)}
.bm-rt{flex:1;min-width:0;line-height:1.4}
.bm-rt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900)}
.bm-rt small{display:block;font-size:12px;color:var(--ink-500);margin-top:2px}
.bm-pick{margin:2px 0 4px;padding:0 0 4px 42px}
.bm-warn{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--r-md);padding:11px 13px;font-size:12.5px;line-height:1.5;color:var(--warn-fg);margin-top:14px}
.bm-warn svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px}
.bm-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border-subtle)}
@media(max-width:520px){.bm-pick{padding-left:0}}

/* ---------- destructive-action confirm ----------
   Promoted out of rules.html page CSS (with .btn-danger) once five screens needed it,
   the same way .savebar was promoted. rules.html still owns the two hand-rolled
   dialogs that use this shell — Reset order and Delete group.
   z-index 250: like .bm it confirms over whatever is already open, and it must clear
   .drawer (200) and .bm (240). This modal has been buried by a stacking bug twice
   before — do not lower it. */
.cfm{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;padding:20px}
.cfm.open{display:flex}
.cfm-ov{position:absolute;inset:0;background:rgba(23,22,28,.34)}
.cfm-box{position:relative;width:100%;max-width:460px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:24px}
.cfm-box h3{font-size:16.5px;font-weight:600;color:var(--ink-900);margin-bottom:9px}
.cfm-box p{font-size:13px;color:var(--ink-500);line-height:1.6}
.cfm-box ul{margin:12px 0 0;padding-left:19px;font-size:13px;color:var(--ink-700);line-height:1.75}
.cfm-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.btn-danger{background:var(--err-fg);color:#fff;border-color:var(--err-fg)}
.btn-danger:hover{background:#B91C1C;border-color:#B91C1C}

/* ---------- read-only / edit gate ----------
   Complex settings default to read-only; an explicit Edit unlocks them and the header
   swaps to Save/Cancel. Keeps the commit explicit instead of saving on every keystroke. */
.edit-actions{display:flex;align-items:center;gap:9px}
.ro-note{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-500);background:var(--surface-inset);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:9px 13px;margin-bottom:14px}
.ro-note svg{width:15px;height:15px;flex:0 0 15px;color:var(--ink-400)}
.ro-note b{font-weight:600;color:var(--ink-700)}

.lock-hint{font-size:12.5px;color:var(--warn-fg);background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:16px}
.lock-hint b{font-weight:600}

/* ---------- floating save bar ----------
   For screens whose edits land in many small places rather than one form: the changes
   stage locally and this appears only once something really differs, naming WHAT
   changed. Its Save is the single publish point — the one that opens the brand modal.
   Lived in rules.html until Fees & Charges needed the same thing (2026-08-10). */
.savebar{position:sticky;bottom:18px;z-index:30;display:none;align-items:center;gap:12px;margin:16px auto 0;width:fit-content;max-width:100%;padding:10px 12px 10px 18px;background:var(--ink-900);border-radius:999px;box-shadow:0 14px 34px rgba(23,22,28,.26)}
.savebar.on{display:flex;animation:sbIn .26s cubic-bezier(.22,1,.36,1)}
@keyframes sbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.savebar .sb-dot{width:7px;height:7px;border-radius:50%;background:var(--warn-fg);flex:0 0 7px;margin:0}
.savebar .sb-tx{font-size:13px;font-weight:600;color:#fff;white-space:nowrap}
.savebar .btn{height:34px}
.savebar .btn-ghost{color:#fff}
.savebar .btn-ghost:hover{background:rgba(255,255,255,.12)}
/* the toast stack lives bottom-right; lift it clear of the bar */
body:has(.savebar.on) #toasts{bottom:92px}

/* Tooltips (hover) */
.tip{position:fixed;z-index:2000;background:var(--ink-900);color:#fff;font-size:12px;font-weight:500;padding:7px 10px;border-radius:8px;box-shadow:var(--shadow-pop);pointer-events:none;opacity:0;transform:translateY(-100%);transition:opacity .12s ease;max-width:250px;line-height:1.45}
.tip.below{transform:none}
.tip.show{opacity:1}
.tip::after{content:"";position:absolute;left:var(--ax,50%);top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink-900)}
.tip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink-900)}
.tip b{display:block;font-size:12px;font-weight:600}
.tip span{display:block;font-size:11.5px;color:#C9C4E0;font-weight:400;margin-top:1px}
.info-i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1.4px solid var(--ink-300);color:var(--ink-400);font-size:9px;font-weight:700;font-style:normal;cursor:help;vertical-align:middle;margin-left:6px;line-height:1}
.info-i:hover{border-color:var(--accent);color:var(--accent)}
.wbar{cursor:help}
.linechart{cursor:crosshair}
[data-tip]{cursor:help}

/* ---- tab panel transition (shared by every screen with page-level tabs) ---- */
.panel{animation:panelIn .26s cubic-bezier(.22,1,.36,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- consequence banner: states what the setting does to the customer ---- */
.note-bar{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--info-fg);background:var(--info-bg);border:1px solid var(--info-bd);border-radius:var(--r-md);padding:12px 14px;margin-bottom:16px}
.note-bar svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
.note-bar b{font-weight:600}

/* ---- table primitives: shared by Limits & Thresholds, Session Analytics, Fees & Charges ---- */
.tb-count{font-size:10.5px;font-weight:600;color:var(--ink-500);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
/* table toolbar: title + count on the left, controls pushed right */
.tb-row{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.tb-row .section-label{margin-bottom:0}
.tb-row .sp{margin-left:auto;display:flex;gap:10px;align-items:center}
.num{font-variant-numeric:tabular-nums}
.rule-chip{font-size:11px;font-weight:600;color:var(--ink-600);background:var(--surface-inset);border-radius:999px;padding:3px 9px}
/* Sortable headers. The chevron used to be opacity:0 at rest and only appeared on
   hover, which made sortability undiscoverable — you had to already suspect a column
   sorted to find out that it did. It now sits faint at rest on every sortable column,
   darkens on hover and goes solid accent once active. */
.tbl th[data-sort]{cursor:pointer;user-select:none;transition:color .15s}
.tbl th[data-sort]:hover{color:var(--ink-800)}
.tbl th .th-s{display:inline-flex;align-items:center;gap:5px}
.tbl th .sc{width:13px;height:13px;flex:0 0 13px;opacity:.3;transition:opacity .15s,transform .15s}
.tbl th[data-sort]:hover .sc{opacity:.62}
.tbl th.sorted{color:var(--accent)}
.tbl th.sorted .sc,.tbl th.sorted:hover .sc{opacity:1}
.tbl th.sorted.desc .sc{transform:rotate(180deg)}
/* row action buttons */
.act-cell{display:flex;gap:6px;justify-content:flex-end}
.act-btn{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--ink-500);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.act-btn:hover{background:var(--accent-050);color:var(--accent);border-color:var(--accent-200)}
.act-btn.danger:hover{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-bd)}
.act-btn svg{width:15px;height:15px}
/* search box */
.search{position:relative;display:flex;align-items:center}
.search .si{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-400);pointer-events:none}
.search input{height:36px;width:302px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);padding:0 30px 0 33px;font:inherit;font-size:13px;color:var(--ink-800);transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:var(--ink-400)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-050)}
.search .sx{position:absolute;right:7px;width:21px;height:21px;border:0;border-radius:50%;background:transparent;color:var(--ink-400);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.search .sx:hover{background:var(--surface-inset);color:var(--ink-700)}
.search .sx svg{width:11px;height:11px}
.tbl-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
.tbl-wrap .tbl th,.tbl-wrap .tbl td{white-space:nowrap;padding-left:10px;padding-right:10px}
.tbl-wrap .tbl th:first-child,.tbl-wrap .tbl td:first-child{padding-left:0}
.tbl-wrap .tbl th:last-child,.tbl-wrap .tbl td:last-child{padding-right:0}
.dim{color:var(--ink-400)}
/* pagination */
.pager{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.pager .info{font-size:12.5px;color:var(--ink-500)}
.pager .show{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-500)}
.pager .show select{height:30px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);padding:0 26px 0 9px;font:inherit;font-size:12.5px;color:var(--ink-800);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238B8892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 7px center}
.pager .pg{margin-left:auto;display:flex;gap:6px}
.pager .pg button{height:30px;min-width:30px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-600);cursor:pointer}
.pager .pg button:hover:not(:disabled){background:var(--surface-inset)}
.pager .pg button:disabled{color:var(--ink-300);cursor:not-allowed}
.pager .pg button.on{background:var(--accent);border-color:var(--accent);color:#fff}