/* ===================== iOS design layer =====================
   Loaded last on every page. It re-points the existing theme tokens at iOS
   values (system font, grouped backgrounds, hairlines, larger radii) and
   restyles shared pieces. Liquid Glass surfaces come from liquid-glass.js
   (port of glisse, MIT) and are applied by ios.js. The highlight colour from
   Personalization stays the tint; light/dark follows the existing setting. */

:root{
 --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI","Microsoft YaHei","Myanmar Text",system-ui,sans-serif;
 --ios-tint:var(--accent,#0a84ff);
 --ios-bg:#000;--ios-bg-2:#1c1c1e;--ios-bg-3:#2c2c2e;
 --ios-label:#fff;--ios-label-2:rgb(235 235 245 / .6);--ios-label-3:rgb(235 235 245 / .3);
 --ios-sep:rgb(84 84 88 / .55);--ios-sep-opaque:#38383a;
 --ios-fill:rgb(118 118 128 / .24);--ios-fill-2:rgb(118 118 128 / .16);--ios-fill-3:rgb(118 118 128 / .12);
 --ios-red:#ff453a;--ios-green:#30d158;--ios-orange:#ff9f0a;
 --ios-inset:#2c2c2e;--ios-r-card:22px;--ios-r-field:12px;--ios-r-sm:10px;
 --ios-shadow:0 1px 2px rgb(0 0 0 / .25);
 --ios-bar:rgb(30 30 30 / .62);
 /* existing tokens re-pointed */
 --bg:var(--ios-bg);--panel:var(--ios-bg-2);--line:var(--ios-sep);--text:var(--ios-label);--muted:var(--ios-label-2);
 --ui-font:var(--ios-font);
 --g-radius:var(--ios-r-card);--g-radius-md:16px;--g-radius-sm:var(--ios-r-field);
 --g-surface:var(--ios-bg-2);--g-surface-strong:var(--ios-bg-2);--g-field:var(--ios-fill-3);
 --g-border:transparent;--g-border-strong:var(--ios-sep);--g-highlight:none;
 --g-shadow:var(--ios-shadow);--g-glow:none;--g-glow-soft:0 0 0 4px color-mix(in srgb,var(--ios-tint) 28%,transparent);
 --g-blur:blur(20px) saturate(180%);
 --skeleton-base:var(--ios-fill-3);--skeleton-shine:var(--ios-fill)
}
:root[data-theme=light]{
 --ios-bg:#f2f2f7;--ios-bg-2:#fff;--ios-inset:#f2f2f7;--ios-bg-3:#fff;
 --ios-label:#000;--ios-label-2:rgb(60 60 67 / .6);--ios-label-3:rgb(60 60 67 / .3);
 --ios-sep:rgb(60 60 67 / .29);--ios-sep-opaque:#c6c6c8;
 --ios-fill:rgb(120 120 128 / .2);--ios-fill-2:rgb(120 120 128 / .16);--ios-fill-3:rgb(118 118 128 / .12);
 --ios-red:#ff3b30;--ios-green:#34c759;--ios-orange:#ff9500;
 --ios-shadow:0 1px 3px rgb(0 0 0 / .06);
 --ios-bar:rgb(249 249 249 / .7)
}
/* Dark accents chosen for a dark page can be too pale on white: deepen them for text and fills. */
/* Apple system colours are made for both modes, so the tint is used as it is. */

/* ---------- Page ---------- */
html,body{background:var(--ios-bg)!important;color:var(--ios-label)}
body{font-family:var(--ios-font)!important;font-size:15px;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
body *:not(code):not(pre):not(kbd):not(samp):not(.mono):not([class*=mono]){font-family:var(--ios-font)!important}
/* The animated aurora and grid give way to the plain grouped background (glass needs calm content to refract). */
.glass-bg,.gb-blob,.gb-grid,.gb-grain,.gb-sheen,.gb-vignette,.gb-follow,.pointer-glow,canvas.login-network,.login-network{display:none!important}
body::before,body::after{background:none!important;animation:none!important}
::selection{background:color-mix(in srgb,var(--ios-tint) 35%,transparent)}
a{color:var(--ios-tint)}

/* Component rules: nested under an id-weighted root so they outrank the older glass layer (which uses !important widely). */
:root:not(#ios-a):not(#ios-b){
/* ---------- Type: iOS scale ---------- */
main>header h1,.developer-heading h1,main h1{font-size:34px!important;line-height:41px!important;font-weight:700!important;letter-spacing:.012em!important}
main>header h1 span{display:none}
h2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.02em}
h3{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.02em}
.eyebrow,main>header .eyebrow,.developer-heading small,.nav-caption,small.caps{font-size:13px!important;line-height:18px!important;font-weight:400!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--ios-label-2)!important}
main>header p,.developer-heading p{color:var(--ios-label-2)!important;font-size:15px!important}
label,legend{color:var(--ios-label-2)}

/* ---------- Grouped cards ---------- */
.panel,.card,section.panel,article.panel,.metrics article,.stat,.graphs>.panel,.analytics-grid>*,#detail .case,.team-card{
 background:var(--ios-bg-2)!important;border:0!important;border-radius:var(--ios-r-card)!important;box-shadow:var(--ios-shadow)!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-image:none!important}
.panel::before,.panel::after,.metrics article::before,.metrics article::after,.stat::before,.stat::after{display:none!important}
.metrics article strong,.stat strong{font-size:28px!important;font-weight:700!important;letter-spacing:.01em}
.metrics article span,.stat span{color:var(--ios-label-2)!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important}

/* ---------- Buttons: iOS pills ---------- */
button,.button,a.button,input[type=submit],input[type=button]{font-family:var(--ios-font)!important}
:is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done)){
 min-height:36px;border-radius:999px!important;border:0!important;padding:0 16px;
 background:var(--ios-fill-2)!important;color:var(--ios-tint)!important;font-weight:600!important;font-size:15px!important;
 box-shadow:none!important;background-image:none!important;text-shadow:none!important;transition:background-color .18s ease,transform .18s ease,opacity .18s ease!important}
:is(button,.button,a.button):where(:not(.lg-tab,.lg-switch,[data-view],.custom-select-trigger,.custom-select-option,.ios-row)):hover{background:var(--ios-fill)!important;filter:none!important}
:is(button,.button,a.button):where(:not(.lg-tab,.lg-switch,[data-view])):active{transform:scale(.97)}
/* primary actions: filled with the tint */
:is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){background:var(--ios-tint)!important;color:var(--accent-ink,#fff)!important}
&[data-theme=light] :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){color:#fff!important}
:is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab):hover{background:color-mix(in srgb,var(--ios-tint) 88%,#fff)!important}
/* destructive */
:is(.danger,.destructive,button.danger,[data-destructive],#signOut,#logout,.sign-out){color:var(--ios-red)!important}
button:disabled,.button[aria-disabled=true]{opacity:.35!important;cursor:default!important;transform:none!important}
.primary::before,.primary::after,button::before,button::after{animation:none!important}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ios-tint) 70%,transparent)!important;outline-offset:2px!important}

/* ---------- Fields: filled, borderless ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{
 background:var(--ios-fill-3)!important;border:0!important;border-radius:var(--ios-r-field)!important;color:var(--ios-label)!important;
 min-height:40px;font-size:15px!important;box-shadow:none!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
input::placeholder,textarea::placeholder{color:var(--ios-label-3)!important}
input:focus,select:focus,textarea:focus{background:var(--ios-fill-2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ios-tint) 30%,transparent)!important;outline:none!important}
input[type=search],input[name*=search i],input[id*=search i],input[placeholder^=Search i]{border-radius:999px!important;padding-left:36px!important;
 background:var(--ios-fill-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") no-repeat 12px 50%/16px!important}
input[type=checkbox],input[type=radio]{accent-color:var(--ios-tint)}
/* Pop-up buttons: value on the left, iOS up/down chevron on the right, menu as a glass card */
select{appearance:base-select;text-align:left!important;text-align-last:left!important;padding:0 34px 0 12px!important;justify-content:flex-start!important;
 background:var(--ios-fill-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.5 3.5-3.5 3.5 3.5M2.5 11.5 6 15l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 12px center/9px 14px!important}
select::picker-icon{display:none!important}
select option{text-align:left!important;justify-content:flex-start!important;padding:8px 14px!important;border-radius:10px!important;background:none!important;color:var(--ios-label)!important}
select option:hover,select option:focus{background:var(--ios-fill-3)!important}
select option:checked{font-weight:600!important;color:var(--ios-tint)!important}
select option::checkmark{color:var(--ios-tint)}
::picker(select){appearance:base-select;border:0!important;border-radius:16px!important;padding:6px!important;background:var(--lg-surface,rgb(28 28 31 / .86))!important;-webkit-backdrop-filter:blur(22px) saturate(1.9)!important;backdrop-filter:blur(22px) saturate(1.9)!important;box-shadow:inset 0 0 0 .5px var(--lg-surface-edge,#ffffff21),0 12px 40px var(--lg-shadow,#00000061)!important}

/* ---------- Tables: inset grouped lists ---------- */
.table-wrap,.scroll{background:var(--ios-bg-2)!important;border:0!important;border-radius:var(--ios-r-card)!important;box-shadow:var(--ios-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
table{border-collapse:separate;border-spacing:0}
thead th{background:var(--ios-bg-2)!important;color:var(--ios-label-2)!important;font-size:13px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;border:0!important;border-bottom:.5px solid var(--ios-sep)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
tbody td{border:0!important;border-bottom:.5px solid var(--ios-sep)!important;font-size:15px}
tbody tr:last-child td{border-bottom:0!important}
tbody tr:hover td{background:var(--ios-fill-3)!important;box-shadow:none!important}
tbody tr{background:none!important}

/* ---------- Badges & pills ---------- */
.badge,.pill,.tag,.chip,.notification-badge{border-radius:999px!important;border:0!important;background:var(--ios-fill-2)!important;color:var(--ios-label)!important;box-shadow:none!important;font-weight:500!important}
.notification-badge{background:var(--ios-red)!important;color:#fff!important;font-weight:600!important;min-width:20px;text-align:center}

/* ---------- Dialogs: iOS sheets / cards ---------- */
dialog{background:var(--ios-bg-2)!important;color:var(--ios-label)!important;border:0!important;border-radius:28px!important;box-shadow:0 30px 80px rgb(0 0 0 / .35)!important}
dialog::backdrop{background:rgb(0 0 0 / .35)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- Toast ---------- */
#toast,.toast,.success-tick-toast{border-radius:999px!important;border:0!important;background:var(--ios-bar)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;backdrop-filter:blur(20px) saturate(180%)!important;color:var(--ios-label)!important;box-shadow:0 10px 30px rgb(0 0 0 / .2)!important}

/* ---------- Native controls hidden behind iOS ones (ios.js) ---------- */
.ios-native-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important}
.ios-segmented-host{display:flex;align-items:center;min-height:40px}
.ios-segmented-host .lg-segmented{--lg-tab-width:var(--ios-seg-w,96px);--lg-tab-height:32px;max-width:100%}
.ios-segmented-host .lg-segmented[aria-disabled=true]{opacity:.4;pointer-events:none}
.ios-segmented-host .lg-tab{font-family:var(--ios-font)!important;min-height:0!important;padding:0!important;background:none!important;color:var(--lg-segment-label)!important;font-weight:500!important;font-size:13px!important}
.ios-switch-host{display:inline-flex;align-items:center;vertical-align:middle}
.lg-switch{min-height:0!important;padding:0!important;background:none!important;border-radius:999px!important}
.lg-tab{box-shadow:none!important}
}
/* glisse colours follow the page theme (the dashboard is dark unless data-theme=light) */
:root:not([data-theme=light]){--lg-foreground:#fff;--lg-muted:#ebebf599;--lg-glass:#2828289e;--lg-glass-active:#4646469e;--lg-edge:#ffffff14;--lg-drop:transparent;--lg-selection:#ffffff25;--lg-lens:#ffffff0e;--lg-lens-drop:transparent;--lg-segment-track:rgb(118 118 128 / .24);--lg-segment-thumb:#636366;--lg-segment-label:#fff;--lg-segment-lens:transparent;--lg-surface:#1c1c1fdb;--lg-surface-edge:#ffffff21;--lg-shadow:#00000061;--lg-highlight:#ebebf521;--lg-separator:#ebebf529;--lg-destructive:#ff4245;--lg-track:#ebebf54d;--lg-rail:#ffffff1a;--lg-ring:#ffffff80;--lg-lens-shine:1;--lg-rim-shine:.13;--lg-fill:var(--ios-tint);--lg-on:var(--ios-green)}
:root[data-theme=light]{--lg-fill:var(--ios-tint);--lg-on:var(--ios-green)}

@media(prefers-reduced-motion:reduce){:is(button,.button):active{transform:none!important}}
:root[data-motion=reduced] :is(button,.button):active{transform:none!important}
/* ===================== end iOS design layer ===================== */

/* ---------- Navigation (ios.js): floating sidebar, navigation bar, phone tab bar, More sheet ---------- */
:root:not(#ios-a):not(#ios-b){
 /* Sidebar: an iPad-style floating glass panel */
 &.ios-shell :is(body>aside,aside.manager-sidebar,aside.developer-sidebar){
  position:fixed!important;left:0!important;margin:10px 0 10px 10px!important;height:calc(100vh - 20px)!important;max-height:calc(100dvh - 20px)!important;top:0!important;
  border:0!important;border-radius:26px!important;background-color:var(--ios-bar)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  box-shadow:0 8px 30px rgb(0 0 0 / .18)!important}
 & aside :is(nav button,nav a,nav summary){border-radius:12px!important;min-height:40px!important;padding:8px 12px!important;background:none!important;color:var(--ios-label)!important;font-size:15px!important;font-weight:400!important;box-shadow:none!important;border:0!important;letter-spacing:-.01em!important;text-transform:none!important}
 & aside nav summary{color:var(--ios-label-2)!important;font-size:13px!important;font-weight:600!important;min-height:32px!important}
 & aside :is(nav button,nav a):hover{background:var(--ios-fill-3)!important}
 & aside :is(nav button,nav a):is(.active,[aria-current=page]){background:var(--ios-fill)!important;color:var(--ios-label)!important;font-weight:600!important}
 & aside :is(nav button,nav a):is(.active,[aria-current=page]) svg{color:var(--ios-tint)!important}
 & aside nav svg{color:var(--ios-tint)!important;opacity:1!important}
 & aside :is(nav button,nav a)::before,& aside :is(nav button,nav a)::after{display:none!important}
 & aside .brand b,& aside .brand{font-weight:800!important;letter-spacing:-.03em!important}
 & aside .workspace{border-radius:12px!important;background:var(--ios-fill-3)!important;border:0!important}

 /* Navigation bar: small title in a glass bar once the large title has scrolled away */
 & main>header,& .developer-heading{position:static!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
 & .ios-navbar{position:sticky;top:8px;z-index:40;height:44px;margin:0 auto -44px;width:min(560px,70%);border-radius:22px;display:grid;place-items:center;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
 & .ios-navbar[data-shown]{opacity:1;transform:none}
 & .ios-navbar-title{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ios-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}

 /* Phone tab bar */
 & .ios-tabbar{display:none}
 @media (max-width:750px){
  & .ios-tabbar{display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;pointer-events:none}
  & .ios-tabbar .lg-tab-bar{pointer-events:auto;--lg-tab-width:calc(min(94vw, 420px) / var(--lg-tabs));max-width:94vw}
  & .ios-tabbar .lg-tab{position:relative}
  & .ios-tab-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ios-red);color:#fff;font:600 11px/18px var(--ios-font);text-align:center}
  & body{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  /* the sidebar and its off-canvas menu give way to the tab bar */
  & :is(body>aside,aside.manager-sidebar,aside.developer-sidebar),& .mobile-topbar,& .nav-backdrop,& .nav-collapse-toggle{display:none!important}
  & main{margin-left:0!important;padding-top:12px!important}
  /* large title stays at the top of each page (the old phone top bar is gone) */
  & main>header,& .developer-heading{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 4px 12px!important;margin:0!important}
  & main>header h1,& .developer-heading h1{font-size:34px!important}
  & main>header>p,& main>header>div>p,& main>header .live{display:none!important}
  & .ios-tabbar .lg-tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  & .ios-navbar{width:calc(100% - 24px)}
 }

 /* More sheet */
 & .ios-sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgb(0 0 0 / .32);opacity:0;transition:opacity .25s ease}
 & .ios-sheet-backdrop[data-open]{opacity:1}
 & .ios-sheet{position:fixed;z-index:81;left:8px;right:8px;bottom:8px;max-height:calc(100dvh - 60px);overflow:auto;border-radius:34px;padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  background-color:var(--ios-bar);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);color:var(--ios-label);
  transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
 & .ios-sheet[data-open]{transform:none}
 @media (min-width:751px){& .ios-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(420px,92vw);transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .25s ease,opacity .2s ease}& .ios-sheet[data-open]{transform:translate(-50%,-50%);opacity:1}}
 & .ios-sheet-grabber{display:block;width:36px;height:5px;border-radius:3px;background:var(--ios-label-3);margin:0 auto 6px}
 & .ios-sheet>header{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px}
 & .ios-sheet>header h2{margin:0}
 & .ios-sheet-done{background:none!important;padding:0 6px!important;font-weight:600!important;color:var(--ios-tint)!important}
 & .ios-list{background:var(--ios-bg-2);border-radius:var(--ios-r-card);overflow:hidden;margin-bottom:16px}
 & .ios-list>*{display:flex!important;align-items:center;gap:12px;width:100%;min-height:48px!important;padding:0 16px!important;border-radius:0!important;background:none!important;color:var(--ios-label)!important;font-weight:400!important;text-align:left;border-bottom:.5px solid var(--ios-sep)!important;justify-content:flex-start!important}
 & .ios-list>*:last-child{border-bottom:0!important}
 & .ios-row svg{width:22px;height:22px;color:var(--ios-tint);flex:none}
 & .ios-row::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ios-label-3);border-top:2px solid var(--ios-label-3);transform:rotate(45deg)}
 & .ios-row.is-destructive{color:var(--ios-red)!important;justify-content:center!important}
 & .ios-row.is-destructive::after{display:none}
 & .ios-sheet-settings label{justify-content:space-between;color:var(--ios-label)!important}
 & .ios-sheet-settings select{width:auto;min-width:140px}
}
@media(prefers-reduced-motion:reduce){.ios-sheet,.ios-sheet-backdrop,.ios-navbar{transition:none!important}}
:root[data-motion=reduced] :is(.ios-sheet,.ios-sheet-backdrop,.ios-navbar){transition:none!important}

/* ---------- The app's custom dropdown (.custom-select): iOS pop-up button + glass menu ---------- */
:root:not(#ios-a):not(#ios-b){
 & .custom-select-trigger{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;width:100%;
  min-height:40px!important;padding:0 12px!important;border-radius:var(--ios-r-field)!important;background:var(--ios-fill-3)!important;
  color:var(--ios-label)!important;font-weight:400!important;font-size:15px!important;text-align:left!important;box-shadow:none!important;border:0!important}
 & .custom-select-trigger:hover{background:var(--ios-fill-2)!important}
 & .custom-select-trigger.is-open{background:var(--ios-fill-2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ios-tint) 30%,transparent)!important}
 & .custom-select-trigger>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 & .custom-select-arrow{flex:none;width:9px!important;height:14px!important;font-size:0!important;color:transparent!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.5 3.5-3.5 3.5 3.5M2.5 11.5 6 15l3.5-3.5'/%3E%3C/svg%3E") no-repeat center/9px 14px!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;rotate:none!important}
 & .custom-select-arrow{flex:0 0 9px!important;min-width:9px!important;max-width:9px!important;padding:0!important;margin:0!important}
 & .custom-select-arrow::before,& .custom-select-arrow::after{display:none!important}
 & .custom-select-menu{border:0!important;border-radius:18px!important;padding:6px!important;color:var(--lg-foreground)!important;
  background:var(--lg-surface)!important;-webkit-backdrop-filter:blur(22px) saturate(1.9)!important;backdrop-filter:blur(22px) saturate(1.9)!important;
  box-shadow:inset 0 0 0 .5px var(--lg-surface-edge),0 12px 40px var(--lg-shadow)!important}
 & .custom-select-option{display:flex!important;align-items:center!important;gap:8px;width:100%;min-height:36px!important;padding:6px 12px 6px 32px!important;position:relative;
  border-radius:12px!important;background:none!important;color:var(--lg-foreground)!important;font-weight:400!important;font-size:15px!important;text-align:left!important;justify-content:flex-start!important;box-shadow:none!important}
 & .custom-select-option:is(:hover,:focus-visible,.is-active){background:var(--lg-highlight)!important}
 & .custom-select-option[aria-selected=true]{font-weight:600!important}
 & .custom-select-option[aria-selected=true]::before{content:"";display:block!important;position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.5 5 10l7.5-8'/%3E%3C/svg%3E") no-repeat center/12px!important}
}

/* ---------- Sheets: More sheet frame, customer detail, dialogs ---------- */
:root:not(#ios-a):not(#ios-b){
 & .ios-sheet{border:0!important;box-shadow:0 20px 60px rgb(0 0 0 / .35)!important;outline:0}
 /* Customer detail: iOS sheet. Computers: rounded side sheet. Phones: slides up from the bottom with a grabber. */
 & #detail{border:0!important;border-radius:28px!important;background:var(--ios-bg)!important;box-shadow:0 20px 60px rgb(0 0 0 / .4)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:ios-sheet-side .32s cubic-bezier(.32,.72,0,1)}
 & #detail>.section-head:first-child{position:sticky;top:0;z-index:5;margin:0 0 8px!important;padding:12px 16px!important;border:0!important;border-radius:28px 28px 0 0!important;
  background:var(--ios-bar)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important}
 & #closeDetail{background:none!important;color:var(--ios-tint)!important;font-weight:600!important;padding:0 4px!important;min-height:32px!important;box-shadow:none!important}
 & #detail .detail-grid>*,& #detail #contacts{border-radius:var(--ios-r-card)!important}
 @media (max-width:750px){
  & #detail{inset:44px 0 0 0!important;border-radius:34px 34px 0 0!important;animation:ios-sheet-up .36s cubic-bezier(.32,.72,0,1)}
  & #detail{z-index:75!important;box-shadow:0 0 0 100vmax rgb(0 0 0 / .45)!important}
  &:has(#detail:not([hidden])) :is(.ios-tabbar,.ios-navbar){display:none!important}
  & #detail::before{content:"";display:block;position:sticky;top:6px;z-index:6;width:36px;height:5px;margin:6px auto -11px;border-radius:3px;background:var(--ios-label-3)}
  & #detail>.section-head:first-child{border-radius:34px 34px 0 0!important;padding-top:18px!important}
  /* Dialogs become bottom sheets on phones */
  & dialog[open]:not(.ios-keep){margin:auto 0 0!important;width:100%!important;max-width:100%!important;border-radius:34px 34px 0 0!important;max-height:calc(100dvh - 44px)!important;animation:ios-sheet-up .36s cubic-bezier(.32,.72,0,1)}
 }

 /* Lists: customers and today's payments on phones */
 @media (max-width:750px){
  & .ios-list-table{min-width:0!important;width:100%!important;table-layout:auto!important}
  & .ios-list-table thead{display:none!important}
  & .ios-list-table :is(tbody,tr,td){display:block!important}
  & .ios-list-table tbody tr{position:relative;padding:12px 16px!important;border-bottom:.5px solid var(--ios-sep)!important;white-space:normal!important}
  & .ios-list-table tbody tr:last-child{border-bottom:0!important}
  & .ios-list-table tbody td{display:inline!important;padding:0!important;border:0!important;background:none!important;font-size:13px!important;line-height:20px;color:var(--ios-label-2)!important;white-space:normal!important;position:static!important;box-shadow:none!important}
  & .ios-list-table tbody td:first-child{display:block!important;font-size:17px!important;line-height:22px;font-weight:600;color:var(--ios-label)!important;margin-bottom:2px;padding-right:24px!important}
  & .ios-list-table tbody td.ios-meta[data-label]::before{content:attr(data-label) " ";color:var(--ios-label-3)}
  & .ios-list-table tbody td.ios-meta:not(.ios-meta-first)[data-label]::before{content:"  ·  " attr(data-label) " "}
  & .ios-list-table tbody td.ios-action{display:block!important;margin-top:8px;width:auto!important;text-align:left!important}
  & .ios-list-table tbody td.ios-action :is(button,a){white-space:nowrap!important;margin-left:0!important}
  & .ios-list-table tbody td[colspan]{display:block!important;text-align:center;padding:16px 0!important;font-size:15px!important}
  & .ios-list-table tbody td[colspan]::before,& .ios-list-table tbody td[colspan]::after{content:none!important}
  & .table-wrap:has(.ios-list-table){overflow:visible!important}
 }
}
@keyframes ios-sheet-up{from{transform:translateY(100%)}}
@keyframes ios-sheet-side{from{transform:translateX(40px);opacity:0}}
@media(prefers-reduced-motion:reduce){#detail,dialog[open]{animation:none!important}}
:root[data-motion=reduced] :is(#detail,dialog[open]){animation:none!important}

/* ---------- Login: a glass card over a soft wallpaper of the highlight colour ---------- */
:root:not(#ios-a):not(#ios-b){
 & body.ui-login{background:radial-gradient(55% 45% at 18% 12%,color-mix(in srgb,var(--ios-tint) 42%,transparent),transparent 70%),radial-gradient(50% 45% at 88% 85%,rgb(94 92 230 / .38),transparent 70%),radial-gradient(40% 35% at 70% 20%,rgb(255 159 10 / .18),transparent 70%),var(--ios-bg)!important;background-attachment:fixed!important}
 & .login-heading{flex-direction:column!important;align-items:flex-start!important;gap:4px!important}
 & section.login-card.login-card,& .login-card form{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 & .login-card form.lg-glass{border-radius:28px!important;padding:24px!important;background-color:var(--lg-glass)!important}
}

/* ---------- Leftovers from the older theme: tinted boxes, gradients and coloured borders ---------- */
:root:not(#ios-a):not(#ios-b){
 & main>section[id$=View],& #workspaceSwitch,& .appearance-preview,& label.check{background-image:none!important}
 & #workspaceSwitch{border:0!important;box-shadow:none!important}
 /* boxes inside a card: a quiet filled inset, no outline */
 & :is(.panel,.card,section,#detail) :is(.chart-card,.filters,form.filters,.insight-strip,.record-cash-filters,#customerBalanceSummary article,.appearance-preview,label.check){
  background-color:var(--ios-inset)!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:16px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 & .chart-card::before,& .chart-card::after,& .insight-strip::before{display:none!important}
 & :is(#profile,#paymentNames,.tabs,#detail .tabs){border-color:var(--ios-sep)!important;box-shadow:none!important;background-image:none!important}
 & #profile,& #paymentNames{border:0!important}
 & hr{border:0!important;border-top:.5px solid var(--ios-sep)!important}
 & #detail .tabs button.active,& .tabs button.active{background:var(--ios-fill)!important;background-image:none!important;color:var(--ios-label)!important;box-shadow:none!important}
 & input[type=file]{border:0!important;background:var(--ios-fill-3)!important;border-radius:var(--ios-r-field)!important;padding:8px!important}
 /* banners: iOS-style tinted notice */
 & :is(#error,.error,.notice-error,[role=alert]):not(:empty){border:0!important;border-radius:16px!important;background:color-mix(in srgb,var(--ios-red) 14%,transparent)!important;background-image:none!important;color:var(--ios-label)!important;box-shadow:none!important}
}

/* ---------- Motion wallpaper: Apple-style soft colour fields drifting slowly behind everything ----------
   Plain gradients moved with transforms only (no animated blur), so it stays light on the GPU.
   It holds still with reduced motion, on PCs the old theme marked as slow (glass-lite),
   after two idle minutes (glass-idle) and while the tab is hidden. */
.ios-wallpaper{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ios-wallpaper span{position:absolute;width:80vmax;height:80vmax;border-radius:50%;opacity:.55;will-change:transform;
 background:radial-gradient(circle at center,var(--c) 0%,color-mix(in srgb,var(--c) 45%,transparent) 32%,transparent 66%);
 animation:ios-drift var(--t,46s) ease-in-out infinite alternate}
.ios-wallpaper span:nth-child(1){--c:var(--ios-tint);left:-28vmax;top:-30vmax;--t:52s}
.ios-wallpaper span:nth-child(2){--c:#5e5ce6;right:-30vmax;top:-12vmax;--t:61s;animation-delay:-14s}
.ios-wallpaper span:nth-child(3){--c:#64d2ff;left:-6vmax;bottom:-42vmax;--t:57s;animation-delay:-27s;opacity:.38}
.ios-wallpaper span:nth-child(4){--c:#bf5af2;right:-26vmax;bottom:-36vmax;--t:66s;animation-delay:-40s;opacity:.4}
:root[data-theme=light] .ios-wallpaper span{opacity:.32}
:root[data-theme=light] .ios-wallpaper span:nth-child(n+3){opacity:.22}
/* a soft veil keeps text contrast steady over the colours */
.ios-wallpaper::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ios-bg) 38%,transparent)}
@keyframes ios-drift{
 0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
 50%{transform:translate3d(9vmax,6vmax,0) scale(1.12) rotate(14deg)}
 100%{transform:translate3d(-6vmax,11vmax,0) scale(.94) rotate(-10deg)}}
:is(.glass-lite,.glass-idle,.ios-paused) .ios-wallpaper span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ios-wallpaper span{animation:none!important}}
:root[data-motion=reduced] .ios-wallpaper span{animation:none!important}
/* page backgrounds step aside so the wallpaper shows; cards stay solid for reading */
:root:not(#ios-a):not(#ios-b){&:has(body>.ios-wallpaper){background:var(--ios-bg)!important}
 & body:has(>.ios-wallpaper){background:transparent!important}
 & main,& main>section[id$=View]:not(.panel){background:transparent!important}}

/* ---------- Sidebar v2: iPadOS sidebar — always-open sections, full-strength rows, tinted selection ---------- */
:root:not(#ios-a):not(#ios-b){
 &.ios-shell :is(body>aside,aside.manager-sidebar,aside.developer-sidebar){
  padding:16px 10px 12px!important;border-radius:28px!important;
  background-color:rgb(28 28 30 / .74)!important;-webkit-backdrop-filter:blur(30px) saturate(180%)!important;backdrop-filter:blur(30px) saturate(180%)!important;
  box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .08),0 10px 40px rgb(0 0 0 / .25)!important}
 &.ios-shell[data-theme=light] :is(body>aside,aside.manager-sidebar,aside.developer-sidebar){background-color:rgb(255 255 255 / .74)!important;box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .06),0 10px 40px rgb(0 0 0 / .08)!important}
 & aside .brand{padding:0 10px 2px!important;margin:0!important}
 & aside .brand b,& aside>.brand{font-size:28px!important;line-height:34px!important}
 & aside .brand small,& aside>small{display:block;padding:0 10px!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ios-label-2)!important}
 & aside .workspace{margin:12px 4px 6px!important;min-height:44px;padding:0 12px!important;font-size:15px!important;font-weight:600!important;color:var(--ios-label)!important;border-radius:14px!important;background:var(--ios-fill-3)!important}
 & aside .nav-caption{display:none!important}
 /* section headers (were collapsible groups) */
 & aside nav details{margin:0!important;padding:0!important;border:0!important;background:none!important}
 & aside nav summary{list-style:none;pointer-events:none;display:block!important;margin:14px 0 2px!important;padding:0 12px!important;min-height:0!important;
  font-size:13px!important;line-height:18px!important;font-weight:600!important;color:var(--ios-label-2)!important;background:none!important;cursor:default}
 & aside nav summary::-webkit-details-marker{display:none}
 & aside nav summary::after,& aside nav summary::before,& aside nav summary svg{display:none!important}
 & aside nav .sidebar-group-items{display:flex!important;flex-direction:column;gap:2px;padding:0!important;margin:0!important;border:0!important;background:none!important}
 /* rows */
 & aside nav :is(button,a):not(summary){display:flex!important;align-items:center!important;gap:12px!important;width:100%;min-height:44px!important;padding:0 12px!important;
  border-radius:12px!important;font-size:16px!important;font-weight:500!important;color:var(--ios-label)!important;opacity:1!important;background:none!important;text-align:left!important;justify-content:flex-start!important}
 & aside nav :is(button,a):not(summary) svg{width:22px!important;height:22px!important;flex:none;color:var(--ios-tint)!important;opacity:1!important}
 & aside nav :is(button,a):not(summary) img{display:none!important}
 & aside nav :is(button,a):not(summary):hover{background:var(--ios-fill-3)!important}
 & aside nav :is(button,a):not(summary):is(.active,[aria-current=page]){background:var(--ios-tint)!important;color:var(--accent-ink,#fff)!important;font-weight:600!important}
 &[data-theme=light] aside nav :is(button,a):not(summary):is(.active,[aria-current=page]){color:#fff!important}
 & aside nav :is(button,a):not(summary):is(.active,[aria-current=page]) svg{color:currentColor!important}
 /* bottom: sign out as a plain red row, account as a profile row */
 & aside :is(.sign-out,#signOut,#logout){display:flex!important;align-items:center;gap:12px;width:calc(100% - 8px);margin:8px 4px 0!important;min-height:44px!important;padding:0 12px!important;border-radius:12px!important;background:none!important;color:var(--ios-red)!important;font-weight:500!important;font-size:16px!important;justify-content:flex-start!important}
 & aside :is(.sign-out,#signOut,#logout):hover{background:var(--ios-fill-3)!important}
 & aside .aside-bottom{margin:6px 4px 0!important;padding:10px 8px!important;border:0!important;border-top:.5px solid var(--ios-sep)!important;border-radius:0!important;background:none!important;color:var(--ios-label)!important;font-size:15px!important}
 & aside .aside-bottom small{color:var(--ios-label-2)!important}
 & aside .avatar{background:var(--ios-tint)!important;color:var(--accent-ink,#fff)!important;border-radius:50%!important}
 & aside .nav-collapse-toggle{width:28px!important;height:28px!important;min-height:0!important;border-radius:50%!important;background:var(--ios-fill-3)!important;color:var(--ios-label-2)!important;border:0!important;box-shadow:none!important}

 /* Navigation bar v2: a full-width floating glass bar with the centred title */
 & .ios-navbar{width:calc(100% - 24px)!important;max-width:none!important;height:52px!important;margin:0 12px -52px!important;border-radius:26px!important;top:10px!important;
  background-color:var(--ios-bar)!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 6px 24px rgb(0 0 0 / .12)!important}
 & .ios-navbar-title{font-size:17px!important;font-weight:600!important}
}
:root:not(#ios-a):not(#ios-b){
 & aside nav .telegram-inbox-entry.telegram-inbox-entry:not(.active){background:none!important;color:var(--ios-label)!important;opacity:1!important;box-shadow:none!important;border:0!important}
 & aside nav .telegram-inbox-entry.telegram-inbox-entry:not(.active):hover{background:var(--ios-fill-3)!important}
 & aside .workspace.workspace{display:flex!important;align-items:center!important;gap:8px}
 & aside .workspace span{margin-left:auto;font-size:12px;font-weight:600;color:var(--ios-label-2)}
}
/* ---------- Burmese and long labels ---------- */
:root:not(#ios-a):not(#ios-b){
 & .batch-username-heading{flex-wrap:wrap!important;row-gap:4px;align-items:center}
 & .batch-username-heading>span{min-width:0;overflow-wrap:anywhere}
 & .batch-usernames-open{min-height:26px!important;padding:0 10px!important;font-size:12px!important;white-space:nowrap}
 &:lang(my) body{line-height:1.6}
 &:lang(my) :is(h1,h2,h3,main>header h1){line-height:1.45!important}
 &:lang(my) :is(button,.custom-select-trigger,.lg-tab,label,small){line-height:1.5!important}
}
:root:not(#ios-a):not(#ios-b){& .batch-username-heading,& label:has(>.batch-username-heading),& :has(>.batch-username-heading){height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}}
:root:not(#ios-a):not(#ios-b){& .report-summary-card{border:0!important;background:var(--ios-fill-3)!important;background-image:none!important;box-shadow:none!important;border-radius:16px!important}
 & #reportError:not(:empty){border:0!important;border-radius:16px!important;background:color-mix(in srgb,var(--ios-red) 14%,transparent)!important;color:var(--ios-label)!important}}
:root:not(#ios-a):not(#ios-b){
 & main>section,& #accessChoices label{background-image:none!important}
 & #me{border:0!important;background:var(--ios-fill-3)!important;color:var(--ios-label)!important;border-radius:999px!important}
 & :is(#teamEmpty,.empty,p.empty){border:0!important;background:var(--ios-fill-3)!important;color:var(--ios-label-2)!important;border-radius:14px!important;box-shadow:none!important}
}

/* ---------- Everything else from the older design ---------- */
:root:not(#ios-a):not(#ios-b){
 /* every card and box: solid iOS surfaces (no see-through glass, glows or gradients) */
 & :is(main,dialog,#detail,.tr-panel) :is(.chart-card,article,.channel-stat,.messaged-today,.tg-account-form,.tg-account-controls,.tg-sharing-notice,.message-tag-actions,.personal-extra-tags,.tr-box,#notificationStatus):not(.lg-glass):not(.metrics>article):not(.stat):not(.metrics article){
  background:var(--ios-inset)!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:16px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 & main .panel>:is(.chart-card,article),& main section.panel article.chart-card{background:var(--ios-inset)!important}
 & :is(.chart-card,article)::before,& :is(.chart-card,article)::after{display:none!important}
 & .chart-card h3::before,& .chart-card>h3>i,& .panel h3>.dot{display:none!important}
 /* setting rows with a switch: a plain iOS cell, no "+" */
 & label.check{display:flex!important;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px!important;border:0!important;border-radius:12px!important;background:var(--ios-inset)!important;box-shadow:none!important;color:var(--ios-label)!important}
 & label.check::before,& label.check::after{content:none!important;display:none!important}
 & label.check .ios-switch-host{order:2}
 /* dialog headers: plain title bar with a hairline */
 & :is(dialog,#telegramInbox,#workspaceToolsDialog) header,& .tg-top{background:none!important;background-image:none!important;border:0!important;border-bottom:.5px solid var(--ios-sep)!important;box-shadow:none!important}
 & #detail .tabs{border:0!important;box-shadow:none!important}
 /* close buttons in dialogs read as iOS "Done"/× controls */
 & :is(dialog,#detail,.tr-panel) :is(button[id^=close],[class*=-close],.close):not(.ios-sheet-done){background:var(--ios-fill-3)!important;color:var(--ios-label-2)!important;font-weight:600!important}
 /* Translator: an iOS sheet and a glass button */
 & .tr-panel{background:var(--ios-bg-2)!important;background-image:none!important;border:0!important;border-radius:26px!important;box-shadow:0 20px 60px rgb(0 0 0 / .35)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 & .tr-box:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ios-tint) 30%,transparent)!important}
 & .tr-box textarea,& .tr-box output{background:none!important;box-shadow:none!important}
 & .tr-fab{border:0!important;border-radius:999px!important;color:var(--ios-label)!important;background-color:var(--ios-bar)!important;background-image:none!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;backdrop-filter:blur(20px) saturate(180%)!important;box-shadow:0 8px 24px rgb(0 0 0 / .2)!important}
 & .tr-fab svg{color:var(--ios-tint)!important}
 /* Telegram inbox frame */
 & #telegramInbox{background:var(--ios-bg)!important;border-radius:28px!important}
 /* Connections tiles */
 & #connectionsView article{padding:16px!important}
 /* the old collapsed icon rail is not part of the iOS design: the sidebar always shows */
 & .nav-collapse-toggle{display:none!important}
 @media(min-width:751px){&.nav-collapsed body>aside,&.nav-collapsed aside.manager-sidebar,&.nav-collapsed aside.developer-sidebar{width:var(--g-nav-w,248px)!important}}
}
@media (max-width:750px){:root:not(#ios-a):not(#ios-b){& .tr-fab{bottom:calc(96px + env(safe-area-inset-bottom))!important}}}
:root:not(#ios-a):not(#ios-b){
 & main>section.ios-card-view{background:var(--ios-bg-2)!important;border-radius:var(--ios-r-card)!important;box-shadow:var(--ios-shadow)!important}
 @media(min-width:751px){
  & aside nav :is(button,a):not(summary){min-height:38px!important;font-size:15px!important}
  & aside nav summary{margin:10px 0 2px!important}
  & aside .workspace{margin:10px 4px 2px!important;min-height:40px}
 }
}

/* ---------- Glass buttons (iOS 26): frosted, with a lit top edge and a soft sheen ---------- */
:root:not(#ios-a):not(#ios-b){
 & :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab)){
  background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / .02) 58%),rgb(120 120 128 / .2)!important;
  -webkit-backdrop-filter:blur(14px) saturate(180%)!important;backdrop-filter:blur(14px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 -1px 0 rgb(255 255 255 / .06),inset 0 0 0 .5px rgb(255 255 255 / .16),0 4px 14px rgb(0 0 0 / .18)!important;
  color:var(--ios-tint)!important;transition:background-color .18s ease,box-shadow .18s ease,filter .18s ease!important}
 & :is(button,.button,a.button):where(:not(.lg-tab,.lg-switch,[data-view],.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab)):hover{filter:brightness(1.12)!important}
 & :is(button,.button,a.button):where(:not(.lg-tab,.lg-switch,[data-view])):active{transform:none!important}
 /* primary actions: tinted glass */
 & :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){
  background:linear-gradient(180deg,rgb(255 255 255 / .32),rgb(255 255 255 / 0) 60%),var(--ios-tint)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 0 0 .5px rgb(255 255 255 / .25),0 6px 18px color-mix(in srgb,var(--ios-tint) 40%,transparent)!important}
 /* destructive */
 & :is(.danger,.destructive,button.danger,[data-destructive]){color:var(--ios-red)!important}
 /* light mode: brighter frost */
 &[data-theme=light] :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.primary,[type=submit],#searchButton)){
  background:linear-gradient(180deg,rgb(255 255 255 / .9),rgb(255 255 255 / .55)),rgb(255 255 255 / .4)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgb(0 0 0 / .08),0 4px 14px rgb(0 0 0 / .08)!important}
 /* Personalization colour chips show their Apple colour */
 & .color-presets button[data-apple-color][data-color]{color:#fff!important;background:linear-gradient(180deg,rgb(255 255 255 / .3),rgb(255 255 255 / 0) 60%),var(--chip)!important}
 /* Apple-style wallpaper hues */
 & .ios-wallpaper span:nth-child(2){--c:#5e5ce6}
 & .ios-wallpaper span:nth-child(3){--c:#64d2ff}
 & .ios-wallpaper span:nth-child(4){--c:#ff375f}
}
@media(prefers-reduced-transparency:reduce){:root:not(#ios-a):not(#ios-b) :is(button,.button){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ---------- Button fixes: borders, close buttons, table headers, small buttons ---------- */
:root:not(#ios-a):not(#ios-b){
 /* no leftover outlines from the older theme on any button */
 & :is(button,.button,a.button,input[type=submit],input[type=button]){border:0!important;outline-offset:2px}
 & :is(button,.button,a.button):not(:focus-visible){outline:0!important}
 /* close buttons (×): a small grey circle, as in iOS sheets */
 & button.ios-close{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;border-radius:50%!important;
  display:inline-grid!important;place-items:center;font-size:15px!important;line-height:1!important;font-weight:600!important;
  background:var(--ios-fill-2)!important;color:var(--ios-label-2)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none}
 & button.ios-close:hover{background:var(--ios-fill)!important;filter:none!important}
 /* sortable column headers: plain text, tinted when sorted */
 & th :is(button,.button),& thead :is(button,.button){all:unset;cursor:pointer;display:inline-flex!important;align-items:center;gap:4px;
  font:inherit!important;color:var(--ios-label-2)!important;background:none!important;box-shadow:none!important;padding:0!important;min-height:0!important;border-radius:6px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 & th :is(button,.button):is([aria-sort],.active,.sorted,[aria-pressed=true]),& th[aria-sort]:not([aria-sort=none]) :is(button,.button){color:var(--ios-tint)!important}
 & th :is(button,.button):focus-visible{outline:2px solid color-mix(in srgb,var(--ios-tint) 70%,transparent)!important}
 /* buttons inside table rows and small inline buttons stay compact */
 & td :is(button,.button){min-height:30px!important;padding:0 12px!important;font-size:13px!important}
}
:root:not(#ios-a):not(#ios-b){& #paymentNames,& #detail .muted:is(div,p){background:var(--ios-inset)!important;background-image:none!important;border:0!important;border-radius:14px!important;color:var(--ios-label-2)!important;box-shadow:none!important}}

/* ---------- 3D glass: a soft white outer glow around glass buttons and glass surfaces ----------
   The glow is a thin bright rim plus a wide faint halo, layered over the lit top edge and the
   drop shadow, so glass reads as raised. Light mode uses a white halo against a soft shadow. */
:root{
 --ios-glow:0 0 0 .5px rgb(255 255 255 / .22),0 0 14px rgb(255 255 255 / .09),0 0 2px rgb(255 255 255 / .18);
 --ios-glow-strong:0 0 0 .5px rgb(255 255 255 / .3),0 0 22px rgb(255 255 255 / .12),0 0 3px rgb(255 255 255 / .22)
}
:root[data-theme=light]{
 --ios-glow:0 0 0 .5px rgb(255 255 255 / .9),0 0 16px rgb(255 255 255 / .85),0 1px 2px rgb(0 0 0 / .06);
 --ios-glow-strong:0 0 0 .5px rgb(255 255 255 / .95),0 0 26px rgb(255 255 255 / .9),0 2px 6px rgb(0 0 0 / .06)
}
:root:not(#ios-a):not(#ios-b){
 /* glass buttons */
 & :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.ios-close,th button,thead button)){
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -1px 0 rgb(255 255 255 / .06),inset 0 0 0 .5px rgb(255 255 255 / .16),0 4px 14px rgb(0 0 0 / .18),var(--ios-glow)!important}
 &[data-theme=light] :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.ios-close,th button,thead button,.primary,[type=submit],#searchButton)){
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgb(0 0 0 / .08),0 4px 14px rgb(0 0 0 / .08),var(--ios-glow)!important}
 & :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 0 0 .5px rgb(255 255 255 / .25),0 6px 18px color-mix(in srgb,var(--ios-tint) 40%,transparent),var(--ios-glow)!important}
 & :is(button,.button):where(:not(.lg-tab,.lg-switch,[data-view],th button,.ios-close)):hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 0 0 .5px rgb(255 255 255 / .2),0 6px 18px rgb(0 0 0 / .2),var(--ios-glow-strong)!important}
 & .color-presets button[data-apple-color][data-color]{box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 4px 12px color-mix(in srgb,var(--chip) 35%,transparent),var(--ios-glow)!important}
 /* the other glass surfaces get the same rim so they sit at the same depth */
 &.ios-shell :is(body>aside,aside.manager-sidebar,aside.developer-sidebar){box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .1),0 10px 40px rgb(0 0 0 / .25),var(--ios-glow)!important}
 &.ios-shell[data-theme=light] :is(body>aside,aside.manager-sidebar,aside.developer-sidebar){box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .05),0 10px 40px rgb(0 0 0 / .08),var(--ios-glow)!important}
 & .ios-navbar{box-shadow:0 6px 24px rgb(0 0 0 / .14),var(--ios-glow)!important}
 & .ios-tabbar .lg-tab-bar{box-shadow:0 10px 30px rgb(0 0 0 / .22),var(--ios-glow);border-radius:999px}
 & .ios-sheet{box-shadow:0 20px 60px rgb(0 0 0 / .35),var(--ios-glow-strong)!important}
 & .tr-fab{box-shadow:0 8px 24px rgb(0 0 0 / .2),var(--ios-glow)!important}
 & .lg-segmented{box-shadow:var(--ios-glow);border-radius:999px}
 & .lg-switch{box-shadow:var(--ios-glow)!important}
 & .custom-select-menu,& ::picker(select){box-shadow:inset 0 0 0 .5px var(--lg-surface-edge),0 12px 40px var(--lg-shadow),var(--ios-glow)!important}
 & .login-card form.lg-glass{box-shadow:0 20px 60px rgb(0 0 0 / .3),var(--ios-glow-strong)!important}
}

/* ---------- Translator: floating Liquid Glass window ---------- */
:root:not(#ios-a):not(#ios-b){
 & .tr-panel.tr-panel.lg-glass{position:fixed!important;right:20px;bottom:84px;border:0!important;border-radius:30px!important;padding:18px!important;
  background-color:rgb(28 28 30 / .5)!important;background-image:var(--lg-rim,none),linear-gradient(160deg,rgb(255 255 255 / .1),rgb(255 255 255 / 0) 45%)!important;background-size:100% 100%!important;
  -webkit-backdrop-filter:blur(28px) saturate(200%)!important;backdrop-filter:blur(28px) saturate(200%)!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),inset 0 0 0 .5px rgb(255 255 255 / .14),0 30px 80px rgb(0 0 0 / .45),0 8px 24px rgb(0 0 0 / .25),var(--ios-glow-strong)!important;
  animation:none}
 /* the spring plays once per opening only, never after a drag */
 & .tr-panel.tr-panel.lg-glass.ios-opening{animation:ios-float-in .46s cubic-bezier(.34,1.42,.64,1) both}
 &[data-theme=light] .tr-panel.tr-panel.lg-glass{background-color:rgb(255 255 255 / .55)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgb(0 0 0 / .06),0 30px 80px rgb(0 0 0 / .18),0 8px 24px rgb(0 0 0 / .08),var(--ios-glow-strong)!important}
 & .tr-panel.ios-closing{animation:ios-float-out .26s cubic-bezier(.4,0,1,1) both!important;pointer-events:none}
 & .tr-panel.ios-dragging{animation:none!important;transition:none!important;cursor:grabbing;box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),0 40px 100px rgb(0 0 0 / .5),var(--ios-glow-strong)!important}
 & .tr-panel .tr-head{cursor:grab;user-select:none;touch-action:none;padding-bottom:4px}
 & .tr-panel .tr-head::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--ios-label-3)}
 & .tr-panel .tr-title{font-size:17px!important;font-weight:700!important}
 /* inner boxes are glass too: see-through panes with a lit edge */
 & .tr-panel.lg-glass .tr-box.tr-box{background:rgb(255 255 255 / .07)!important;border:0!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 0 0 .5px rgb(255 255 255 / .08)!important;border-radius:20px!important}
 &[data-theme=light] .tr-panel.lg-glass .tr-box.tr-box{background:rgb(255 255 255 / .55)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgb(0 0 0 / .05)!important}
 & .tr-panel.lg-glass .tr-box.tr-box:focus-within{box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 0 0 3px color-mix(in srgb,var(--ios-tint) 35%,transparent)!important}
 & .tr-panel.lg-glass :is(.custom-select-trigger,select){background:rgb(255 255 255 / .08)!important}
 &[data-theme=light] .tr-panel.lg-glass :is(.custom-select-trigger,select){background:rgb(255 255 255 / .6)!important}
 & .tr-panel .tr-swap{border-radius:50%!important;width:40px!important;min-width:40px!important;padding:0!important}
}
@keyframes ios-float-in{0%{opacity:0;transform:scale(.6) translateY(24px);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes ios-float-out{to{opacity:0;transform:scale(.6) translateY(24px);filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.tr-panel{animation:none!important}}
:root[data-motion=reduced] .tr-panel{animation:none!important}
@media (max-width:750px){:root:not(#ios-a):not(#ios-b){& .tr-panel.tr-panel.lg-glass:not(.ios-moved){right:12px;left:12px;width:auto;bottom:calc(152px + env(safe-area-inset-bottom));max-height:calc(100dvh - 200px)}}}

/* ---------- Sidebar: every row looks the same, whatever kind of entry it is ---------- */
:root:not(#ios-a):not(#ios-b){
 & aside nav :is(button,a)[class]:not(summary):not(.active):not([aria-current=page]){background:none!important;background-image:none!important;color:var(--ios-label)!important;opacity:1!important;box-shadow:none!important;border:0!important;filter:none!important}
 & aside nav :is(button,a)[class]:not(summary):not(.active):not([aria-current=page]):hover{background:var(--ios-fill-3)!important}
 & aside nav :is(button,a)[class]:not(summary) svg{color:var(--ios-tint)!important}
 & aside nav :is(button,a)[class]:not(summary):is(.active,[aria-current=page]) svg{color:currentColor!important}
 & aside nav :is(button,a)::before,& aside nav :is(button,a)::after{content:none!important;display:none!important}
}
/* Small accessory buttons that sit on a label line read as plain tinted text (iOS accessory links) */
:root:not(#ios-a):not(#ios-b){
 & label :is(button.link,.link-button){
  all:unset;cursor:pointer;display:inline-flex!important;align-items:center;gap:4px;margin-left:auto;
  font:500 13px/18px var(--ios-font)!important;color:var(--ios-tint)!important;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;min-height:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important}
 & .batch-username-heading button:hover{text-decoration:underline;filter:none!important}
 & .batch-username-heading button:focus-visible{outline:2px solid color-mix(in srgb,var(--ios-tint) 70%,transparent)!important;outline-offset:2px;border-radius:4px}
 & .batch-username-heading{display:flex!important;align-items:baseline;justify-content:space-between;gap:8px}
}

/* ---------- Telegram inbox: iOS Messages ---------- */
:root{--ios-bubble-in:#262628;--ios-bubble-in-text:#fff}
:root[data-theme=light]{--ios-bubble-in:#e9e9eb;--ios-bubble-in-text:#000}
:root:not(#ios-a):not(#ios-b){
 /* window */
 & #telegramInbox{padding:0!important;overflow:hidden!important;border:0!important;border-radius:30px!important;background:var(--ios-bg)!important;box-shadow:0 30px 90px rgb(0 0 0 / .45),var(--ios-glow)!important}
 & #telegramInbox .tg-top{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px!important;margin:0!important;
  background:var(--ios-bar)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;border-bottom:.5px solid var(--ios-sep)!important}
 & #telegramInbox .tg-top h2{font-size:22px!important;line-height:28px!important;font-weight:700!important;margin:0!important}
 & #telegramInbox .tg-top small{color:var(--ios-label-2)!important;font-size:13px!important}
 & #tgClose{background:none!important;box-shadow:none!important;color:var(--ios-tint)!important;font-weight:600!important;padding:0 6px!important;min-height:32px!important;font-size:17px!important}
 & #tgAccount :is(button,.custom-select-trigger){min-height:32px!important;font-size:14px!important}
 /* two panes */
 & #telegramInbox .tg-layout{grid-template-columns:320px minmax(0,1fr)!important;background:var(--ios-bg)!important}
 /* chat list */
 & #telegramInbox .tg-chats{background:var(--ios-bg-2)!important;border:0!important;border-right:.5px solid var(--ios-sep)!important;display:flex;flex-direction:column;min-height:0}
 & #telegramInbox .tg-chat-tools{display:flex!important;align-items:center;gap:8px;padding:12px 12px 8px!important;border:0!important;background:none!important}
 & #tgSearch{flex:1;min-height:36px!important;border-radius:12px!important}
 & #tgRefresh{flex:none;min-height:36px!important;padding:0 12px!important;font-size:14px!important}
 & #tgChatList{padding:0 6px 8px!important;overflow:auto}
 & #tgChatList .tg-chat{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;
  width:100%;min-height:72px!important;padding:10px 10px!important;margin:0!important;border:0!important;border-radius:14px!important;
  background:none!important;box-shadow:none!important;text-align:left!important;color:var(--ios-label)!important;font-weight:400!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;position:relative}
 & #tgChatList .tg-chat::after{content:"";position:absolute;left:70px;right:10px;bottom:0;border-bottom:.5px solid var(--ios-sep)}
 & #tgChatList .tg-chat:last-child::after,& #tgChatList .tg-chat.is-selected::after,& #tgChatList .tg-chat:has(+ .is-selected)::after{display:none}
 & #tgChatList .tg-chat:hover{background:var(--ios-fill-3)!important;filter:none!important}
 & #tgChatList .tg-chat.is-selected{background:var(--ios-tint)!important;color:#fff!important}
 & #tgChatList .tg-chat.is-selected :is(small,strong){color:#fff!important}
 & #tgChatList .tg-avatar{grid-row:1 / span 2;width:48px!important;height:48px!important;border-radius:50%!important;display:grid!important;place-items:center;
  background:linear-gradient(180deg,#a5aab8,#858a96)!important;color:#fff!important;font-size:20px!important;font-weight:600!important;box-shadow:none!important;border:0!important}
 & #tgChatList .tg-chat-heading{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-width:0}
 & #tgChatList .tg-chat-heading strong{font-size:16px!important;font-weight:600!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 & #tgChatList .tg-chat>small{grid-column:2;font-size:14px!important;line-height:19px;color:var(--ios-label-2)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal!important}
 & #tgChatList .tg-unread{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px!important;background:var(--ios-tint)!important;color:#fff!important;font-size:12px!important;font-weight:600!important;line-height:20px!important;text-align:center;border:0!important}
 & #tgChatList .tg-chat.is-selected .tg-unread{background:#fff!important;color:var(--ios-tint)!important}
 /* conversation */
 & #telegramInbox .tg-conversation{background:var(--ios-bg)!important;display:flex;flex-direction:column;min-height:0}
 & #telegramInbox .tg-conversation-title{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;min-height:52px;padding:8px 14px!important;margin:0!important;border:0!important;border-bottom:.5px solid var(--ios-sep)!important;
  background:var(--ios-bar)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important}
 & #tgChatName{grid-column:2;text-align:center;font-size:17px!important;font-weight:600!important}
 & #tgBack{background:none!important;box-shadow:none!important;color:var(--ios-tint)!important;padding:0!important;min-height:32px!important;font-weight:500!important}
 & #tgOlder{align-self:center;margin:10px auto 0!important;min-height:30px!important;font-size:13px!important;padding:0 14px!important}
 & #tgMessages{display:flex!important;flex-direction:column;gap:3px;padding:14px 16px!important;background:none!important}
 & #tgMessages .tg-date-divider{align-self:center;margin:14px 0 8px!important;padding:0!important;background:none!important;border:0!important;font-size:12px!important;font-weight:600!important;color:var(--ios-label-2)!important}
 & #tgMessages .tg-message{position:relative;max-width:min(72%,520px);padding:8px 13px 6px!important;margin:0!important;border:0!important;border-radius:20px!important;box-shadow:none!important;font-size:16px!important;line-height:21px!important;word-wrap:break-word}
 & #tgMessages .tg-message.tg-in{align-self:flex-start;background:var(--ios-bubble-in)!important;color:var(--ios-bubble-in-text)!important;border-bottom-left-radius:6px!important}
 & #tgMessages .tg-message.tg-out{align-self:flex-end;background:var(--ios-tint)!important;color:#fff!important;border-bottom-right-radius:6px!important}
 & #tgMessages .tg-message p{margin:0!important;color:inherit!important}
 & #tgMessages .tg-message time{display:block;margin-top:2px;font-size:11px!important;text-align:right;color:var(--ios-label-2)!important;opacity:1}
 & #tgMessages .tg-message.tg-out time{color:rgb(255 255 255 / .75)!important}
 & #tgMessages .tg-message:is(.tg-in+.tg-in,.tg-out+.tg-out){margin-top:-1px!important}
 & #tgMessages .tg-message :is(img,video){border-radius:14px!important;max-width:100%}
 & #telegramInbox .tg-text-note{text-align:center;font-size:12px!important;color:var(--ios-label-3)!important;margin:4px 0!important}
 /* composer */
 & #tgSendForm{display:flex!important;align-items:flex-end;gap:8px;padding:10px 12px!important;margin:0!important;border:0!important;border-top:.5px solid var(--ios-sep)!important;
  background:var(--ios-bar)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important}
 & #tgSendForm>textarea{flex:1;min-height:38px!important;max-height:120px;padding:8px 14px!important;border-radius:19px!important;font-size:16px!important;line-height:21px!important;
  background:var(--ios-bg)!important;box-shadow:inset 0 0 0 .5px var(--ios-sep)!important;border:0!important}
 & #tgSendForm>.primary{min-height:38px!important;height:38px;padding:0 16px!important;border-radius:19px!important;font-size:15px!important}
 & #tgSendForm>:disabled{opacity:.45!important}
 /* setup screens and notices inside the inbox */
 & #telegramInbox :is(.tg-setup,.tg-account-form,.tg-credentials,#tgConnectForm,#tgVerifyForm){border-radius:20px!important;background:var(--ios-bg-2)!important;border:0!important;box-shadow:none!important}
 & #telegramInbox .tg-sharing-notice{margin:12px 16px!important;padding:10px 14px!important;border-radius:14px!important;background:var(--ios-fill-3)!important;color:var(--ios-label-2)!important;font-size:13px!important}
 & #telegramInbox .tg-account-controls{padding:10px 16px!important;background:none!important;border:0!important}
 /* phones: one pane at a time */
 @media(max-width:750px){
  & #telegramInbox{border-radius:30px 30px 0 0!important}
  & #telegramInbox .tg-layout{grid-template-columns:minmax(0,1fr)!important}
  & #telegramInbox .tg-chats{border-right:0!important}
  & #tgMessages .tg-message{max-width:82%}
 }
}

/* ---------- Translator: smaller by default, resizable from its corner ---------- */
:root:not(#ios-a):not(#ios-b){
 & .tr-panel.tr-panel.lg-glass{width:min(360px,calc(100vw - 32px))!important;max-height:calc(100dvh - 24px)!important;min-width:300px;min-height:300px;gap:10px!important;padding:16px!important;overflow:hidden!important}
 & .tr-panel.tr-panel.lg-glass.ios-sized{max-width:calc(100vw - 16px)!important}
 & .tr-panel .tr-source{min-height:72px!important;max-height:none!important;resize:none!important;font-size:15px!important}
 & .tr-panel .tr-result{max-height:none!important;font-size:15px!important}
 & .tr-panel .tr-source-box{flex:0 0 auto}
 & .tr-panel .tr-result-box{flex:1 1 auto;min-height:64px;overflow:auto}
 /* the panel's own height drives the boxes when it has been resized */
 & .tr-panel.ios-sized .tr-source{height:clamp(72px,32%,40vh)}
 & .tr-panel .ios-resize{position:absolute;right:6px;bottom:6px;width:22px;height:22px;cursor:nwse-resize;touch-action:none;z-index:3;border-radius:0 0 22px 0;
  background:linear-gradient(135deg,transparent 0 52%,var(--ios-label-3) 52% 58%,transparent 58% 68%,var(--ios-label-3) 68% 74%,transparent 74%)}
 & .tr-panel .ios-resize:hover{filter:brightness(1.6)}
 & .tr-panel.ios-resizing{animation:none!important;transition:none!important;user-select:none}
}
@media(max-width:750px){:root:not(#ios-a):not(#ios-b){& .tr-panel .ios-resize{display:none}}}
:root:not(#ios-a):not(#ios-b){& #telegramInbox #tgClose.tgclose,& #telegramInbox button#tgClose{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--ios-tint)!important;font-weight:600!important;font-size:17px!important;padding:0 6px!important}}
/* the footer (Copy / Translate) always stays visible; the result box gives way first */
:root:not(#ios-a):not(#ios-b){
 & .tr-panel.tr-panel.lg-glass{display:flex!important;flex-direction:column!important}
 & .tr-panel :is(.tr-head,.tr-langs,.tr-foot){flex:none!important}
 & .tr-panel .tr-result-box{flex:1 1 0!important;min-height:44px!important;overflow:auto}
 & .tr-panel.ios-sized .tr-source-box{flex:0 1 auto!important;min-height:0}
 & .tr-panel.ios-sized .tr-source{height:clamp(56px,30vh,var(--tr-src,140px))!important}
}
:root:not(#ios-a):not(#ios-b){& .tr-panel.tr-panel.lg-glass:not(.ios-sized){height:auto!important;min-height:0!important;max-height:min(440px,calc(100dvh - 24px))!important}
 & .tr-panel.lg-glass:not(.ios-sized) .tr-result-box{flex:0 1 auto!important;min-height:72px!important}}

/* ---------- Fewer pills: buttons are rounded rectangles (iOS bordered buttons). Capsules stay only
   where iOS uses them: segmented controls, the tab bar, search fields, tags/chips and the floating
   Translate button. Close (×) stays a circle. ---------- */
:root:not(#ios-a):not(#ios-b){
 & :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,.ios-close,.tr-fab,.tr-swap,.color-presets button,[class*=chip],[class*=tag-pill],.tag,.pill,th button,thead button)){border-radius:12px!important}
 & td :is(button,.button){border-radius:10px!important}
 & #tgSendForm>:is(.primary,button){border-radius:12px!important}
 & #tgSendForm>textarea{border-radius:18px!important}
 & #me,& .notice-pill{border-radius:12px!important}
 & .color-presets button[data-apple-color][data-color]{border-radius:12px!important}
}
/* resize handle: invisible until the pointer is over the panel, then a faint corner mark */
:root:not(#ios-a):not(#ios-b){
 & .tr-panel .ios-resize{opacity:0;transition:opacity .18s ease;width:26px;height:26px;right:4px;bottom:4px;
  background:linear-gradient(135deg,transparent 0 60%,color-mix(in srgb,var(--ios-label) 22%,transparent) 60% 64%,transparent 64% 74%,color-mix(in srgb,var(--ios-label) 22%,transparent) 74% 78%,transparent 78%)}
 & .tr-panel:hover .ios-resize{opacity:.8}
 & .tr-panel .ios-resize:hover,& .tr-panel.ios-resizing .ios-resize{opacity:1}
 @media(hover:none){& .tr-panel .ios-resize{opacity:.5}}
}

/* ---------- Softer glow: the outline around glass is a faint hairline, the halo barely there ---------- */
:root{
 --ios-glow:0 0 0 .5px rgb(255 255 255 / .08),0 0 12px rgb(255 255 255 / .04);
 --ios-glow-strong:0 0 0 .5px rgb(255 255 255 / .1),0 0 18px rgb(255 255 255 / .05)
}
:root[data-theme=light]{
 --ios-glow:0 0 0 .5px rgb(255 255 255 / .6),0 0 12px rgb(255 255 255 / .5),0 1px 2px rgb(0 0 0 / .05);
 --ios-glow-strong:0 0 0 .5px rgb(255 255 255 / .7),0 0 18px rgb(255 255 255 / .55),0 2px 6px rgb(0 0 0 / .05)
}
:root:not(#ios-a):not(#ios-b){
 /* translator: no bright ring, just the soft lit top edge */
 & .tr-panel.tr-panel.lg-glass{box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),inset 0 0 0 .5px rgb(255 255 255 / .05),0 24px 70px rgb(0 0 0 / .4),0 6px 20px rgb(0 0 0 / .2),var(--ios-glow-strong)!important}
 &[data-theme=light] .tr-panel.tr-panel.lg-glass{box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 0 0 .5px rgb(0 0 0 / .04),0 24px 70px rgb(0 0 0 / .15),0 6px 20px rgb(0 0 0 / .06),var(--ios-glow-strong)!important}
 & .tr-panel.lg-glass[data-rim]{background-image:linear-gradient(160deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 45%)!important}
}
/* rows that now carry an iOS switch: no old checked outline or ✓ — the switch shows the state */
:root:not(#ios-a):not(#ios-b){
 & label:has(>.ios-switch-host),& label.login-remember{border:0!important;box-shadow:none!important;background:var(--ios-inset)!important;border-radius:14px!important;outline:0!important}
 & label:has(>.ios-switch-host)::after,& label:has(>.ios-switch-host)::before,& label.login-remember::after,& label.login-remember::before{content:none!important;display:none!important}
}

/* ===================== Depth pass: everything a little more 3D =====================
   Light comes from above: raised things get a lit top edge, a darker bottom edge and a layered
   shadow; sunken things (fields, switch tracks, segmented tracks) get an inner shadow; glass
   keeps a soft white rim glow. */
:root{
 --d-raise:inset 0 1px 0 rgb(255 255 255 / .22),inset 0 -1px 0 rgb(0 0 0 / .25),0 1px 1px rgb(0 0 0 / .25),0 4px 10px rgb(0 0 0 / .22),0 10px 24px rgb(0 0 0 / .14);
 --d-raise-hover:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 -1px 0 rgb(0 0 0 / .25),0 2px 2px rgb(0 0 0 / .25),0 6px 14px rgb(0 0 0 / .24),0 14px 30px rgb(0 0 0 / .16);
 --d-sink:inset 0 1px 3px rgb(0 0 0 / .45),inset 0 0 0 .5px rgb(0 0 0 / .3),0 1px 0 rgb(255 255 255 / .06);
 --d-card:inset 0 1px 0 rgb(255 255 255 / .06),0 1px 2px rgb(0 0 0 / .3),0 8px 24px rgb(0 0 0 / .22);
 --d-rim:0 0 0 .5px rgb(255 255 255 / .16),0 0 12px rgb(255 255 255 / .1)
}
:root[data-theme=light]{
 --d-raise:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0 / .08),0 1px 1px rgb(0 0 0 / .08),0 4px 10px rgb(0 0 0 / .08),0 10px 24px rgb(0 0 0 / .06);
 --d-raise-hover:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0 / .08),0 2px 2px rgb(0 0 0 / .08),0 6px 14px rgb(0 0 0 / .1),0 14px 30px rgb(0 0 0 / .08);
 --d-sink:inset 0 1px 3px rgb(0 0 0 / .14),inset 0 0 0 .5px rgb(0 0 0 / .08),0 1px 0 rgb(255 255 255 / .9);
 --d-card:inset 0 1px 0 #fff,0 1px 2px rgb(0 0 0 / .06),0 8px 24px rgb(0 0 0 / .07);
 --d-rim:0 0 0 .5px rgb(255 255 255 / .9),0 0 12px rgb(255 255 255 / .7)
}
:root:not(#ios-a):not(#ios-b){
 /* switches: sunken track with a white rim glow, raised glossy knob */
 & .lg-switch{box-shadow:none!important;border-radius:999px!important}
 & .lg-switch-bed:not(.lg-switch-inset) .lg-switch-track{box-shadow:var(--d-sink),var(--d-rim)!important}
 & .lg-switch[aria-checked=true] .lg-switch-bed:not(.lg-switch-inset) .lg-switch-track{box-shadow:inset 0 1px 3px rgb(0 0 0 / .3),0 0 0 .5px rgb(255 255 255 / .2),0 0 14px color-mix(in srgb,var(--ios-green) 45%,transparent)!important}
 & .lg-switch-fill{background:linear-gradient(180deg,color-mix(in srgb,var(--lg-on) 82%,#fff),var(--lg-on) 55%,color-mix(in srgb,var(--lg-on) 85%,#000))!important}
 & .lg-thumb-face{background:linear-gradient(180deg,#fff 0%,#f4f4f6 55%,#e2e2e6 100%)!important}
 & .lg-switch-thumb{box-shadow:0 3px 8px rgb(0 0 0 / .3),0 1px 1px rgb(0 0 0 / .2),0 0 10px rgb(255 255 255 / .25),inset 0 0 0 1.5px #ffffff80,inset 0 2px 1px #ffffff73!important}
 /* buttons: raised */
 & :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.ios-close,th button,thead button,.batch-usernames-open,#tgClose,#closeDetail,#tgBack)){box-shadow:var(--d-raise),var(--ios-glow)!important}
 & :is(button,.button,a.button):where(:not(.lg-tab,.lg-switch,[data-view],.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.ios-close,th button,thead button,.batch-usernames-open,#tgClose,#closeDetail,#tgBack)):hover{box-shadow:var(--d-raise-hover),var(--ios-glow-strong)!important;transform:translateY(-1px)}
 & :is(button,.button,a.button):where(:not(.lg-tab,.lg-switch,[data-view],.ios-close,th button,.batch-usernames-open)):active{box-shadow:inset 0 2px 4px rgb(0 0 0 / .3),0 1px 2px rgb(0 0 0 / .2)!important;transform:translateY(0)}
 & :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 -2px 0 rgb(0 0 0 / .18),0 2px 3px rgb(0 0 0 / .25),0 6px 16px color-mix(in srgb,var(--ios-tint) 45%,transparent),0 0 18px color-mix(in srgb,var(--ios-tint) 25%,transparent)!important}
 /* fields and pop-up buttons: sunken */
 & :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select,.custom-select-trigger){box-shadow:var(--d-sink)!important}
 & :is(input,textarea,select,.custom-select-trigger):focus{box-shadow:var(--d-sink),0 0 0 3px color-mix(in srgb,var(--ios-tint) 32%,transparent)!important}
 /* segmented controls: sunken track, raised thumb */
 & .lg-segmented>.lg-tab-bar-glass{box-shadow:var(--d-sink)!important}
 & .lg-segmented-thumb{box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 2px 4px rgb(0 0 0 / .3),0 0 8px rgb(255 255 255 / .12)!important}
 & .lg-segmented{box-shadow:var(--d-rim)!important}
 /* cards: lifted off the page; boxes inside cards slightly sunken */
 & :is(.panel,.card,.metrics article,.stat,.table-wrap,.scroll,main>section.ios-card-view){box-shadow:var(--d-card)!important}
 & :is(main,dialog,#detail) :is(.chart-card,.filters,form.filters,.insight-strip,#customerBalanceSummary article,label.check):not(.lg-glass){box-shadow:inset 0 1px 2px rgb(0 0 0 / .25),0 1px 0 rgb(255 255 255 / .04)!important}
 &[data-theme=light] :is(main,dialog,#detail) :is(.chart-card,.filters,form.filters,.insight-strip,#customerBalanceSummary article,label.check):not(.lg-glass){box-shadow:inset 0 1px 2px rgb(0 0 0 / .06),0 1px 0 #fff!important}
 /* sidebar: the selected row is raised */
 & aside nav :is(button,a):not(summary):is(.active,[aria-current=page]){box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -1px 0 rgb(0 0 0 / .15),0 3px 8px color-mix(in srgb,var(--ios-tint) 40%,transparent),0 0 14px color-mix(in srgb,var(--ios-tint) 22%,transparent)!important}
 & aside .workspace{box-shadow:var(--d-sink)!important}
 /* colour chips and the Translate button */
 & .color-presets button[data-apple-color][data-color]{box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 -2px 0 rgb(0 0 0 / .15),0 3px 8px color-mix(in srgb,var(--chip) 45%,transparent),0 0 14px color-mix(in srgb,var(--chip) 30%,transparent)!important}
 & .tr-fab{box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 6px 18px rgb(0 0 0 / .3),var(--d-rim)!important}
 /* phone tab bar and chat bubbles */
 & .ios-tabbar .lg-tab-bar{box-shadow:0 2px 4px rgb(0 0 0 / .2),0 12px 30px rgb(0 0 0 / .28),var(--d-rim)}
 & #tgMessages .tg-message{box-shadow:0 1px 1px rgb(0 0 0 / .18),0 2px 6px rgb(0 0 0 / .12)!important}
 & #tgMessages .tg-message.tg-out{background-image:linear-gradient(180deg,rgb(255 255 255 / .14),rgb(255 255 255 / 0) 60%)!important}
}
@media(prefers-reduced-motion:reduce){:root:not(#ios-a):not(#ios-b) :is(button,.button):hover{transform:none!important}}
:root[data-motion=reduced]:not(#ios-a):not(#ios-b) :is(button,.button):hover{transform:none!important}
/* A hidden translator is never shown, whatever layout rules apply to it when open. */
:root:not(#ios-a):not(#ios-b){& .tr-panel.tr-panel.lg-glass[hidden],& .tr-panel[hidden]{display:none!important}}

/* Dark surfaces: a white rim and a soft exterior light lift containers off the page. */
:root:not([data-theme=light]){
 --surface-depth:inset 0 1px 0 rgb(255 255 255 / .15),inset 0 -1px 0 rgb(0 0 0 / .24),0 0 0 1px rgb(255 255 255 / .1),0 0 16px rgb(255 255 255 / .065),0 10px 28px rgb(0 0 0 / .34);
 --surface-depth-raised:inset 0 1px 0 rgb(255 255 255 / .2),0 0 0 1px rgb(255 255 255 / .15),0 0 22px rgb(255 255 255 / .085),0 16px 40px rgb(0 0 0 / .42);
 --d-card:var(--surface-depth);
 --ios-label-2:rgb(235 235 245 / .76);
 --ios-label-3:rgb(235 235 245 / .52)
}
:root:not([data-theme=light]):not(#ios-a):not(#ios-b){
 & :is(.panel,.card,.login-card,.metrics article,.stats>article,.stat,.team-card,.developer-metric,.chart-card,.manager-platform-summary>article,main>section.ios-card-view){box-shadow:var(--surface-depth)!important}
 & :is(dialog[open],#detail,#telegramInbox,.tr-panel.tr-panel.lg-glass){box-shadow:var(--surface-depth-raised)!important}
 & :is(.table-wrap,.scroll){box-shadow:inset 0 1px 0 rgb(255 255 255 / .065),0 0 0 1px rgb(255 255 255 / .045)!important}
}
/* Shared polish: stable numeric columns, legible labels and breathing room for actions. */
:root:not(#ios-a):not(#ios-b){
 & :is(.metrics,.stats,.stat,#customerBalanceSummary,td.amount,[data-amount]){font-variant-numeric:tabular-nums}
 & :is(.panel,.card,.login-card,.team-card) h2{text-wrap:balance}
 & :is(.panel,.card,.team-card)>p{text-wrap:pretty}
 & :is(.form-actions,.modal-actions,.dialog-actions){display:flex;align-items:center;flex-wrap:wrap;gap:10px}
 & :is(.panel,.card,.team-card) input::placeholder{opacity:1}
}
@media(forced-colors:active){:root:not(#ios-a):not(#ios-b) :is(.panel,.card,.login-card,.team-card,dialog[open],#detail){outline:1px solid CanvasText;box-shadow:none!important}}

/* Calm dark surfaces and contrast-safe personalized controls. */
:root:not([data-theme=light]) .ios-wallpaper{display:block!important}
:root:not([data-theme=light]):not(#ios-a):not(#ios-b) body.ui-login{background:var(--ios-bg)!important}
:root:not(#ios-a):not(#ios-b){
 & :is(button,.button,a.button,input[type=submit],input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab)){color:var(--accent-readable,var(--ios-label))!important}
 & :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){background:var(--ios-tint)!important;color:var(--accent-ink,#000)!important}
 & a:not(.button){color:var(--accent-readable,var(--ios-label))}
 & :is(.danger,.destructive,button.danger,[data-destructive]){color:var(--ios-red)!important}
 & #glassTranslator.tr-panel.tr-panel.lg-glass{
  box-sizing:border-box!important;border-radius:24px!important;clip-path:inset(0 round 24px);isolation:isolate;
  background:var(--ios-bg-2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  min-width:min(340px,calc(100vw - 16px))!important;min-height:min(420px,calc(100dvh - 16px))!important;
  max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;overflow-y:auto!important;
 }
 & #glassTranslator .tr-langs{display:grid!important;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:8px!important}
 & #glassTranslator .tr-langs>*{min-width:0!important;width:100%!important}
 & #glassTranslator .tr-source-box{flex:0 0 auto!important}
 & #glassTranslator .tr-source{height:80px!important;min-height:80px!important}
 & #glassTranslator .tr-result-box{min-height:72px!important;flex:1 0 72px!important}
 & #glassTranslator .tr-foot{display:flex!important;flex-wrap:wrap;gap:8px!important;min-width:0}
 & #glassTranslator .tr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;min-width:0}
 & #glassTranslator .tr-status{overflow-wrap:anywhere}
}

/* Keyboard focus remains visible with every personal accent. */
:root:not(#ios-a):not(#ios-b){
 & :focus-visible{outline:3px solid var(--ios-label)!important;outline-offset:3px!important;scroll-margin-block:24px}
 & .a11y-skip{position:fixed;top:8px;left:8px;z-index:2147483647;background:var(--ios-bg-2);color:var(--ios-label)!important;padding:12px 18px;border-radius:10px;transform:translateY(-160%)}
 & .a11y-skip:focus{transform:none}
 /* A normal-flow header cannot cover profile fields during scroll or zoom. */
 & #detail>.section-head:first-child{position:relative!important;top:auto!important;flex-wrap:wrap!important;gap:16px!important;margin-bottom:24px!important;background:var(--ios-bg-2)!important;backdrop-filter:none!important}
 & #detail>.section-head:first-child>div:first-child{min-width:0;flex:1 1 220px;overflow-wrap:anywhere}
 & #detail #closeDetail{min-width:44px!important;min-height:44px!important;color:var(--ios-label)!important}
 & #detail .detail-grid{min-width:0;gap:24px!important}
 & #detail .detail-grid>*{min-width:0}
 & #detail .profile{row-gap:24px!important}
 & #detail::before{display:none!important}
 & :is(input,select,textarea,button,a){scroll-margin-block:24px}
}
@media(max-width:900px){:root:not(#ios-a):not(#ios-b) #detail .detail-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(prefers-reduced-motion:reduce){:root:not(#ios-a):not(#ios-b) *, :root:not(#ios-a):not(#ios-b) *::before, :root:not(#ios-a):not(#ios-b) *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Ambient depth: slow accent and cool-toned light pools behind opaque content. */
:root{--ambient-cycle:64s}
:root:not([data-theme=light]) .ios-wallpaper{background:#090c13}
:root:not([data-theme=light]) .ios-wallpaper span{opacity:.24;animation-name:ambient-drift;animation-duration:var(--ambient-cycle);will-change:transform}
:root:not([data-theme=light]) .ios-wallpaper span:nth-child(1){--c:var(--ios-tint);opacity:.22}
:root:not([data-theme=light]) .ios-wallpaper span:nth-child(2){--c:#596cb0;opacity:.3;animation-duration:78s}
:root:not([data-theme=light]) .ios-wallpaper span:nth-child(3){--c:#367e92;opacity:.18;animation-duration:86s}
:root:not([data-theme=light]) .ios-wallpaper span:nth-child(4){--c:#786193;opacity:.18;animation-duration:92s}
:root:not([data-theme=light]) .ios-wallpaper::after{background:linear-gradient(135deg,rgb(9 12 19 / .15),rgb(9 12 19 / .55));box-shadow:inset 0 0 120px rgb(0 0 0 / .25)}
@keyframes ambient-drift{from{transform:translate3d(-3vmax,-2vmax,0) scale(.95)}to{transform:translate3d(6vmax,4vmax,0) scale(1.07)}}
:root[data-motion=reduced] .ios-wallpaper span{animation:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){.ios-wallpaper span{animation:none!important;will-change:auto}}
@media(max-width:750px){.ios-wallpaper span:nth-child(n+3){display:none}.ios-wallpaper span{will-change:auto}}

/* Contrast across dark/light surfaces, including white and near-black accents. */
:root{--ios-label-2:#c6c6ce;--ios-label-3:#ababB5;--ios-red:#ff8d86}
:root[data-theme=light]{--ios-label-2:#51515b;--ios-label-3:#60606a;--ios-red:#b42318}
:root:not(#ios-a):not(#ios-b){
 & :is(input,textarea)::placeholder{color:var(--ios-label-2)!important;opacity:1!important}
 & aside nav :is(button,a)[class]:not(summary) svg,& .tr-fab svg,& .ios-sheet-done,& .ios-row svg{color:var(--accent-readable)!important}
 & aside nav :is(button,a):not(summary):is(.active,[aria-current=page]),& aside nav :is(button,a)[class]:not(summary):is(.active,[aria-current=page]) svg{color:var(--accent-ink)!important}
 & :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){color:var(--accent-ink)!important;background:var(--ios-tint)!important}
 & #tgChatList .tg-chat.is-selected,& #tgChatList .tg-chat.is-selected :is(small,strong),& #tgChatList .tg-unread{color:var(--accent-ink)!important}
 & #tgChatList .tg-chat.is-selected .tg-unread{background:var(--accent-ink)!important;color:var(--ios-tint)!important}
 & #tgMessages .tg-message.tg-out{background:var(--ios-tint)!important;background-image:none!important;color:var(--accent-ink)!important}
 & #tgMessages .tg-message.tg-out :is(p,span,small,time,a,button){color:var(--accent-ink)!important;opacity:1!important}
 & :is(.notification-badge,.ios-tab-badge){background:#b42318!important;color:#fff!important}
 & .color-presets button[data-apple-color][data-color]{background:var(--chip)!important;color:#000!important}
 & :is(select option:checked,th button.active,th button.sorted){color:var(--accent-readable)!important}
}
:root[data-theme=light]:not(#ios-a):not(#ios-b){
 & aside nav :is(button,a):not(summary):is(.active,[aria-current=page]),& :is(.primary,button.primary,button[type=submit],.btn-primary,#searchButton,[data-primary]):not(.lg-tab){color:var(--accent-ink)!important}
}
:root:not([data-theme=light]){--ios-label-2:#c6c6ce;--ios-label-3:#ababb5}

/* Spacing and chart craft informed by Unslop, Damir Sokolovsky
   https://github.com/heydamir/unslop (CC BY 4.0).
   The user-requested ambient background and surface glow remain intentional. */
:root{--space-control:8px;--space-group:16px;--space-section:24px}
:root:not(#ios-a):not(#ios-b){
 & main>header{margin-bottom:24px!important;gap:16px!important}
 & :is(.panel,.card,.chart-card,.team-card){padding:24px!important}
 & :is(.stats,.metrics){gap:16px!important;margin-block:24px!important}
 & :is(.stat,.metrics>article){padding:20px!important;min-width:0}
 & :is(.stat strong,.metrics>article strong){font-size:32px!important;line-height:1.2!important;font-weight:600!important;font-variant-numeric:tabular-nums}
 & :is(.toolbar,.section-head,.heading){gap:16px!important}
 & :is(.form-grid,.filters,#searchForm){gap:16px!important}
 & :is(.actions,.action-row,.manager-actions){gap:8px!important;flex-wrap:wrap}
 & :is(h1,h2,h3){font-weight:600!important}
 & :is(label,small,th,.muted,.eyebrow){letter-spacing:0!important}
 & :is(.panel,.chart-card)>h2{margin:0 0 8px!important}
 & :is(.panel,.chart-card)>p{margin:0 0 20px!important;line-height:1.5}
 & .graphs{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)!important;gap:24px!important;margin-block:24px!important;align-items:start}
 & .graphs>.panel{min-width:0;margin:0!important}
 & .graphs .canvas{height:280px!important;min-width:0;position:relative}
 & .graphs>.panel:last-child .canvas{height:240px!important}
 & .graphs canvas{max-width:100%!important}
 & .toolbar{row-gap:16px!important;margin-block:24px!important}
 & aside nav :is(a,button){gap:8px!important}
 & aside nav :is(a,button) svg{width:20px!important;height:20px!important;flex:0 0 20px}
}
@media(max-width:1100px){:root:not(#ios-a):not(#ios-b) .graphs{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:750px){:root:not(#ios-a):not(#ios-b){
 & :is(.panel,.card,.chart-card,.team-card){padding:16px!important}
 & :is(.stats,.metrics,.graphs){gap:16px!important}
 & .graphs .canvas{height:240px!important}
 & .toolbar label{flex-wrap:wrap;gap:8px!important}
}}

:root:not(#ios-a):not(#ios-b) .manager-platform-summary:empty{display:none!important}

/* Unslop refinement: aligned control symbols and clear spacing between groups. */
:root:not(#ios-a):not(#ios-b){
 & .has-control-icon{display:inline-flex!important;align-items:center;justify-content:center;gap:8px!important}
 & .control-icon{width:18px;height:18px;flex:0 0 18px;vertical-align:middle}
 & :is(.filters,.form-grid,.row) label{row-gap:8px!important}
 & :is(.section-head,.heading)+:is(.table-wrap,.scroll,form){margin-top:16px!important}
 & :is(.panel,.card,.team-card)+:is(.panel,.card,.team-card){margin-top:24px!important}
 & .graphs>.panel+.panel{margin-top:0!important}
 & :is(.table-wrap,.scroll)+:is(.pager,.pagination){margin-top:16px!important}
 & :is(.pager,.pagination){gap:12px!important;flex-wrap:wrap}
 & .graphs>.panel>p{min-height:40px;max-width:52ch}
 & .graphs>.panel .canvas{margin-top:8px}
 & :is(th,td){font-variant-numeric:tabular-nums}
 & .manager-platform-summary{gap:16px!important}
}

/* Compact visual scale; preserve usable hit areas around smaller glyphs. */
:root:not(#ios-a):not(#ios-b){
 & main>header h1,& .developer-heading h1,& main h1{font-size:28px!important;line-height:36px!important;letter-spacing:0!important}
 & h2{font-size:20px!important;line-height:28px!important}
 & h3{font-size:16px!important;line-height:24px!important}
 & aside nav :is(a,button) svg,& aside nav :is(a,button)[class] svg{width:18px!important;height:18px!important;flex:0 0 18px!important}
 & :is(button,.button)>.control-icon,& .custom-select-trigger>svg{width:16px!important;height:16px!important;flex:0 0 16px!important}
 & :is(button,.button)>img.brand-icon,& .message-link>img.brand-icon{width:20px!important;height:20px!important;object-fit:contain}
 & :is(.stat strong,.metrics>article strong){font-size:28px!important;line-height:36px!important}
 & :is(.stat,.metrics>article){padding:16px 20px!important}
 & .ios-row svg{width:18px!important;height:18px!important}
 & .tr-fab svg{width:20px!important;height:20px!important}
 & #detail .customer-balance-summary strong{font-size:16px!important;line-height:24px!important}
}
@media(max-width:750px){:root:not(#ios-a):not(#ios-b){& main>header h1,& main h1{font-size:24px!important;line-height:32px!important}}}

/* ---------- Chart tooltip: the same iOS glass popover as the menus and sheets ---------- */
:root:not(#ios-a):not(#ios-b){
 & body .gct{min-width:150px;padding:10px 12px!important;border:0!important;border-radius:14px!important;color:var(--ios-label)!important;
  background:var(--lg-surface,rgb(28 28 31 / .86))!important;background-image:none!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.9)!important;backdrop-filter:blur(22px) saturate(1.9)!important;
  box-shadow:inset 0 0 0 .5px var(--lg-surface-edge,rgb(255 255 255 / .13)),0 12px 36px var(--lg-shadow,rgb(0 0 0 / .38)),var(--ios-glow)!important;
  font-family:var(--ios-font)!important}
 & body .gct::after{background:var(--lg-surface,rgb(28 28 31 / .86))!important;border:0!important;box-shadow:none!important;width:12px;height:12px;margin-left:-6px;bottom:-5px;border-radius:2px}
 & body .gct.gct-below::after{top:-5px}
 & .gct-title{margin:0 0 6px!important;padding:0 0 6px!important;border-bottom:.5px solid var(--ios-sep)!important;font-size:12px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ios-label-2)!important}
 & .gct-dot{width:8px!important;height:8px!important;box-shadow:none!important}
 & .gct-label{font-size:13px!important;color:var(--ios-label-2)!important}
 & .gct-value{font-size:17px!important;font-weight:700!important;letter-spacing:0!important;color:var(--ios-label)!important}
 & .gct-sub{color:var(--ios-label-3)!important}
 & .gct-delta{border-radius:6px!important}
}

/* Before any account colour is applied, the page starts in Apple Blue, not the old sage green. */
:root{--accent:#0a84ff}
:root[data-theme=light]{--accent:#007aff}

/* Count-up numbers: fixed-width digits (no jitter) and a soft settle when they land */
.ios-count{font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}
.ios-count.ios-count-done{animation:ios-count-settle .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes ios-count-settle{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ios-count.ios-count-done{animation:none}}
:root[data-motion=reduced] .ios-count.ios-count-done{animation:none}

/* Segment labels stay on one line; ios.js sizes each segment to its measured label. */
.ios-segmented-host :is(.lg-tab,.lg-tab-copy),.ios-segmented-host .lg-tab-text{white-space:nowrap!important}

/* Shared interaction rhythm: controls 160ms, surfaces 240ms, data 650ms.
   Loading loops and toast lifetimes deliberately keep their own clocks. */
:root{--motion-fast:160ms;--motion-enter:240ms;--motion-exit:160ms;--motion-data:650ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
html:is(.ios-shell,.cirrel){--c-feedback:var(--motion-fast)!important;--c-enter:var(--motion-enter)!important;--c-ease:var(--motion-ease)!important}
html:is(.ios-shell,.cirrel) body :is(button,a,input,select,textarea,summary,.custom-select-arrow,.lg-tab,.c-card,.c-col){transition-duration:var(--motion-fast)!important;transition-timing-function:var(--motion-ease)!important}
html:is(.ios-shell,.cirrel) body :is(.ios-sheet,.ios-sheet-backdrop,.gct,.c-toast){transition-duration:var(--motion-enter)!important;transition-timing-function:var(--motion-ease)!important}
html:is(.ios-shell,.cirrel) body :is(.custom-select-menu.is-open,.sidebar-group[open]>.sidebar-group-items,.profile-device-drawer[open]>.profile-device-fields,dialog[open],#detail:not([hidden]),.tr-panel.ios-opening,.ios-count-done){animation-duration:var(--motion-enter)!important;animation-timing-function:var(--motion-ease)!important}
html:is(.ios-shell,.cirrel) body .tr-panel.ios-closing{animation-duration:var(--motion-exit)!important}
html:is(.ios-shell,.cirrel) body #toast .toast-card{transition-duration:var(--motion-enter)!important;transition-timing-function:var(--motion-ease)!important}
html:is(.ios-shell,.cirrel) body #toast .toast-card.leaving{transition-duration:var(--motion-exit)!important}
html:is(.ios-shell,.cirrel) main>section:not([hidden]):not(.metrics):not(#detail),html:is(.ios-shell,.cirrel) .metrics article,html:is(.ios-shell,.cirrel) .analytics-grid>*,html:is(.ios-shell,.cirrel) .c-col{animation-duration:var(--motion-enter)!important}
html:is(.ios-shell,.cirrel)[data-motion-paused] :is(.c-orbs span,.ios-wallpaper span,.glass-bg *){animation-play-state:paused!important}
/* Crisp glass edges and restrained row feedback, inspired by the reference. */
html:is(.ios-shell,.cirrel){--surface-edge:rgb(255 255 255 / .10);--surface-sheen:rgb(255 255 255 / .16);--surface-drop:rgb(0 0 0 / .35)}
html:is(.ios-shell,.cirrel)[data-theme=light]{--surface-edge:rgb(25 40 70 / .10);--surface-sheen:rgb(255 255 255 / .85);--surface-drop:rgb(25 40 70 / .12)}
html:is(.ios-shell,.cirrel) body :is(.chart-card,.graphs>.panel,.analytics-grid>.panel,main>section:not(#detail):not(.metrics):not([hidden])){box-shadow:inset 0 1px 0 var(--surface-sheen),inset 0 0 0 1px var(--surface-edge),0 16px 36px -24px var(--surface-drop)!important}
html:is(.ios-shell,.cirrel) body :is(main,dialog,#detail) thead th{font-size:12px!important;font-weight:600!important;letter-spacing:.01em!important;text-transform:none!important;padding:10px 14px!important;line-height:1.4}
html:is(.ios-shell,.cirrel) body :is(main,dialog,#detail) tbody td{padding:12px 14px!important;line-height:1.5;transition:background-color var(--motion-fast) var(--motion-ease);font-variant-numeric:tabular-nums}
html:is(.ios-shell,.cirrel) body :is(main,dialog,#detail) tbody tr:is(:hover,:focus-within)>td{background:color-mix(in srgb,var(--ios-tint) 7%,transparent)!important}
html:is(.ios-shell,.cirrel) body :is(main,dialog,#detail) tbody tr:hover td:first-child{box-shadow:none}
html:is(.ios-shell,.cirrel) .gct{border:1px solid var(--surface-edge);box-shadow:inset 0 1px 0 var(--surface-sheen),0 12px 30px -12px var(--surface-drop);font-variant-numeric:tabular-nums}
@media(max-width:750px){html:is(.ios-shell,.cirrel) body :is(main,dialog,#detail) :is(th,td){padding:10px 12px!important}}
@layer motion-accessibility {
html:is(.ios-shell,.cirrel)[data-motion=reduced] *,html:is(.ios-shell,.cirrel)[data-motion=reduced] *::before,html:is(.ios-shell,.cirrel)[data-motion=reduced] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html:is(.ios-shell,.cirrel) *,html:is(.ios-shell,.cirrel) *::before,html:is(.ios-shell,.cirrel) *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}

}

/* Data surfaces: keep this layer above legacy unlayered !important rules. */
@layer reference-data-surfaces {
 :root{--data-surface:rgba(15,22,34,.78);--data-inset:rgba(10,16,26,.35);--data-line:rgba(255,255,255,.09);--data-heading:#f1f5fa;--data-muted:#aebacb;--data-row:rgba(255,255,255,.018);--data-highlight:rgba(255,255,255,.055)}
 :root[data-theme=light]{--data-surface:rgba(255,255,255,.82);--data-inset:rgba(242,246,252,.65);--data-line:rgba(24,45,72,.11);--data-heading:#17263b;--data-muted:#53647a;--data-row:rgba(28,64,110,.025);--data-highlight:rgba(40,95,165,.07)}
 html body :is(.chart-card,.graphs>.panel,.analytics-grid>.panel,.analytics-grid>.chart-card,#customersView,#todayView,#userReportView){background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 45%),var(--data-surface)!important;border:1px solid var(--data-line)!important;border-radius:24px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -24px rgba(0,0,0,.65)!important;backdrop-filter:blur(24px) saturate(130%)!important}
 html body :is(.chart-card,.graphs>.panel,.analytics-grid>.panel){padding:24px!important;overflow:hidden}
 html body :is(.chart-card,.graphs>.panel) :is(h2,h3){font-size:18px!important;line-height:1.4;color:var(--data-heading)!important;letter-spacing:-.025em}
 html body :is(.chart-card,.graphs>.panel) p{font-size:13px!important;color:var(--data-muted)!important;line-height:1.5}
 html body :is(.graphs .canvas,.chart-card .chart-box){height:310px!important;padding:12px 0 0!important}
 html body :is(#searchForm,.daily-filter-form){background:var(--data-inset)!important;border:1px solid var(--data-line)!important;border-radius:16px!important;box-shadow:none!important}
 html body :is(.table-wrap,#reportTableWrap,main .scroll,dialog .scroll){background:var(--data-inset)!important;border:1px solid var(--data-line)!important;border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;overflow:auto!important;max-width:100%}
 html body table.data-grid{border-spacing:0!important;border-collapse:separate!important;background:transparent!important;font-size:13px!important}
 html body table.data-grid thead th{background:var(--data-surface)!important;color:var(--data-muted)!important;font-size:12px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;padding:14px 16px!important;border-bottom:1px solid var(--data-line)!important;white-space:nowrap;line-height:1.4}
 html body table.data-grid tbody td{background:transparent!important;color:var(--data-heading);padding:15px 16px!important;border-bottom:1px solid var(--data-line)!important;line-height:1.5!important;vertical-align:middle!important;font-variant-numeric:tabular-nums}
 html body table.data-grid tbody tr:nth-child(even)>td{background:var(--data-row)!important}
 html body table.data-grid tbody tr:is(:hover,:focus-within)>td{background:var(--data-highlight)!important;box-shadow:none!important}
 html body table.data-grid tbody tr:last-child>td{border-bottom:0!important}
 html body table.data-grid td.cell-actions :is(button,a){border-radius:999px!important;min-height:32px!important;padding:6px 12px!important;background:var(--data-highlight)!important;border:1px solid var(--data-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;color:var(--data-heading)!important}
 html body table.data-grid td[colspan]:only-child{background:transparent!important;color:var(--data-muted)!important;padding:48px 20px!important;font-weight:400!important}
 html body table.data-grid th :is(button,a){background:none!important;box-shadow:none!important;color:inherit!important}
 html body table.data-grid :is(td,th).cell-num{text-align:right!important}
 html body .gct{background:var(--data-surface)!important;border:1px solid var(--data-line)!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px -16px #0009!important;backdrop-filter:blur(24px)!important}
 html body .gct-title{color:var(--data-muted)!important;font-weight:500!important}
 html body .gct-value{color:var(--data-heading)!important}
 @media(max-width:750px){html body :is(.chart-card,.graphs>.panel){padding:18px!important}html body :is(.graphs .canvas,.chart-card .chart-box){height:240px!important}html body table.data-grid :is(th,td){padding:12px!important}}
}
/* Reference interaction surfaces */
html.theme-reveal::view-transition-old(root),html.theme-reveal::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-reveal::view-transition-new(root){z-index:2}
html body .reference-entered{animation:none!important}
html body .account-source{display:none!important}
@layer reference-account {
 html body aside .account-trigger{display:flex!important;align-items:center;gap:10px;width:100%;padding:12px!important;min-height:64px!important;border:1px solid var(--data-line)!important;border-radius:16px!important;background:var(--data-highlight)!important;box-shadow:inset 0 1px 0 var(--surface-sheen)!important;color:var(--data-heading)!important;text-align:left!important;margin-top:12px!important;flex-shrink:0}
 .account-avatar{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--ios-tint) 24%,var(--data-surface));font-size:12px;font-weight:700;position:relative}
 .account-avatar::after{content:'';position:absolute;right:0;bottom:0;width:8px;height:8px;border-radius:50%;background:#34c77b;border:2px solid var(--data-surface)}
 .account-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.account-copy b{overflow:hidden;text-overflow:ellipsis;font-size:13px}.account-copy small{font-size:11px;color:var(--data-muted);text-transform:capitalize}
 html body .account-popover{position:fixed;inset:auto;margin:0;width:250px;max-width:calc(100vw - 16px);padding:7px;border-radius:18px;border:1px solid var(--data-line);background:var(--data-surface);color:var(--data-heading);backdrop-filter:blur(30px) saturate(150%);box-shadow:inset 0 1px 0 var(--surface-sheen),0 18px 44px -16px #0009;transform-origin:bottom left}
 .account-popover::backdrop{background:transparent}
 html body .account-popover button{display:flex!important;align-items:center;width:100%;padding:10px 12px!important;min-height:40px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font-size:13px!important;text-align:left!important;justify-content:flex-start!important}
 html body .account-popover button:is(:hover,:focus-visible){background:var(--data-highlight)!important;outline:2px solid var(--ios-tint);outline-offset:-2px}
 html body .account-popover button.account-danger{color:#ef777c!important}
 .account-menu-heading{padding:9px 12px;font-size:11px;color:var(--data-muted);text-transform:uppercase;letter-spacing:.04em}
 .account-popover hr{border:0;border-top:1px solid var(--data-line);margin:6px}
}
@layer reference-account {
 html body .reference-entered{animation:none!important}
 html body .account-popover button::before,html body .account-popover button::after{content:none!important;display:none!important}
 html body .account-popover button{gap:10px!important}
 .account-popover button svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
}

@layer reference-account {html body aside :is(.account-only-group,.account-source){display:none!important}}
@layer reference-data-surfaces {
 html body .data-grid-wrap{background:var(--data-inset)!important;border:1px solid var(--data-line)!important;border-radius:16px!important;overflow:auto!important;max-width:100%}
 html body table.data-grid>caption{padding:16px!important;text-align:left!important;background:transparent!important;border-bottom:1px solid var(--data-line)!important;color:var(--data-heading)!important}
 html body table.data-grid tbody tr{background:transparent!important}
 html body table.data-grid :is(.record-row-actions,.cell-actions) button{min-height:32px!important;padding:6px 12px!important;border-radius:999px!important;box-shadow:none!important;background:var(--data-highlight)!important;color:var(--data-heading)!important;border:1px solid var(--data-line)!important}
 html body table.data-grid :is(td.record-number,th.record-number){text-align:right!important;font-variant-numeric:tabular-nums}
 html body table.data-grid :is(.record-id,td small){font-size:11px!important;color:var(--data-muted)!important}
 html body :is(.chart-card,.graphs>.panel,.analytics-grid>.panel){position:relative}
 html body :is(.chart-card,.graphs>.panel) h2{font-size:18px!important;font-weight:650!important;margin-bottom:6px!important}
 html body :is(.chart-card,.graphs>.panel) p{min-height:0!important;margin:0 0 12px!important}
 html body :is(.graphs,.analytics-grid){gap:20px!important}
}