/* ===================== Cirrel tables and motion =====================
   Loaded after cirrel.css. Cirrel-style data tables, a highlight that slides
   between sidebar pages, a sliding tab underline, springy main buttons and
   breathing status dots. The entrance choreography itself lives in
   cirrel-motion.js; html.c-glide is set there once the sliding highlight exists. */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel{--c-spring:cubic-bezier(.34,1.32,.5,1);--c-row-hover:rgba(255,255,255,.055);--c-row-line:rgba(255,255,255,.065);--c-ring:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light]{--c-row-hover:rgba(20,32,64,.05);--c-row-line:rgba(20,32,64,.08);--c-ring:inset 0 0 0 1px rgba(20,32,64,.08),inset 0 1px 0 rgba(255,255,255,.8)}

/* ---- Tables ----
   Inside the same cascade layer as the iOS table rules: !important rules in a layer
   beat unlayered ones, so this is the only place an override can win. */
@layer reference-data-surfaces {
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap{border:0!important;border-radius:22px!important;background:rgba(255,255,255,.025)!important;box-shadow:var(--c-ring)!important;padding:4px 6px 6px!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .data-grid-wrap{background:rgba(255,255,255,.45)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table{border-collapse:separate!important;border-spacing:0!important;background:transparent!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table thead,:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table thead tr,:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table thead th{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table thead th .column-sort{color:inherit!important;font:inherit!important;letter-spacing:inherit!important;transition:color var(--c-feedback)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table thead th .column-sort:hover{color:var(--ios-label,#fff)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody tr{background:transparent!important}
/* Rounded highlight across the whole row, like Cirrel's clickable rows */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td.cell-num{font-variant-numeric:tabular-nums;font-weight:650}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td.empty{color:var(--c-muted)}
/* Name cells get an initials avatar (drawn from data-c-initials, so the text itself never changes) */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td:first-child>strong[data-c-initials]{display:inline-flex!important;align-items:center;gap:10px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td:first-child>strong[data-c-initials]::before{content:attr(data-c-initials);display:inline-grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:hsl(var(--c-hue,215) 70% 62% / .2);color:hsl(var(--c-hue,215) 85% 78%);box-shadow:inset 0 0 0 1px hsl(var(--c-hue,215) 70% 70% / .25);font-size:11px;font-weight:700;letter-spacing:0}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td[data-c-initials]:first-child::before{vertical-align:middle;margin-right:10px;content:attr(data-c-initials);display:inline-grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:hsl(var(--c-hue,215) 70% 62% / .2);color:hsl(var(--c-hue,215) 85% 78%);box-shadow:inset 0 0 0 1px hsl(var(--c-hue,215) 70% 70% / .25);font-size:11px;font-weight:700;letter-spacing:0}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .data-grid-wrap>table tbody :is(td:first-child>strong[data-c-initials],td[data-c-initials]:first-child)::before{color:hsl(var(--c-hue,215) 70% 34%);background:hsl(var(--c-hue,215) 80% 60% / .16)}
/* Row buttons become soft glass pills */
/* Pagination under tables */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .pagination{gap:10px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .pagination button{border-radius:999px!important}
/* Manager chart panels: the iOS chart gradient lives in this layer too, so the glass has to be set here */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel main .graphs>.panel{background:var(--c-glass)!important;backdrop-filter:blur(30px) saturate(150%)!important;-webkit-backdrop-filter:blur(30px) saturate(150%)!important;border:0!important;border-radius:26px!important;box-shadow:var(--c-ring),inset 0 18px 30px -24px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3),0 20px 44px -22px rgba(0,0,0,.75)!important}
/* Tag chips in tables become Cirrel status pills tinted with the highlight colour */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap td .pill{display:inline-flex!important;align-items:center;height:24px!important;padding:0 10px!important;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--c-accent) 15%,transparent)!important;color:color-mix(in srgb,var(--c-accent) 70%,#fff)!important;font-size:12px!important;font-weight:650!important;white-space:nowrap;box-shadow:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .data-grid-wrap td .pill{color:color-mix(in srgb,var(--c-accent) 75%,#000)!important}
/* Desktop table only: phones get the iOS card layout */
@media(min-width:751px){
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table thead th{padding:13px 14px 11px!important;border-bottom:1px solid var(--c-line)!important;color:var(--c-muted)!important;font-size:11.5px!important;font-weight:650!important;letter-spacing:.05em!important;white-space:nowrap}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td{padding:13px 14px!important;border-bottom:1px solid var(--c-row-line)!important;background:transparent;transition:background-color var(--c-feedback)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody tr:last-child td{border-bottom-color:transparent!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody tr:not(:has(td.empty)):hover td{background:var(--c-row-hover)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody tr:hover td:first-child{border-radius:12px 0 0 12px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody tr:hover td:last-child{border-radius:0 12px 12px 0}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody tr:hover td:only-child{border-radius:12px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td :is(button,a.button):not(.primary){min-height:32px!important;padding:0 14px!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.12)!important;font-size:12.5px!important;font-weight:650!important;white-space:nowrap;transition:background-color var(--c-feedback),box-shadow var(--c-feedback),scale .25s var(--c-spring)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td :is(button,a.button):not(.primary):hover{background:color-mix(in srgb,var(--c-accent) 22%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent) 50%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .data-grid-wrap>table tbody td :is(button,a.button):not(.primary){background:rgba(255,255,255,.7)!important;box-shadow:inset 0 0 0 1px rgba(20,32,64,.12)!important}
}
}

/* ---- Panels: Cirrel glass with a lit top edge, on every page (the iOS layer paints them solid grey otherwise) ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(main>section.ios-card-view,main>section.panel,main>section.manager-platform-summary,main .graphs>.panel):not(#detail):not([hidden]){background:var(--c-glass)!important;backdrop-filter:blur(30px) saturate(150%)!important;-webkit-backdrop-filter:blur(30px) saturate(150%)!important;border:0!important;border-radius:26px!important;box-shadow:var(--c-ring),inset 0 18px 30px -24px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3),0 20px 44px -22px rgba(0,0,0,.75)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] :is(main>section.ios-card-view,main>section.panel,main>section.manager-platform-summary,main .graphs>.panel):not(#detail):not([hidden]){box-shadow:var(--c-ring),0 1px 1px rgba(15,30,60,.04),0 18px 40px -22px rgba(15,30,60,.38)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel main .metrics article{background:rgba(255,255,255,.04)!important;border:0!important;border-radius:20px!important;box-shadow:var(--c-ring)!important;backdrop-filter:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] main .metrics article{background:rgba(255,255,255,.55)!important}
/* Stat tiles inside panels (Team overview counts and similar) */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(main>section.ios-card-view :is(article:not(.c-card),#teamTotals>div),main .stats>article.stat,main .tool-card){background:rgba(255,255,255,.035)!important;border:0!important;border-radius:18px!important;box-shadow:var(--c-ring)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] :is(main>section.ios-card-view :is(article:not(.c-card),#teamTotals>div),main .stats>article.stat,main .tool-card){background:rgba(255,255,255,.5)!important}

/* ---- Dialogs (welcome tour, tag pickers, settings): solid glass with a lit edge, rising in on a spring ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog[open]:not(.player-record-drawer):not(.telegram-inbox-dialog){background:var(--c-solid)!important;backdrop-filter:blur(30px) saturate(150%)!important;-webkit-backdrop-filter:blur(30px) saturate(150%)!important;border:0!important;border-radius:26px!important;box-shadow:var(--c-ring),0 40px 80px -28px rgba(0,0,0,.6)!important;color:inherit;animation:c-dialog-in .5s var(--c-spring) both!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog[open]:not(.player-record-drawer):not(.telegram-inbox-dialog)::backdrop{background:rgba(4,7,13,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] dialog[open]:not(.player-record-drawer):not(.telegram-inbox-dialog)::backdrop{background:rgba(20,32,64,.18)}
@keyframes c-dialog-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-motion=reduced] dialog[open]{animation:none!important}
@media(prefers-reduced-motion:reduce){:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog[open]{animation:none!important}}

/* ---- Sidebar: one highlight that slides from page to page ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel aside nav{position:relative}
.c-navpill{position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none;border-radius:12px;background:var(--c-accent);box-shadow:0 8px 22px color-mix(in srgb,var(--c-accent) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.28);opacity:0;transition:transform .5s var(--c-spring),width .5s var(--c-spring),height .5s var(--c-spring),opacity .2s}
.c-navpill.on{opacity:1}
.c-navpill.instant{transition:none}
/* The iOS layer paints the current item under :root:not(#ios-a):not(#ios-b), so this needs the same two-id weight */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-glide aside nav :is(button,a):not(summary){position:relative;z-index:1}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-glide aside nav :is(button,a)[class]:not(summary):is(.active,[aria-current=page]){background:transparent!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important;transition:color .25s!important}

:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-glide aside nav :is(button,a)[class].c-on,:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-glide aside nav :is(button,a)[class].c-on svg{color:var(--c-ink)!important}

/* ---- Tabs: the underline slides to the chosen tab ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-tabs{position:relative}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-tabs.c-has-ink button.active{border-bottom-color:transparent!important}
.c-ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;border-radius:2px;background:var(--c-accent);pointer-events:none;transition:transform .45s var(--c-spring),width .45s var(--c-spring)}

/* ---- Main buttons: spring press and a gentle pull toward the pointer ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel button.primary:not(:disabled){translate:var(--c-mx,0) var(--c-my,0);transition:translate .45s var(--c-spring),scale .3s var(--c-spring),box-shadow .2s,background-color .2s!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel button.primary.c-pull{transition:translate .12s linear,scale .3s var(--c-spring),box-shadow .2s!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel button.primary:not(:disabled):hover{box-shadow:0 10px 26px color-mix(in srgb,var(--c-accent) 50%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(button,a.button):not(:disabled):active{scale:.965}

/* ---- Breathing status dots ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-greet p i,:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel main>header .live>:first-child{position:relative}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-greet p i::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--c-green);opacity:.25;animation:c-breathe 2.2s ease-in-out infinite}
@keyframes c-breathe{0%,100%{opacity:.08;transform:scale(.85)}50%{opacity:.4;transform:scale(1.15)}}

/* ---- A number that changes flashes once in the highlight colour ---- */
.c-flash{animation:c-flash 1s cubic-bezier(.22,1,.36,1)}
@keyframes c-flash{0%{color:var(--c-accent)}100%{color:inherit}}

/* The page entrance is choreographed by cirrel-motion.js, so the simpler rise from cirrel.css steps aside */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-choreo main>section:not([hidden]):not(.metrics):not(#detail),:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-choreo .metrics article{animation:none!important}

/* Reduced motion: no movement, only the state */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-motion=reduced] :is(.c-navpill,.c-ink){transition:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-motion=reduced] button.primary{translate:none!important}
@media(prefers-reduced-motion:reduce){:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.c-navpill,.c-ink){transition:none!important}:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel button.primary{translate:none!important}}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel.c-paused .c-greet p i::after{animation-play-state:paused}

/* Phones: the iOS layer turns table rows into cards, so drop the row pill shapes there */
@layer reference-data-surfaces{@media(max-width:750px){
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap{padding:2px!important;border-radius:18px!important}
/* Phone cards: one "label  value" line per detail instead of a run-on sentence that breaks mid-label */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .ios-list-table tbody td{padding:0!important;border:0!important;background:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .ios-list-table tbody td:first-child{padding:0 0 8px!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .ios-list-table tbody td.ios-meta[data-label]{display:flex!important;align-items:baseline;justify-content:space-between;gap:14px;padding:3px 0!important;text-align:right;overflow-wrap:anywhere}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .ios-list-table tbody td.ios-meta[data-label]::before{content:attr(data-label)!important;flex:0 0 auto;text-align:left;white-space:nowrap;color:var(--c-muted);font-weight:500}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .ios-list-table tbody td.ios-action{padding:10px 0 0!important}
}}

/* ---- Chart hover bubble: Cirrel's light card (value first, the day under it) over dark pages ---- */
/* Inside the iOS data layer, where the dark bubble is defined, so this override can win */
@layer reference-data-surfaces{
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #customers tr:has([data-open]) td{cursor:pointer}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct{background:rgba(244,238,235,.96)!important;color:#0b1220!important;border:0!important;border-radius:12px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 1px 2px rgba(0,0,0,.3),0 20px 44px -22px rgba(0,0,0,.75)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct::after{background:rgba(244,238,235,.96)!important;border:0!important;box-shadow:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-title{color:rgba(11,18,32,.58)!important;border-bottom-color:rgba(11,18,32,.09)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-label{color:rgba(11,18,32,.72)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-value{color:#0b1220!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-sub{color:rgba(11,18,32,.5)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-up{background:rgba(24,117,58,.12)!important;color:#18753a!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-down{background:rgba(196,38,28,.1)!important;color:#c4261c!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .gct{transition:opacity .16s,transform .22s cubic-bezier(.22,1,.36,1)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .gct-flat{background:rgba(11,18,32,.06)!important;color:rgba(11,18,32,.6)!important}
}

/* ===================== Buttons, chips and readable colour (Cirrel) =====================
   Secondary buttons: soft glass pills. Main buttons: a deep gradient of the highlight
   colour (--c-fill, darkened in cirrel-motion.js until white text reaches 4.5:1).
   The exclusion list mirrors the iOS button rule so segmented controls, tabs, menus and
   sidebar items keep their own look. */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(button,.button,a.button,input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],[role=menuitem],[role=switch],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.primary,[type=submit],#searchButton,#searchCustomersButton,.batch-usernames-open,.column-sort,.c-tabs button,.account-trigger,.c-grip,.toast-card *,.c-toast *,.lg-glass *)){min-height:40px!important;padding:0 18px!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;backdrop-filter:blur(14px) saturate(160%)!important;-webkit-backdrop-filter:blur(14px) saturate(160%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.12)!important;color:var(--c-strong)!important;font-size:13.5px!important;font-weight:600!important;letter-spacing:0!important;white-space:nowrap;transition:background-color var(--c-feedback),box-shadow var(--c-feedback),scale .3s var(--c-spring)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(button,.button,a.button,input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],[role=menuitem],[role=switch],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.primary,[type=submit],#searchButton,#searchCustomersButton,.batch-usernames-open,.column-sort,.c-tabs button,.account-trigger,.c-grip,.toast-card *,.c-toast *,.lg-glass *)):not(:disabled):hover{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.16)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] :is(button,.button,a.button,input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],[role=menuitem],[role=switch],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.primary,[type=submit],#searchButton,#searchCustomersButton,.batch-usernames-open,.column-sort,.c-tabs button,.account-trigger,.c-grip,.toast-card *,.c-toast *,.lg-glass *)){background:rgba(255,255,255,.72)!important;box-shadow:inset 0 0 0 1px rgba(20,32,64,.12),0 1px 2px rgba(15,30,60,.06)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] :is(button,.button,a.button,input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],[role=menuitem],[role=switch],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.primary,[type=submit],#searchButton,#searchCustomersButton,.batch-usernames-open,.column-sort,.c-tabs button,.account-trigger,.c-grip,.toast-card *,.c-toast *,.lg-glass *)):not(:disabled):hover{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(20,32,64,.18),0 2px 6px rgba(15,30,60,.08)!important}

/* Main buttons: deep highlight gradient, lit top edge and a soft glow */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(button.primary,a.primary,.button.primary,button[type=submit]:not(.link-button):not(.icon-only),#searchButton,#searchCustomersButton):not(:disabled){min-height:40px!important;padding:0 20px!important;border:0!important;border-radius:999px!important;background:linear-gradient(180deg,var(--c-fill-hi,#1c7af0),var(--c-fill,#0d63d1))!important;color:#fff!important;font-size:13.5px!important;font-weight:650!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 22px -10px color-mix(in srgb,var(--c-accent) 70%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(button.primary,a.primary,.button.primary,button[type=submit]:not(.link-button):not(.icon-only),#searchButton,#searchCustomersButton):not(:disabled):hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 12px 26px -10px color-mix(in srgb,var(--c-accent) 85%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(button,.button,a.button):disabled{opacity:.45!important;filter:none!important}

/* Chips (currency, counts, tags outside tables): small quiet pills */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel main span.pill:not(td .pill){display:inline-flex!important;align-items:center;gap:6px;height:28px!important;padding:0 12px!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important;color:var(--c-strong)!important;font-size:12px!important;font-weight:600!important;letter-spacing:0!important;white-space:nowrap}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] main span.pill:not(td .pill){background:rgba(255,255,255,.7)!important;box-shadow:inset 0 0 0 1px rgba(20,32,64,.1)!important}

/* The sliding sidebar highlight uses the contrast-safe fill too */
.c-navpill{background:linear-gradient(180deg,var(--c-fill-hi,#1c7af0),var(--c-fill,#0d63d1))!important}

/* ---- Readable text: stronger secondary and tertiary labels over glass and spheres ---- */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel{--c-strong:#f2f5fa;--c-muted:#b3bdd0;--c-glass:rgba(11,15,26,.78);--ios-label-2:rgba(235,238,245,.8)!important;--ios-label-3:rgba(235,238,245,.6)!important;--data-muted:rgba(235,238,245,.72)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light]{--c-strong:#0b1220;--c-muted:#46536b;--c-glass:rgba(255,255,255,.74);--ios-label-2:rgba(40,46,60,.82)!important;--ios-label-3:rgba(40,46,60,.66)!important;--data-muted:rgba(40,46,60,.78)!important}
/* Light mode: disclosure links inside panels were white on white; the Translate button label was 2.5:1 */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel main details:not(.sidebar-group)>summary{color:var(--c-strong)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] :is(.tr-fab,.tr-fab-label){color:var(--c-fill,#0d63d1)!important}
/* Light mode on the Team page: count tiles and connection links had white text on the light glass */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] main :is(#teamTotals>div,#teamTotals>div *,a.connection-open){color:var(--c-strong)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] main a.connection-open{color:var(--c-fill,#0d63d1)!important}

/* ---- Row actions: two pills and a "More ⋯" menu (cirrel-motion.js) ----
   In the data layer, where the row-button pills are defined, so the menu items can drop the pill shape. */
@layer reference-data-surfaces{
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td.c-actions{display:table-cell!important;white-space:nowrap!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td.c-actions>button{margin:0 6px 0 0!important;vertical-align:middle}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td.c-actions>button.c-more{display:inline-flex!important;align-items:center;gap:6px;padding:0 12px 0 14px!important}
.c-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.c-more[aria-expanded=true]{background:color-mix(in srgb,var(--c-accent) 22%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-more-menu{position:fixed;inset:auto;margin:0;min-width:210px;max-width:min(280px,calc(100vw - 16px));padding:6px;border:0;border-radius:16px;background:var(--c-solid);color:var(--c-strong);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);box-shadow:var(--c-ring),0 24px 48px -18px rgba(0,0,0,.6)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-more-menu:popover-open{display:flex;flex-direction:column;gap:2px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td .c-more-menu button[role=menuitem]:not(.primary){display:flex!important;align-items:center;width:100%;min-height:38px!important;margin:0!important;padding:0 12px!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:var(--c-strong)!important;font-size:13.5px!important;font-weight:550!important;text-align:left;justify-content:flex-start;white-space:nowrap}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td .c-more-menu button[role=menuitem]:not(.primary):is(:hover,:focus-visible){background:var(--c-hover)!important;outline:none}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .data-grid-wrap>table tbody td .c-more-menu button[role=menuitem]:not(.primary).c-danger{color:#f08d8c!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .data-grid-wrap>table tbody td .c-more-menu button[role=menuitem]:not(.primary).c-danger{color:#c4261c!important}
}

/* ---- Compact rhythm (Nov 2026 audit) ----
   Blocks inside a workspace page were spaced 12/15/16/18/20/22/24/25px apart. One step now:
   12px between consecutive blocks, no stray outer margins. Widths are untouched (block flow). */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel body.ui-workspace main>section>*{margin-top:0!important;margin-bottom:0!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel body.ui-workspace main>section>:not([hidden])~:not([hidden]):not(:empty){margin-top:12px!important}
@layer reference-data-surfaces{
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel body.ui-workspace main>section>*{margin-top:0!important;margin-bottom:0!important}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel body.ui-workspace main>section>:not([hidden])~:not([hidden]):not(:empty){margin-top:12px!important}
}
/* A slight softening of the background spheres (about a tenth of the panels' 24px glass blur).
   Static per sphere, so the drift animation stays on the compositor. */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-orbs span{filter:blur(2.4px)}
/* Lite mode (data-lite, set by ios-early.js on phones, tablets and weaker computers).
   Live glass blur is redrawn whenever anything behind it moves; with drifting spheres that is every
   frame. Here the background stands still and is softened once instead, and panels drop the live
   blur, so a page only repaints when its content changes. Same colours and layout.
   Floating layers (bars, sidebar, menus, popovers, sheets, toasts, dialogs) keep their blur: they need
   it to stay readable over content, are small or rarely open, and the still background makes it cheap.
   The long ID chain outranks the glass rules that reach several IDs. */
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] *:not(:is(.lg-glass,dialog,[role=dialog],[class*=navbar],[class*=tabbar],[class*=sidebar],[class*=menu],[class*=popover],[class*=sheet],[class*=toast],[class*=banner],[class*=conversation-title])),
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] *:not(:is(.lg-glass,dialog,[role=dialog],[class*=navbar],[class*=tabbar],[class*=sidebar],[class*=menu],[class*=popover],[class*=sheet],[class*=toast],[class*=banner],[class*=conversation-title]))::before,
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] *:not(:is(.lg-glass,dialog,[role=dialog],[class*=navbar],[class*=tabbar],[class*=sidebar],[class*=menu],[class*=popover],[class*=sheet],[class*=toast],[class*=banner],[class*=conversation-title]))::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] :is(.c-orbs,.glass-bg,.ios-wallpaper),
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] :is(.c-orbs,.glass-bg,.ios-wallpaper) *,
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] :is(.c-orbs,.glass-bg,.ios-wallpaper) *::before,
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] :is(.c-orbs,.glass-bg,.ios-wallpaper) *::after{animation:none!important}
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] .c-orbs{filter:blur(26px);opacity:.62}
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite][data-theme=light] .c-orbs{opacity:.5}
/* Customer profile sheet (#detail): Cirrel glass instead of the older solid-black iOS sheet */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail{background:var(--c-solid)!important;backdrop-filter:blur(30px) saturate(150%)!important;-webkit-backdrop-filter:blur(30px) saturate(150%)!important;border:0!important;color:var(--c-strong);box-shadow:0 0 0 100vmax rgba(4,7,13,.45),var(--c-ring),0 40px 80px -28px rgba(0,0,0,.6)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] #detail{box-shadow:0 0 0 100vmax rgba(20,32,64,.18),var(--c-ring),0 40px 80px -28px rgba(20,32,64,.3)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail>.section-head:first-child{background:var(--c-solid)!important;backdrop-filter:blur(24px) saturate(150%)!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;border:0!important;border-bottom:1px solid var(--c-line)!important;box-shadow:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail :is(#profile,.case,#customerSupportDetails,#playerRecordExplorer){background:var(--c-glass-2)!important;background-image:none!important;border:0!important;border-radius:20px!important;box-shadow:var(--c-ring)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail :is(#paymentNames,.muted:is(div,p),.record-cash-filters){background:rgba(255,255,255,.035)!important;background-image:none!important;border:0!important;border-radius:16px!important;box-shadow:var(--c-ring)!important;color:var(--c-muted)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] #detail :is(#paymentNames,.muted:is(div,p),.record-cash-filters){background:rgba(20,32,64,.035)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail .customer-balance-summary article{background:var(--c-glass-2)!important;border:0!important;border-radius:18px!important;box-shadow:var(--c-ring)!important}
/* Copy buttons: square glass pill; the general pill padding squashed the icon to 0px */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail .profile-copy-button{flex:0 0 32px!important;width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;display:inline-grid!important;place-items:center!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;box-shadow:var(--c-ring)!important;color:var(--c-strong)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] #detail .profile-copy-button{background:rgba(255,255,255,.72)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail .profile-copy-button:is(:hover,:focus-visible){background:var(--c-hover)!important;color:var(--c-accent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail .profile-copy-button svg{flex:none!important;width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round}
@media(pointer:coarse){:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail .profile-copy-button{flex-basis:44px!important;width:44px!important;height:44px!important;min-height:44px!important}}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #detail .customer-balance-summary article:first-child strong{color:var(--c-strong)!important}
/* Selected tab / chip in a button group: filled pill so you can see where you are */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(#detail .tabs button.active,.record-tab-row button[aria-pressed=true]){background:linear-gradient(180deg,var(--c-fill-hi),var(--c-fill))!important;color:#fff!important;font-weight:650!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 18px -8px var(--c-accent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .record-tab-row button[aria-pressed=true]::after{opacity:0!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(#detail .tabs button:not(.active),.record-tab-row button[aria-pressed=false]):hover{background:var(--c-hover)!important}

/* Team page: connected APIs as compact one-line rows */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList{display:grid;gap:2px;margin:14px 0 22px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList>p.connection-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto auto;gap:14px;align-items:center;margin:0;padding:8px 12px;border-radius:12px;font-size:13.5px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList>p.connection-row:hover{background:var(--c-row-hover)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList :is(.connection-row strong,.connection-host){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList .connection-row strong{color:var(--c-strong);font-weight:600}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList .connection-host{color:var(--c-muted);font-size:12.5px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList .connection-state{font-size:12px;font-weight:600;color:var(--c-warm);white-space:nowrap}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList .connection-state.ok{color:var(--c-green)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList a.connection-open{font-size:13px;white-space:nowrap}
@media(max-width:750px){:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList>p.connection-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList .connection-host{grid-row:2;grid-column:1}:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #connectionList a.connection-open{grid-row:2;grid-column:2}}

/* UI audit fixes (2026-11-07) */
/* Sign-in: the password Show/Hide button keeps its label on one line on phones */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .password-field #showPassword{white-space:nowrap!important;flex:none!important;min-width:max-content!important}
/* Link-styled main buttons (manager "Add employee") centre their label like real buttons */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel a.primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;text-decoration:none!important}
/* Translate button: solid surface so its label stays readable over the spheres */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .tr-fab{background:var(--c-solid)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) :is(.tr-fab,.tr-fab-label){color:var(--c-strong)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel:not([data-theme=light]) .tr-fab svg{color:var(--c-accent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] :is(.tr-fab,.tr-fab-label,.tr-fab svg){color:color-mix(in srgb,var(--c-fill,#0d63d1) 80%,#000)!important}
/* Leave room under the last controls so they can scroll clear of the floating Translate button */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel body>main{padding-bottom:max(var(--c-main-pb,0px),88px)!important}
@media(max-width:750px){:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel body>main{padding-bottom:76px!important}}
/* Phone tab bar: the selected label is dark enough on light glass; Burmese letters are not clipped */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .lg-tab-bar[data-icons]{--lg-tab-selected:color-mix(in srgb,var(--c-fill,#0d63d1) 82%,#000)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[lang=my] .lg-tab-bar[data-icons] .lg-tab-label{line-height:19px!important}
/* Team page "HAR needed" reads on the light theme */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] #connectionList .connection-state:not(.ok){color:color-mix(in srgb,var(--c-warm) 58%,#000)}
/* A dropdown replaced by a segmented control leaves the keyboard order too */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .custom-select.ios-native-hidden{visibility:hidden!important}
/* Today's recharges: the tag switch is as tall as the date and sort fields, so the labels line up */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #todayView label>.ios-segmented-host{min-height:44px;display:flex;align-items:center}
/* Customers: the username search keeps its text clear of the batch-usernames button */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #searchForm .batch-username-field>input{padding-left:12px!important;padding-right:50px!important;text-overflow:ellipsis}
/* Telegram inbox: chat rows are list rows, not 40px pill buttons */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #tgChatList .tg-chat{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;column-gap:12px!important;row-gap:2px!important;align-items:center!important;align-content:center!important;height:auto!important;min-height:72px!important;padding:10px 12px!important;border-radius:16px!important;white-space:normal!important;text-align:left!important;box-shadow:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #tgChatList .tg-chat:not(.is-selected):not(:hover){background:transparent!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #tgChatList .tg-chat>.tg-avatar{grid-column:1!important;grid-row:1/span 2!important;align-self:center!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #tgChatList .tg-chat>:is(.tg-chat-heading,small){grid-column:2!important}
/* Background: three soft spheres in shades of the highlight colour (no orange/green/grey/cyan), heavily blurred */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-orbs span:is(:nth-child(3),:nth-child(4)){display:none!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-orbs span{filter:blur(56px)!important;opacity:.78!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-orbs span:nth-child(1){background:radial-gradient(circle at 42% 40%,color-mix(in srgb,var(--c-accent) 62%,#fff) 0,color-mix(in srgb,var(--c-accent) 80%,#000) 50%,transparent 71%)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-orbs span:nth-child(2){background:radial-gradient(circle at 50% 44%,var(--c-accent) 0,color-mix(in srgb,var(--c-accent) 62%,#000) 50%,transparent 71%)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .c-orbs span:nth-child(5){background:radial-gradient(circle at 46% 42%,color-mix(in srgb,var(--c-accent) 72%,#000) 0,color-mix(in srgb,var(--c-accent) 40%,#000) 52%,transparent 71%)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .c-orbs span{opacity:.42!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .c-orbs span:nth-child(1){background:radial-gradient(circle at 42% 40%,color-mix(in srgb,var(--c-accent) 35%,#fff) 0,color-mix(in srgb,var(--c-accent) 60%,#fff) 50%,transparent 71%)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .c-orbs span:nth-child(2){background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--c-accent) 75%,#fff) 0,var(--c-accent) 50%,transparent 71%)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .c-orbs span:nth-child(5){background:radial-gradient(circle at 46% 42%,color-mix(in srgb,var(--c-accent) 50%,#fff) 0,color-mix(in srgb,var(--c-accent) 85%,#fff) 52%,transparent 71%)!important}
/* Lite devices: no live blur, the soft gradient edges carry the look */
:root:not(#l1):not(#l2):not(#l3):not(#l4):not(#l5):not(#l6):not(#l7):not(#l8):not(#l9):not(#l10)[data-lite] .c-orbs span{filter:none!important}
/* Contact tracking: channel counts as Cirrel tiles (padded, separated, label and number on one centred line) */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #channelSummary{display:grid!important;gap:8px!important;margin-top:4px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #channelSummary .channel-stat{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px;min-height:52px;margin:0!important;padding:12px 18px!important;border:0!important;border-radius:18px!important;background:color-mix(in srgb,var(--c-strong) 4%,transparent)!important;box-shadow:inset 0 0 0 1px var(--c-ring,rgba(255,255,255,.08))!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #channelSummary .channel-stat>span{color:var(--c-muted)!important;font-size:13.5px;font-weight:600;line-height:1.2}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel #channelSummary .channel-stat>strong{color:var(--c-strong)!important;font-size:20px!important;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}

/* Density: one compact spacing scale for wider screens (751px and up).
   Older layers (polish, glass, ios) each add their own large padding; these
   rules come last and win, so pages keep the glass look with less empty space.
   Phones keep their own sizes. */
@media(min-width:751px){
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel{
 & :is(body.ui-workspace,body.ui-team,body.ui-manager,body.manager-workspace) main{padding-left:clamp(14px,1.8vw,24px)!important;padding-right:clamp(14px,1.8vw,24px)!important}
 & main>header{margin-bottom:12px!important;gap:12px!important}
 & main>header:is(:first-of-type,#overview,.developer-heading){--c-edge:clamp(14px,1.8vw,24px);padding:10px var(--c-edge)!important;margin-left:calc(-1 * var(--c-edge))!important;margin-right:calc(-1 * var(--c-edge))!important}
 & #searchForm :is(input,select,button.custom-select-trigger,#searchCustomersButton,>button:is(.primary,[type=submit])):not(#c-f):not(#c-g){height:38px!important;min-height:38px!important}
 & main thead th{height:auto!important}
 & :is(main,dialog,#detail) .custom-select:not(#c-f):not(#c-g){height:38px!important;min-height:38px!important}
 & :is(main,dialog,#detail) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]),select):not(#c-f):not(#c-g){height:38px!important;min-height:38px!important}
 & :is(main>section:not(.metrics):not(.stats):not([hidden]):not(#userReportView),main .panel,.card,.chart-card,.team-card){padding:clamp(14px,1.3vw,18px)!important;margin-bottom:12px!important}
 & .developer-workspace main>section:not(.metrics){margin:12px 0!important}
 & :is(.stats,.metrics,.developer-metrics){gap:12px!important;margin-block:12px!important}
 & :is(.stat,.metrics>article,.developer-metrics article){padding:14px 16px!important;min-height:0!important}
 & :is(.stat strong,.metrics>article strong){font-size:26px!important}
 & :is(main .section-head,main .heading){margin-bottom:12px!important}
 & :is(.toolbar,.section-head,.heading){gap:10px 14px!important}
 & :is(.section-head,.heading)+:is(.table-wrap,.scroll,form){margin-top:12px!important}
 & :is(#searchForm.filters,main .filters){gap:10px 12px!important;padding:12px!important}
 & #detail :is(.detail-grid>.case,#profile,.customer-support-details){padding:16px!important}
 & #detail #profile{gap:12px 18px!important}
 & #detail .detail-grid>div>.section-head{margin:16px 0 10px!important}
 & #detail>.section-head:first-child{margin-bottom:14px!important}
 & :is(#tagSetupDialog,#messageTagsDialog){padding:20px!important}
 & #todayView .daily-empty{min-height:120px!important;padding:16px!important}
 & :is(.chart-box,main .canvas){min-height:200px!important}
 /* Controls: 38px so buttons line up with fields in filter rows. */
 & :is(button,.button,a.button,input[type=button]):where(:not(.lg-tab,.lg-switch,[data-view],.nav-collapse-toggle,.tab,[role=tab],[role=option],[role=menuitem],[role=switch],.icon-only,.link-button,.custom-select-trigger,.custom-select-option,.ios-row,.ios-sheet-done,aside nav button,.tr-fab,.primary,[type=submit],#searchButton,#searchCustomersButton,.batch-usernames-open,.column-sort,.c-tabs button,.account-trigger,.c-grip,.toast-card *,.c-toast *,.lg-glass *,td *)):not(#c-f):not(#c-g){min-height:38px!important;padding:0 16px!important}
 & :is(button.primary,a.primary,.button.primary,button[type=submit]:not(.link-button):not(.icon-only),#searchButton,#searchCustomersButton):not(td *):not(#c-f):not(#c-g){min-height:38px!important;padding:0 18px!important}
 & :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]),select,.custom-select-trigger):not(#c-f):not(#c-g){min-height:38px!important}
 & :is(#searchForm,#todayView,#customersView,#detail,main,dialog) label .custom-select>.custom-select-trigger.custom-select-trigger:not(#c-f):not(#c-g){height:38px!important;min-height:38px!important}
 & #detail .case :is(button:not(.custom-select-trigger):not(.custom-select-option),a.message-link,#openMessage):not(#c-f):not(#c-g){min-height:38px!important}
 & :is(main .pagination button,main .record-pagination button):not(#c-f):not(#c-g){min-height:32px!important;padding:0 12px!important}
 & .c-tabs button{min-height:36px!important;padding-bottom:8px!important}
 & #detail#detail .record-main-toolbar .tabs button{min-height:34px!important;padding:6px 14px!important}
}}
@layer reference-data-surfaces{@media(min-width:751px){
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e):not(#c-f).cirrel{
 & .data-grid-wrap>table thead th{padding:10px 12px 9px!important}
 & .data-grid-wrap>table tbody td{padding:10px 12px!important}
 & :is(main thead th){padding-top:10px!important;padding-bottom:9px!important}
 & :is(main tbody td){padding-top:10px!important;padding-bottom:10px!important}
 & .data-grid-wrap>table tbody td :is(button,a.button):not(.primary){min-height:28px!important;padding:0 12px!important}
 & :is(main,dialog,#detail) :is(td.empty,td[colspan]:only-child,td.record-empty),& table.data-grid td[colspan]:only-child{padding:24px 16px!important}
}}}
/* Account menu and phone More sheet: theme as one three-way switch (stays open, current choice filled).
   Inside the reference-account layer: that layer's !important hover/focus fill would otherwise win. */
@layer reference-account {
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:2px 4px 4px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--c-strong) 6%,transparent);box-shadow:inset 0 0 0 1px var(--c-ring,rgba(255,255,255,.08))}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:auto!important;min-width:0!important;min-height:54px!important;height:auto!important;padding:8px 4px!important;border-radius:11px!important;background:transparent!important;box-shadow:none!important;color:var(--c-muted)!important;font-size:12px!important;font-weight:600!important;text-align:center!important;white-space:nowrap!important;translate:none!important}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme button svg{width:18px!important;height:18px!important;flex:0 0 18px!important}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme button:is(:hover,:focus-visible):not([aria-pressed=true]){background:var(--c-hover)!important;color:var(--c-strong)!important}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme button[aria-pressed=true]{background:linear-gradient(180deg,var(--c-fill-hi),var(--c-fill))!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -8px var(--c-accent)!important}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .ios-sheet .account-theme{margin:4px 0 14px}
 :root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel :is(.account-popover,.ios-sheet) .account-theme button svg{fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
}

/* Quick open (Ctrl/⌘+K): recent customers and a platform search, in a small Cirrel dialog */
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open[open]{width:min(520px,calc(100vw - 32px));padding:14px!important;border:0;border-radius:26px!important;color:var(--c-strong,inherit)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-form{margin:0}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-form input{width:100%;margin:0;height:42px;font-size:15px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-caption{margin:14px 4px 6px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-list{display:grid;gap:2px;max-height:min(50vh,380px);overflow:auto}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-list [data-quick]{display:flex!important;align-items:center;gap:12px;width:100%;min-height:44px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:14px!important;background:none!important;box-shadow:none!important;color:inherit!important;font:inherit;text-align:left;cursor:pointer;transition:background-color var(--c-feedback,.14s)}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-list [data-quick]:is(:hover,.active){background:var(--c-hover)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-list [data-quick].active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent) 45%,transparent)!important}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-initial{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c-accent) 18%,transparent);color:var(--c-accent);font-size:13px;font-weight:700}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-list small{color:var(--c-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel dialog.quick-open .quick-open-empty{margin:0;padding:24px 12px;text-align:center;color:var(--c-muted);font-size:13px}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .quick-open-button kbd{display:inline-grid;place-items:center;height:20px;margin-left:8px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--c-ring,rgba(255,255,255,.09));font:600 11px var(--ui-font,system-ui);letter-spacing:.02em}
:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel[data-theme=light] .quick-open-button kbd{background:rgba(20,32,64,.07)}
@media(max-width:750px){:root:not(#c-a):not(#c-b):not(#c-c):not(#c-d):not(#c-e).cirrel .quick-open-button kbd{display:none}}