/* ===== Glass & Glow design layer (v1) — appended last so it refines every page ===== */
:root{
 --g-radius:20px;--g-radius-md:14px;--g-radius-sm:11px;
 --g-surface:color-mix(in srgb,var(--panel,#192623) 68%,transparent);
 --g-surface-strong:color-mix(in srgb,var(--panel,#192623) 90%,transparent);
 --g-field:color-mix(in srgb,var(--bg,#101a18) 55%,transparent);
 --g-border:color-mix(in srgb,var(--ui-accent) 13%,rgb(255 255 255 / .08));
 --g-border-strong:color-mix(in srgb,var(--ui-accent) 38%,rgb(255 255 255 / .1));
 --g-highlight:inset 0 1px 0 rgb(255 255 255 / .06);
 --g-shadow:0 18px 40px -22px rgb(0 0 0 / .7),0 2px 8px -3px rgb(0 0 0 / .35);
 --g-glow:0 0 0 1px color-mix(in srgb,var(--ui-accent) 45%,transparent),0 10px 30px -8px color-mix(in srgb,var(--ui-accent) 55%,transparent);
 --g-glow-soft:0 0 0 4px color-mix(in srgb,var(--ui-accent) 20%,transparent);
 --g-blur:blur(18px) saturate(150%);
 --g-nav-w:248px;--g-rail-w:78px;
}
:root[data-theme=light]{
 --g-surface:rgb(255 255 255 / .66);
 --g-surface-strong:rgb(255 255 255 / .9);
 --g-field:rgb(255 255 255 / .78);
 --g-border:color-mix(in srgb,var(--ui-accent) 20%,rgb(15 23 42 / .08));
 --g-border-strong:color-mix(in srgb,var(--ui-accent) 45%,rgb(15 23 42 / .12));
 --g-highlight:inset 0 1px 0 rgb(255 255 255 / .95);
 --g-shadow:0 18px 36px -24px rgb(30 41 59 / .35),0 1px 3px rgb(30 41 59 / .08);
}

/* Background: soft aurora in the person's highlight colour */
body:not(.login-page){background:
 radial-gradient(1100px 620px at 88% -12%,color-mix(in srgb,var(--ui-accent) 15%,transparent),transparent 62%),
 radial-gradient(900px 560px at -8% 108%,color-mix(in srgb,var(--ui-accent) 9%,transparent),transparent 60%),
 var(--bg)!important;background-attachment:fixed!important}

/* Typography */
body{font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main h1{letter-spacing:-.025em;font-size:clamp(26px,2.3vw,36px)!important;line-height:1.1}
main h2,main h3,dialog h2{letter-spacing:-.015em}
.eyebrow,small.eyebrow{letter-spacing:.14em}

/* Glass surfaces */
main>section:not(.metrics):not(.stats):not([hidden]),main .panel,.graphs>.panel,.login-card,#detail,dialog[open],.chart-card,.manager-platform-summary>article,.insight-strip{
 background-color:var(--g-surface)!important;
 border:1px solid var(--g-border)!important;
 border-radius:var(--g-radius)!important;
 box-shadow:var(--g-highlight),var(--g-shadow)!important;
 -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
main section section,main section .panel,main .panel .panel,main section .chart-card{box-shadow:var(--g-highlight)!important;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:color-mix(in srgb,var(--g-surface) 55%,transparent)!important}
#detail,dialog[open]{background-color:var(--g-surface-strong)!important}
/* Wrapper sections that only hold other panels stay transparent */
main>section#userReportView{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
dialog::backdrop{background:rgb(4 8 10 / .55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Stat cards: glass with a glowing top edge */
.metrics article,.stats>*,#developerMetrics article,.stat{
 border-radius:var(--g-radius-md)!important;
 -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
 box-shadow:var(--g-highlight),var(--g-shadow)!important;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.metrics article:hover,.stats>*:hover,#developerMetrics article:hover{transform:translateY(-2px);box-shadow:var(--g-highlight),var(--g-glow)!important}
.metrics strong,.stats strong,#developerMetrics strong{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Sidebar: frosted rail */
body>aside,aside.manager-sidebar,aside.developer-sidebar{
 background:color-mix(in srgb,var(--panel,#141819) 62%,transparent)!important;
 border-right:1px solid var(--g-border)!important;
 -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
 box-shadow:8px 0 40px -30px rgb(0 0 0 / .6)}
aside .sidebar-group{border-radius:var(--g-radius-md)!important;border-color:var(--g-border)!important}
aside nav a,aside nav button{border-radius:var(--g-radius-sm)!important;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
aside nav a:hover,aside nav button:hover{transform:translateX(2px)}
aside nav a.active,aside nav button.active,aside nav a[aria-current=page],aside nav [aria-current=true]{
 box-shadow:inset 3px 0 0 var(--ui-accent),0 0 22px -8px color-mix(in srgb,var(--ui-accent) 70%,transparent)!important}

/* Buttons */
button,.button,a.button{border-radius:var(--g-radius-sm)!important;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease,filter .2s ease}
button:not(:disabled):hover{border-color:var(--g-border-strong)}
button:not(:disabled):active{transform:translateY(1px) scale(.99)}
.primary:not(:disabled),button.primary:not(:disabled),#searchCustomersButton:not(:disabled){
 background-image:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 100%,#fff 0%),color-mix(in srgb,var(--ui-accent) 72%,#fff))!important;
 color:var(--ui-ink,#111)!important;border-color:transparent!important;box-shadow:var(--g-glow)!important}
.primary:not(:disabled):hover,#searchCustomersButton:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:none!important;box-shadow:var(--g-glow-soft),var(--g-glow)!important}

/* Fields */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea,.custom-select-trigger{
 background-color:var(--g-field)!important;border:1px solid var(--g-border)!important;border-radius:var(--g-radius-sm)!important;
 transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus,.custom-select-trigger:focus-visible,.custom-select-trigger[aria-expanded=true]{
 border-color:var(--g-border-strong)!important;box-shadow:var(--g-glow-soft)!important;outline:none!important}
.custom-select-menu{background:var(--g-surface-strong)!important;border:1px solid var(--g-border)!important;border-radius:var(--g-radius-md)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow)!important}

/* Tables: rounded scroll containers, sticky frosted headers, row hover glow */
.table-wrap,main .scroll,#reportTableWrap{border-radius:var(--g-radius-md);overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-wrap thead th,main .scroll thead th{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--panel,#192623) 88%,transparent)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
tbody tr{transition:background-color .15s ease}
tbody tr:hover>td{background-color:color-mix(in srgb,var(--ui-accent) 6%,transparent)}

/* Compact stat cards so pages start with content, not a wall of numbers */
.metrics article,#developerMetrics article,.stats>*{padding:14px 18px!important;min-height:0!important}
.metrics article strong,#developerMetrics article strong,.stats>* strong{font-size:clamp(24px,2.2vw,30px)!important;line-height:1.15;margin:6px 0 4px!important}
.metrics,#developerMetrics,.stats{gap:12px!important;margin-bottom:22px!important}
/* Team page */
#teamTotals{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;align-items:stretch!important}
#teamMetrics td:first-child,body.ui-team #events td:nth-child(2){white-space:nowrap}
#teamTotals>div{background:var(--g-field)!important;border:1px solid var(--g-border);border-radius:var(--g-radius-md)!important;min-width:0!important;padding:14px 16px!important;display:flex;flex-direction:column;justify-content:center}
.empty{min-height:0!important;padding-block:28px!important}
body.ui-team #users td:last-child{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media(min-width:1000px){body.ui-team #users td:last-child{min-width:600px}}
body.ui-team #users td:last-child button{min-height:32px!important;padding:6px 11px!important;font-size:12px!important;margin:0!important}
/* Pills & badges */
.pill,.badge{border-radius:999px!important}

/* Fluid grids */
.metrics,#developerMetrics,.stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1180px){html:not(.nav-collapsed) .metrics,html:not(.nav-collapsed) #developerMetrics,html:not(.nav-collapsed) .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:960px){.metrics,#developerMetrics,.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.analytics-grid,.appearance-grid,.graphs{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important}
#searchForm.filters{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;align-items:end}

/* Wide screens: keep content centred and readable */
@media(min-width:1700px){main>*{max-width:1560px;margin-inline:auto!important}}

/* Sidebar collapse button (desktop) */
.nav-collapse-toggle{display:none}
@media(min-width:751px){
 html body>aside>button.nav-collapse-toggle.nav-collapse-toggle.nav-collapse-toggle.nav-collapse-toggle{position:absolute!important;top:14px!important;right:10px!important;left:auto!important;margin:0!important}
 .nav-collapse-toggle{display:grid;place-items:center;position:absolute;top:14px;right:10px;width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;font-size:14px;line-height:1;border:1px solid var(--g-border)!important;background:var(--g-field)!important;color:var(--muted,#aab);z-index:3}
 body>aside,aside.manager-sidebar,aside.developer-sidebar{transition:width .25s ease,padding .25s ease}
 html.nav-collapsed body>aside:not(.legacy-manager-sidebar):not(.tg-chats),html.nav-collapsed body>aside.manager-sidebar.manager-sidebar,html.nav-collapsed body>aside.developer-sidebar.developer-sidebar{width:var(--g-rail-w)!important;min-width:0!important;padding-inline:10px!important;overflow-x:hidden}
 html.nav-collapsed body:has(>aside)>main:not(.never){margin-left:var(--g-rail-w)!important}
 html.nav-collapsed body>aside>button.nav-collapse-toggle.nav-collapse-toggle.nav-collapse-toggle.nav-collapse-toggle{position:static!important;margin:0 auto 12px!important;transform:rotate(180deg)}
 html.nav-collapsed aside nav a,html.nav-collapsed aside nav button,html.nav-collapsed aside summary,html.nav-collapsed aside>button,html.nav-collapsed aside>a{font-size:0!important;gap:0!important;justify-content:center!important;padding-inline:0!important}
 html.nav-collapsed aside .navigation-icon{margin:0!important;width:20px!important;height:20px!important;flex:0 0 20px}
 html.nav-collapsed body>aside nav summary>:not(.navigation-icon),html.nav-collapsed body>aside nav button>:not(.navigation-icon),html.nav-collapsed body>aside nav a>:not(.navigation-icon),html.nav-collapsed body>aside>button:not(.nav-collapse-toggle)>:not(.navigation-icon),html.nav-collapsed body>aside>a>:not(.navigation-icon){display:none!important}
 html.nav-collapsed body>aside nav summary,html.nav-collapsed body>aside nav button,html.nav-collapsed body>aside nav a,html.nav-collapsed body>aside>button:not(.nav-collapse-toggle){display:flex!important;align-items:center;justify-content:center!important;min-height:44px;width:100%!important;padding:0!important;font-size:0!important}
 html.nav-collapsed body>aside nav summary::after,html.nav-collapsed body>aside nav summary::marker,html.nav-collapsed body>aside nav summary::-webkit-details-marker{display:none!important;content:none!important}
 html.nav-collapsed body>aside .brand{font-size:19px!important;margin:4px 0 14px!important;white-space:nowrap}
 html.nav-collapsed body>aside .brand small,html.nav-collapsed body>aside .workspace,html.nav-collapsed body>aside .aside-bottom,html.nav-collapsed body>aside .nav-caption{display:none!important}
 html.nav-collapsed body>aside .sidebar-group{padding:4px!important;margin-bottom:8px!important}
 html.nav-collapsed body>aside .sidebar-group-items{padding:0!important;gap:6px!important}
 html.nav-collapsed aside .brand{font-size:20px!important;text-align:center}
 html.nav-collapsed aside>small,html.nav-collapsed aside .workspace,html.nav-collapsed aside label,html.nav-collapsed aside .aside-bottom>*:not(button):not(a),html.nav-collapsed aside .nav-caption,html.nav-collapsed aside>p,html.nav-collapsed aside>span{display:none!important}
 html.nav-collapsed aside .sidebar-group{padding-inline:4px!important}
 html.nav-collapsed aside .sidebar-group>summary::after,html.nav-collapsed aside summary .chevron{display:none!important}
}

/* Phones & small tablets: off-canvas menu with a top bar */
.mobile-topbar,.nav-backdrop{display:none}
@media(max-width:750px){
 .mobile-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:var(--dev-bar-h,0px);z-index:1100;padding:10px 14px;margin:0;
  background:color-mix(in srgb,var(--panel,#141819) 72%,transparent);border-bottom:1px solid var(--g-border);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
 .mobile-topbar .mobile-brand{font-weight:800;font-size:22px;letter-spacing:-.03em}
 .mobile-topbar .mobile-title{margin-left:auto;font-size:13px;color:var(--muted,#9ab);max-width:50vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mobile-menu-button{width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;display:grid;place-items:center;font-size:20px;line-height:1}
 body>aside,aside.manager-sidebar,aside.developer-sidebar{position:fixed!important;inset:0 auto 0 0!important;top:0!important;width:min(86vw,320px)!important;height:100dvh!important;max-height:none!important;margin:0!important;
  z-index:1300!important;overflow-y:auto!important;transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);visibility:hidden;
  background:var(--g-surface-strong)!important;padding:20px 16px!important;display:flex!important;flex-direction:column}
 html.nav-open body>aside,html.nav-open aside.manager-sidebar,html.nav-open aside.developer-sidebar{transform:none;visibility:visible;box-shadow:24px 0 60px -20px rgb(0 0 0 / .6)}
 .nav-backdrop{display:block;position:fixed;inset:0;z-index:1250;background:rgb(4 8 10 / .5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease}
 html.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
 html.nav-open,html.nav-open body{overflow:hidden}
 main{margin-left:0!important;padding:16px 14px 28px!important}
 main>section:not(.metrics):not(.stats):not([hidden]),main .panel{border-radius:16px!important;padding:16px!important}
 .table-wrap,main .scroll{margin-inline:-4px}
 #detail{inset:6px!important;top:calc(var(--dev-bar-h,0px) + 6px)!important}
}
@media(max-width:360px){.metrics,.stats,#developerMetrics{grid-template-columns:1fr!important}}

/* Respect reduced motion */
:root[data-motion=reduced] .metrics article,:root[data-motion=reduced] aside{transition:none!important}
@media(prefers-reduced-motion:reduce){.metrics article,aside nav a,aside nav button,button{transition:none!important}}
/* ===== end Glass & Glow ===== */

/* ===================== Redesign v2: cleaner shell, calmer pages ===================== */
/* --- Sidebar: flat modern navigation instead of boxes inside boxes --- */
body>aside .sidebar-group{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 16px!important}
body>aside .sidebar-group>summary{background:none!important;border:0!important;box-shadow:none!important;min-height:28px!important;padding:4px 12px!important;margin:0 0 4px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#9aa)!important;opacity:.85}
body>aside .sidebar-group>summary .navigation-icon{display:none!important}
html body>aside nav details.sidebar-group>summary.has-navigation-icon,html body>aside nav details.sidebar-group>summary{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center;gap:8px!important;white-space:nowrap}
body>aside .sidebar-group>summary>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit!important;letter-spacing:inherit}
body>aside .sidebar-group>summary::after{opacity:.6}
body>aside .sidebar-group.has-current>summary{color:var(--muted,#9aa)!important}
body>aside .sidebar-group-items{display:grid!important;gap:2px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
body>aside nav .sidebar-group-items>button,body>aside nav .sidebar-group-items>a,body>aside nav>a,body>aside nav>button{
 display:flex!important;align-items:center;gap:12px!important;justify-content:flex-start!important;min-height:40px!important;padding:8px 12px!important;
 background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:var(--text,#e8edeb)!important;font-weight:600!important;font-size:14px!important;text-align:left;opacity:.86}
body>aside nav .sidebar-group-items>:hover,body>aside nav>a:hover,body>aside nav>button:hover{background:color-mix(in srgb,var(--ui-accent) 9%,transparent)!important;opacity:1;transform:none!important}
body>aside nav .sidebar-group-items>.active,body>aside nav .sidebar-group-items>[aria-current=page],body>aside nav>a[aria-current=page],body>aside nav>a.active{
 background:color-mix(in srgb,var(--ui-accent) 17%,transparent)!important;border-color:color-mix(in srgb,var(--ui-accent) 32%,transparent)!important;
 color:var(--accent-readable,var(--ui-accent))!important;opacity:1;box-shadow:0 6px 22px -10px color-mix(in srgb,var(--ui-accent) 75%,transparent)!important}
body>aside nav .navigation-icon{width:18px!important;height:18px!important;flex:0 0 18px;opacity:.9}
body>aside .nav-caption{display:none!important}
body>aside .has-navigation-icon:not(summary):not(#signOut):not(.sign-out):not(.active):not([aria-current=page]){background:transparent!important;border:1px solid transparent!important;box-shadow:none!important}
body>aside .has-navigation-icon:not(summary):not(#signOut):not(.sign-out):not(.active):hover{background:color-mix(in srgb,var(--ui-accent) 9%,transparent)!important}
body>aside #signOut,body>aside .sign-out{background:transparent!important;border:1px solid var(--g-border)!important;box-shadow:none!important}
html.nav-collapsed body>aside .sidebar-group>summary{display:none!important}
html.nav-collapsed body>aside .sidebar-group{margin-bottom:10px!important;padding-bottom:10px!important;border-bottom:1px solid var(--g-border)!important;border-radius:0!important}

/* --- Page header: compact, sticky, frosted --- */
@media(min-width:751px){
 body.ui-workspace main,body.ui-team main,body.ui-manager main,body.manager-workspace main{padding:0 clamp(18px,2.6vw,40px) 40px!important}
 main>header:first-of-type,main>header#overview,main>header.developer-heading{
  position:sticky;top:var(--dev-bar-h,0px);z-index:30;margin:0 calc(-1*clamp(18px,2.6vw,40px)) 22px!important;padding:16px clamp(18px,2.6vw,40px) 14px!important;
  background:color-mix(in srgb,var(--bg,#101a18) 74%,transparent)!important;border-bottom:1px solid var(--g-border);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
 main>header:first-of-type h1,main>header#overview h1,main>header.developer-heading h1{font-size:clamp(22px,1.9vw,28px)!important;margin:2px 0 0!important}
 main>header:first-of-type p,main>header#overview p,main>header.developer-heading p{margin:4px 0 0!important;font-size:13px;color:var(--muted,#9aa)}
 main>header .eyebrow,main>header small:first-child{font-size:10.5px!important}
}
/* The big stat cards belong on the overview pages, not above every screen */
body[data-glass-view]:not([data-glass-view=analytics]):not([data-glass-view=queue]) main>.metrics{display:none!important}
body[data-glass-view]:not([data-glass-view=analytics]) main>header:first-of-type p{display:none}

/* --- Section cards: consistent rhythm --- */
main>section:not(.metrics):not(.stats):not([hidden]):not(#userReportView),main .panel{padding:clamp(18px,1.8vw,26px)!important;margin-bottom:22px!important}
main .section-head,main .heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px!important}
main .section-head h2,main .heading h2,main>section>h2{font-size:clamp(18px,1.5vw,22px)!important;margin:2px 0 4px!important}
main .section-head p,main .heading p{margin:0;color:var(--muted,#9aa);font-size:13px;max-width:70ch}

/* --- Forms: toolbar style filters --- */
main label{font-size:12px;font-weight:600;color:var(--muted,#9aa);letter-spacing:.01em}
main label>input,main label>select,main label>.custom-select,main label>textarea{margin-top:6px!important}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,.custom-select-trigger{min-height:42px!important;height:auto;font-size:14px!important}
.custom-select-trigger{justify-content:space-between!important;text-align:left!important;padding-inline:14px 12px!important}
.custom-select-trigger>span:first-child{text-align:left;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#searchForm.filters,main .filters{gap:14px 16px!important;padding:16px!important;border-radius:var(--g-radius-md)!important;background:color-mix(in srgb,var(--g-field) 60%,transparent)!important;border:1px solid var(--g-border)!important}
input[type=file]{padding:8px!important;border-radius:var(--g-radius-sm);border:1px dashed var(--g-border-strong)!important;background:var(--g-field)!important;width:100%}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border-radius:9px;border:1px solid var(--g-border-strong);background:color-mix(in srgb,var(--ui-accent) 14%,transparent);color:var(--text);font-weight:600;cursor:pointer}

/* --- Buttons: clear hierarchy --- */
main button:not(.primary):not(#searchCustomersButton):not(.custom-select-trigger):not([aria-pressed=true]):not(.active):not(.column-sort):not(th *){background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important;border:1px solid var(--g-border)!important}
main button:not(.primary):not(.custom-select-trigger):not(.column-sort):not(th *):not(:disabled):hover{background:color-mix(in srgb,var(--ui-accent) 10%,transparent)!important;border-color:var(--g-border-strong)!important}
button:disabled{opacity:.5}
main th button,main thead button{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0!important;padding:0!important;color:inherit!important;font:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important}
button{font-weight:600}

/* --- Tables: modern data grid --- */
main table{border-collapse:separate!important;border-spacing:0!important}
main thead th{font-size:11px!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#9aa)!important;padding:12px 14px!important;border-bottom:1px solid var(--g-border)!important}
main tbody td{padding:12px 14px!important;border-bottom:1px solid color-mix(in srgb,var(--g-border) 70%,transparent)!important;vertical-align:middle}
main tbody tr:last-child td{border-bottom:0!important}
.table-wrap,main .scroll{border:1px solid var(--g-border);background:color-mix(in srgb,var(--g-field) 45%,transparent)}
#customers td:first-child strong{font-size:14px}
#customers td:first-child small,#customers td small{color:var(--muted,#9aa);font-size:12px}

/* --- Customer profile: right-hand sheet with a sticky header and a side column --- */
#detail{overflow-x:hidden!important;padding:0 clamp(16px,2vw,28px) 28px!important;box-shadow:0 0 0 100vmax rgb(3 6 8 / .55),var(--g-shadow)!important}
#detail>.section-head:first-child{position:sticky;top:0;z-index:6;margin:0 calc(-1*clamp(16px,2vw,28px)) 18px!important;padding:18px clamp(16px,2vw,28px) 14px!important;
 background:color-mix(in srgb,var(--panel,#192623) 92%,transparent);border-bottom:1px solid var(--g-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);align-items:center!important}
#detail #customerTitle{font-size:clamp(20px,1.8vw,26px)!important;margin:2px 0!important}
#detail .customer-balance-summary{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
#detail .customer-balance-summary article{border-radius:12px!important;padding:8px 12px!important;min-width:96px}
#detail #closeDetail{min-height:40px!important}
#detail .profile{border-radius:var(--g-radius-md)!important;border:1px solid var(--g-border)!important;background:color-mix(in srgb,var(--g-field) 55%,transparent)!important}
#detail .case{border-radius:var(--g-radius-md)!important;border:1px solid var(--g-border)!important;background:color-mix(in srgb,var(--g-field) 55%,transparent)!important;padding:18px!important}
@media(min-width:1000px){
 #detail{inset:var(--dev-bar-h,0px) 0 0 auto!important;width:min(1280px,calc(100vw - 96px))!important;max-width:none!important;max-height:none!important;height:calc(100dvh - var(--dev-bar-h,0px))!important;border-radius:24px 0 0 24px!important;border-right:0!important;margin:0!important}
 :root:not([data-motion=reduced]) body.profile-open #detail:not([hidden]){animation:glass-sheet-in .32s cubic-bezier(.2,.8,.2,1) both}
}
@media(min-width:1200px){
 #detail .detail-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,380px)!important;gap:22px!important;align-items:start!important}
 #detail .detail-grid>.case{position:sticky;top:96px;max-height:calc(100dvh - 130px);overflow:auto}
}
@keyframes glass-sheet-in{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}

/* --- Dialogs (Telegram inbox, workspace tools, tags): calmer frame --- */
dialog[open]{border-radius:22px!important;border:1px solid var(--g-border)!important}
dialog[open]>header,dialog[open] .tg-top{border-bottom:1px solid var(--g-border)}


/* --- Telegram inbox: roomier, modern chat look --- */
.telegram-inbox-dialog[open]{width:min(1440px,calc(100vw - 32px))!important;height:calc(100dvh - 32px)!important;max-height:calc(100dvh - 32px)!important;background:var(--g-surface-strong)!important}
@media(min-width:1100px){.telegram-inbox-dialog .tg-layout{grid-template-columns:330px minmax(0,1fr)!important}}
.telegram-inbox-dialog .tg-top{padding:14px 20px!important}
.telegram-inbox-dialog .tg-chats{background:color-mix(in srgb,var(--panel,#192623) 70%,transparent)!important;padding:12px!important}
.telegram-inbox-dialog .tg-chat{min-height:62px!important;transition:background-color .15s ease,border-color .15s ease}
.telegram-inbox-dialog .tg-chat:hover{background:color-mix(in srgb,var(--ui-accent) 7%,transparent)!important}
.telegram-inbox-dialog .tg-chat.is-selected{background:color-mix(in srgb,var(--ui-accent) 15%,transparent)!important;border-color:color-mix(in srgb,var(--ui-accent) 35%,transparent)!important;box-shadow:0 6px 20px -12px color-mix(in srgb,var(--ui-accent) 80%,transparent)}
.telegram-inbox-dialog .tg-avatar{box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 25%,transparent)}
.telegram-inbox-dialog .tg-unread{background:var(--ui-accent)!important;color:var(--ui-ink,#111)!important;border-radius:999px!important;font-weight:700}
.telegram-inbox-dialog .tg-conversation{background:radial-gradient(700px 400px at 80% 0,color-mix(in srgb,var(--ui-accent) 6%,transparent),transparent 70%),var(--bg,#101a18)}
.telegram-inbox-dialog .tg-message{border-radius:16px!important;box-shadow:0 4px 14px -8px rgb(0 0 0 / .5)}
.telegram-inbox-dialog .tg-message.tg-out{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 26%,var(--panel,#192623)),color-mix(in srgb,var(--ui-accent) 14%,var(--panel,#192623)))!important;border-color:color-mix(in srgb,var(--ui-accent) 35%,transparent)!important}
.telegram-inbox-dialog .tg-date-divider{opacity:.75}
.telegram-inbox-dialog input,.telegram-inbox-dialog textarea{border-radius:14px!important}


/* --- Telegram inbox fixes & polish (v4) --- */
.telegram-inbox-dialog .tg-conversation{display:flex;flex-direction:column;min-height:0}
.telegram-inbox-dialog .tg-conversation-title{position:sticky;top:0;z-index:3;padding:14px 18px!important;background:color-mix(in srgb,var(--panel,#192623) 70%,transparent)!important;border-bottom:1px solid var(--g-border)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.telegram-inbox-dialog #tgChatName{font-size:15px}
.telegram-inbox-dialog #tgMessages{display:flex;flex-direction:column;gap:8px;padding:18px clamp(12px,2vw,26px)!important;flex:1;min-height:0;overflow:auto;scroll-behavior:smooth}
.telegram-inbox-dialog #tgOlder{align-self:center;margin:10px auto 0!important;min-height:34px!important;padding:6px 16px!important;border-radius:999px!important;font-size:12px!important;background:var(--g-field)!important;border:1px solid var(--g-border)!important}
.telegram-inbox-dialog .tg-date-divider{align-self:center;margin:8px 0;padding:4px 12px;border-radius:999px;font-size:11px;background:var(--g-field);border:1px solid var(--g-border);color:var(--muted,#9aa)}
.telegram-inbox-dialog .tg-message.tg-in{background:var(--g-surface)!important;border-color:var(--g-border)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.telegram-inbox-dialog .tg-message{max-width:min(72%,620px)!important;padding:10px 14px!important;line-height:1.55}
.telegram-inbox-dialog .tg-message small,.telegram-inbox-dialog .tg-message time{opacity:.7;font-size:11px}
/* translate buttons were wider than their box */
.telegram-inbox-dialog .tg-translation-tools{display:flex!important;flex-wrap:nowrap;gap:6px;width:max-content!important;max-width:none!important;padding:6px!important}
.telegram-inbox-dialog .tg-translation-tools button{min-height:30px!important;padding:4px 12px!important;white-space:nowrap}
/* composer: frosted bar, rounded input, round send button */
.telegram-inbox-dialog #tgSendForm{display:flex!important;align-items:flex-end;gap:10px;padding:12px clamp(12px,2vw,20px)!important;margin:0!important;background:color-mix(in srgb,var(--panel,#192623) 70%,transparent)!important;border-top:1px solid var(--g-border)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.telegram-inbox-dialog #tgSendForm textarea{flex:1;min-width:0;min-height:44px!important;max-height:160px;resize:none;padding:11px 16px!important;border-radius:22px!important;background:var(--g-field)!important;font-size:14px!important;line-height:22px!important}
.telegram-inbox-dialog #tgSendForm textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.telegram-inbox-dialog #tgMessages{-webkit-mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 12px),transparent)}
.telegram-inbox-dialog #tgOlder{margin-bottom:4px!important;position:relative;z-index:2}
.telegram-inbox-dialog #tgSendForm button.primary{min-width:84px;min-height:44px!important;border-radius:22px!important}
.telegram-inbox-dialog .tg-composer-tools{display:flex;gap:4px;align-self:center}
.telegram-inbox-dialog .tg-composer-tools button{width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;display:grid;place-items:center}
/* nothing to type into before a chat is chosen */
.telegram-inbox-dialog:not(.tg-has-chat) #tgSendForm,.telegram-inbox-dialog:not(.tg-has-chat) #tgOlder,.telegram-inbox-dialog:not(.tg-has-chat) .tg-text-note{display:none!important}
.telegram-inbox-dialog:not(.tg-has-chat) #tgMessages:empty{display:grid!important;place-items:center}
.telegram-inbox-dialog:not(.tg-has-chat) #tgMessages:empty::before{content:"";width:96px;height:96px;border-radius:28px;opacity:.55;
 background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--ui-accent) 55%,transparent),transparent 70%),var(--g-field);border:1px solid var(--g-border);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20l1.1-4.6A8.4 8.4 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20l1.1-4.6A8.4 8.4 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z' fill='black'/%3E%3C/svg%3E") center/60% no-repeat}
/* chat list */
.telegram-inbox-dialog .tg-chat-tools{position:sticky;top:-12px;z-index:2;padding:4px 0 10px;background:inherit}
.telegram-inbox-dialog .tg-chat-tools input{border-radius:999px!important;padding-left:16px!important}
.telegram-inbox-dialog .tg-chat strong{font-size:14px}
.telegram-inbox-dialog .tg-chat small{opacity:.75}
.telegram-inbox-dialog #tgClose{border-radius:999px!important}
@media(max-width:760px){
 .telegram-inbox-dialog[open]{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important;inset:0}
 .telegram-inbox-dialog .tg-message{max-width:86%!important}
 .telegram-inbox-dialog .tg-open-photo,.telegram-inbox-dialog #tgOlder{min-height:38px!important;padding:8px 16px!important}
 .telegram-inbox-dialog #tgBack{min-height:38px!important;border-radius:999px!important}
 .telegram-inbox-dialog .tg-account-controls{flex-wrap:wrap;gap:8px}
 .telegram-inbox-dialog #tgSendForm{gap:6px;padding:10px!important}
 .telegram-inbox-dialog .tg-composer-tools{gap:0}
 .telegram-inbox-dialog .tg-composer-tools button{width:34px!important;height:38px!important;min-height:38px!important}
 .telegram-inbox-dialog #tgSendForm button.primary{min-width:64px;padding-inline:12px!important}
 .telegram-inbox-dialog #tgSendForm textarea{padding:11px 12px!important}
}

/* --- Empty states --- */
.empty,p.empty,td.empty{color:var(--muted,#9aa)!important;text-align:center}

/* --- Phones: compact header inside the page --- */
@media(max-width:750px){
 main>header:first-of-type{padding:4px 0 10px!important;margin-bottom:14px!important}
 main>header:first-of-type h1{font-size:24px!important}
 main>header .live{display:none}
 body[data-glass-view]:not([data-glass-view=analytics]) main>header:first-of-type{display:none}
 #detail .customer-balance-summary{margin-left:0;width:100%}
 #detail>.section-head:first-child{flex-wrap:wrap}
}
/* ===================== end Redesign v2 ===================== */

/* ===================== Motion background + deeper glass (v3) ===================== */
html{background:var(--bg,#0d1412)!important}
body:not(.login-page),body.ui-login{background:transparent!important}
.glass-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;background:var(--bg,#0d1412)}
.glass-bg .gb-blob{position:absolute;border-radius:50%;will-change:transform;opacity:.85;mix-blend-mode:screen}
.glass-bg .gb-1{width:62vmax;height:62vmax;left:-14vmax;top:-22vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 60%,transparent),transparent 72%);animation:gb-drift-1 26s ease-in-out infinite alternate}
.glass-bg .gb-2{width:54vmax;height:54vmax;right:-16vmax;top:-8vmax;background:radial-gradient(closest-side,color-mix(in srgb,#5b8cff 55%,var(--ui-accent) 25%),transparent 72%);animation:gb-drift-2 30s ease-in-out infinite alternate;opacity:.7}
.glass-bg .gb-3{width:58vmax;height:58vmax;left:18vmax;bottom:-30vmax;background:radial-gradient(closest-side,color-mix(in srgb,#b06bff 50%,var(--ui-accent) 30%),transparent 72%);animation:gb-drift-3 34s ease-in-out infinite alternate;opacity:.62}
.glass-bg .gb-4{width:36vmax;height:36vmax;right:8vmax;bottom:6vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 70%,#fff 10%),transparent 70%);animation:gb-drift-4 20s ease-in-out infinite alternate;opacity:.5}
.glass-bg .gb-sheen{position:absolute;inset:-50%;background:conic-gradient(from 0deg at 50% 50%,transparent 0 40%,color-mix(in srgb,var(--ui-accent) 10%,transparent) 50%,transparent 60% 100%);animation:gb-spin 60s linear infinite;opacity:.6}
.glass-bg .gb-grid{position:absolute;inset:-56px 0 0 -56px;will-change:transform;background-image:linear-gradient(rgb(255 255 255 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .035) 1px,transparent 1px);background-size:56px 56px;
 -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 20%,transparent 75%);animation:gb-grid 40s linear infinite}
.glass-bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.glass-bg .gb-grain{position:absolute;inset:-20%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.glass-bg .gb-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgb(0 0 0 / .35) 100%)}
.glass-bg .gb-follow{position:absolute;width:40vmax;height:40vmax;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 22%,transparent),transparent 70%);transform:translate3d(var(--gx,50vw),var(--gy,40vh),0) translate(-50%,-50%);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);mix-blend-mode:screen}
:root[data-theme=light] .glass-bg .gb-blob,:root[data-theme=light] .glass-bg .gb-follow{mix-blend-mode:multiply;opacity:.28}
:root[data-theme=light] .glass-bg .gb-grid{background-image:linear-gradient(rgb(15 23 42 / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(15 23 42 / .05) 1px,transparent 1px)}
:root[data-theme=light] .glass-bg .gb-vignette{background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgb(255 255 255 / .5) 100%)}
:root[data-theme=light] .glass-bg .gb-grain{opacity:.04}
@keyframes gb-drift-1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vmax,10vmax,0) scale(1.12)}100%{transform:translate3d(6vmax,22vmax,0) scale(.95)}}
@keyframes gb-drift-2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-16vmax,14vmax,0) scale(.9)}100%{transform:translate3d(-6vmax,26vmax,0) scale(1.1)}}
@keyframes gb-drift-3{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12vmax,-14vmax,0) scale(1.15)}100%{transform:translate3d(14vmax,-6vmax,0) scale(1)}}
@keyframes gb-drift-4{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-22vmax,-18vmax,0)}}
@keyframes gb-spin{to{transform:rotate(1turn)}}
@keyframes gb-grid{to{transform:translate3d(56px,56px,0)}}
@keyframes gb-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
:root[data-motion=reduced] .glass-bg *,.glass-bg.is-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.glass-bg *{animation:none!important}.glass-bg canvas{display:none}}

/* Deeper glass: more see-through panels, stronger blur, light-catching edges */
:root{--g-surface:color-mix(in srgb,var(--panel,#192623) 42%,transparent);--g-surface-strong:color-mix(in srgb,var(--panel,#192623) 78%,transparent);--g-blur:blur(24px) saturate(180%);
 --g-edge:linear-gradient(135deg,rgb(255 255 255 / .26),rgb(255 255 255 / .04) 38%,rgb(255 255 255 / .02) 62%,color-mix(in srgb,var(--ui-accent) 45%,transparent));
 --g-highlight:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 0 0 1px rgb(255 255 255 / .02)}
:root[data-theme=light]{--g-surface:rgb(255 255 255 / .5);--g-surface-strong:rgb(255 255 255 / .78);
 --g-edge:linear-gradient(135deg,rgb(255 255 255 / .95),rgb(255 255 255 / .35) 40%,color-mix(in srgb,var(--ui-accent) 40%,transparent))}
main>section:not(.metrics):not(.stats):not([hidden]):not(#userReportView),main .panel,.graphs>.panel,.login-card,.chart-card,.manager-platform-summary>article{
 background:linear-gradient(var(--g-surface),var(--g-surface)) padding-box,var(--g-edge) border-box!important;border:1px solid transparent!important}
#detail,dialog[open]{background:linear-gradient(var(--g-surface-strong),var(--g-surface-strong)) padding-box,var(--g-edge) border-box!important;border:1px solid transparent!important}
main section section,main section .panel,main .panel .panel,main section .chart-card{background:color-mix(in srgb,var(--panel,#192623) 22%,transparent)!important;border:1px solid var(--g-border)!important}
body>aside,aside.manager-sidebar,aside.developer-sidebar{background:color-mix(in srgb,var(--panel,#141819) 34%,transparent)!important;-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
.metrics article,.stats>*,#developerMetrics article{-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),var(--g-shadow)!important}
/* Light sweep across cards on hover */
.metrics article,.stats>*,#developerMetrics article,.chart-card{position:relative;overflow:hidden}
.metrics article::after,.stats>*::after,#developerMetrics article::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgb(255 255 255 / .14) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.metrics article:hover::after,.stats>*:hover::after,#developerMetrics article:hover::after{transform:translateX(120%)}
/* Primary buttons shimmer */
.primary:not(:disabled),#searchCustomersButton:not(:disabled){background-size:200% 100%!important;background-image:linear-gradient(110deg,var(--ui-accent) 0%,color-mix(in srgb,var(--ui-accent) 65%,#fff) 45%,var(--ui-accent) 70%)!important}
:root:not([data-motion=reduced]) .primary:not(:disabled):hover,:root:not([data-motion=reduced]) #searchCustomersButton:not(:disabled):hover{animation:gb-shimmer 1.4s linear infinite}
@keyframes gb-shimmer{to{background-position:-200% 0}}
/* ===================== end v3 ===================== */

/* ===== Table sort headers & dropdowns (v5) ===== */
main th .column-sort,main th button{display:inline-flex!important;align-items:center;gap:6px;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;color:inherit!important;cursor:pointer}
main th .column-sort::after{content:"⇅";font-size:12px;opacity:.45;transition:opacity .15s ease,color .15s ease}
main th .column-sort[data-direction=descending]::after{content:"↓";opacity:1;color:var(--ui-accent)}
main th .column-sort[data-direction=ascending]::after{content:"↑";opacity:1;color:var(--ui-accent)}
main th .column-sort:hover{color:var(--text,#fff)!important}
main th .column-sort:hover::after{opacity:.9}
main th .column-sort[data-direction=descending],main th .column-sort[data-direction=ascending]{color:var(--accent-readable,var(--ui-accent))!important}

/* Dropdowns: glass field with an accent chevron, glowing when open */
html body button.custom-select-trigger,html body .custom-select-trigger{
 display:flex!important;align-items:center;gap:10px;justify-content:space-between!important;text-align:left!important;
 background:linear-gradient(180deg,rgb(255 255 255 / .05),rgb(255 255 255 / .01)) padding-box,var(--g-field)!important;
 border:1px solid var(--g-border)!important;border-radius:12px!important;padding:0 12px 0 14px!important;min-height:42px!important;
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 2px 10px -6px rgb(0 0 0 / .5)!important;font-weight:600;color:var(--text,#e8edeb)!important;
 transition:border-color .18s ease,box-shadow .2s ease,background-color .2s ease,transform .15s ease}
html body .custom-select-trigger:hover{border-color:var(--g-border-strong)!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 0 0 3px color-mix(in srgb,var(--ui-accent) 10%,transparent)!important}
html body .custom-select-trigger[aria-expanded=true]{border-color:color-mix(in srgb,var(--ui-accent) 65%,transparent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-accent) 18%,transparent),0 10px 30px -12px color-mix(in srgb,var(--ui-accent) 60%,transparent)!important}
html body .custom-select-trigger>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
html body .custom-select-arrow{display:grid!important;place-items:center;flex:0 0 22px;width:22px!important;height:22px!important;font-size:0!important;border-radius:7px;background:color-mix(in srgb,var(--ui-accent) 14%,transparent);border:0!important;transform:none!important;margin:0!important;transition:transform .2s ease,background-color .2s ease}
html body .custom-select-arrow::after{content:none!important}
html body .custom-select-arrow::before{content:""!important;position:static!important;width:7px;height:7px;border-top:0!important;border-left:0!important;border-right:2px solid var(--ui-accent);border-bottom:2px solid var(--ui-accent);transform:translateY(-2px) rotate(45deg)}
html body .custom-select-trigger[aria-expanded=true] .custom-select-arrow{transform:rotate(180deg)!important;background:color-mix(in srgb,var(--ui-accent) 26%,transparent)}
html body .custom-select-menu{background:color-mix(in srgb,var(--panel,#192623) 82%,transparent)!important;border:1px solid var(--g-border-strong)!important;border-radius:14px!important;padding:6px!important;
 -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:0 22px 50px -18px rgb(0 0 0 / .75),inset 0 1px 0 rgb(255 255 255 / .06)!important}
:root:not([data-motion=reduced]) html body .custom-select-menu.is-open,:root:not([data-motion=reduced]) .custom-select-menu.is-open{animation:gb-menu-in .16s ease-out both}
@keyframes gb-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
html body .custom-select-option{border-radius:9px!important;padding:9px 12px!important;min-height:38px;display:flex!important;align-items:center;gap:8px;text-align:left!important;background:transparent!important;border:0!important;box-shadow:none!important;font-weight:500}
html body .custom-select-option:hover,html body .custom-select-option:focus-visible,html body .custom-select-option.is-active{background:color-mix(in srgb,var(--ui-accent) 12%,transparent)!important}
html body .custom-select-option[aria-selected=true]{background:color-mix(in srgb,var(--ui-accent) 18%,transparent)!important;color:var(--accent-readable,var(--ui-accent))!important;font-weight:700}
html body .custom-select-search{border-radius:10px!important;margin-bottom:6px!important}
:root[data-theme=light] body .custom-select-trigger.custom-select-trigger{background:rgb(255 255 255 / .8)!important;color:#1f2a2e!important}
:root[data-theme=light] .custom-select-menu{background:rgb(255 255 255 / .92)!important}
/* ===== end v5 ===== */

/* ===== Dropdown fixes (v6): beat older position/padding rules ===== */
:is(#searchForm,#todayView,#detail,#customersView,main,body,dialog) .custom-select-trigger.custom-select-trigger{
 position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
 padding:0 8px 0 14px!important;min-height:42px!important;height:42px!important;text-align:left!important;line-height:1.2!important}
:is(#searchForm,#todayView,#detail,#customersView,main,body,dialog) .custom-select-trigger.custom-select-trigger>span:first-child{position:static!important;transform:none!important;inset:auto!important;width:auto!important;flex:1 1 auto!important;min-width:0;text-align:left!important;padding:0!important;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
:is(#searchForm,#todayView,#detail,#customersView,main,body,dialog) .custom-select-trigger .custom-select-arrow.custom-select-arrow{
 position:static!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;margin:0!important;
 flex:0 0 26px!important;width:26px!important;height:26px!important;border-radius:8px!important}
:is(#searchForm,#todayView,#detail,#customersView,main,body,dialog) .custom-select-trigger[aria-expanded=true] .custom-select-arrow.custom-select-arrow{transform:rotate(180deg)!important}
/* menu: compact rows, scroll when long, at least as wide as the field */
body .custom-select-menu.custom-select-menu{padding:6px!important;max-height:min(340px,60vh)!important;overflow:auto!important;scrollbar-width:thin}
body .custom-select-menu>button.custom-select-option.custom-select-option{
 margin:0 0 2px!important;padding:8px 12px 8px 34px!important;min-height:36px!important;font-size:13.5px!important;line-height:1.3!important;border-radius:9px!important;position:relative;white-space:nowrap}
body .custom-select-menu>button.custom-select-option.custom-select-option:last-child{margin-bottom:0!important}
body .custom-select-menu>button.custom-select-option.custom-select-option::before{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;width:14px;text-align:center}
body .custom-select-menu>button.custom-select-option.custom-select-option:not([aria-selected=true])::before{opacity:0}
body .custom-select-menu>button.custom-select-option.custom-select-option+button.custom-select-option{border-top:0}
/* ===== end v6 ===== */

/* ===== Charts (v7): give every chart room and a calm frame ===== */
.chart-box,main .canvas{position:relative;min-height:240px;padding:6px 4px 0}
.chart-card .chart-box{min-height:260px}
.chart-card h3,main .panel .heading h2{display:flex;align-items:center;gap:10px}
.chart-card h3::before,main .graphs>.panel .heading h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ui-accent);box-shadow:0 0 12px var(--ui-accent)}
#chartSummary,.chart-card p{font-size:12px;color:var(--muted,#9aa)}
canvas{max-width:100%}
/* Background refreshes of chart areas: keep charts visible, show a small corner pill instead of blurring */
.graphs.section-is-loading>:not(.section-loading-indicator),#analyticsView .analytics-grid.section-is-loading>:not(.section-loading-indicator){filter:none!important;opacity:1!important;pointer-events:auto!important}
.graphs>.section-loading-indicator,#analyticsView .analytics-grid>.section-loading-indicator{inset:10px 10px auto auto!important;min-height:0!important;padding:6px 12px!important;gap:8px!important;border-radius:999px!important;font-size:12px!important;
 background:color-mix(in srgb,var(--panel,#192623) 80%,transparent)!important;border:1px solid var(--g-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none!important;box-shadow:var(--g-shadow)}
.graphs>.section-loading-indicator .section-spinner,#analyticsView .analytics-grid>.section-loading-indicator .section-spinner{width:14px;height:14px;flex-basis:14px;border-width:2px}

/* ===================== Tables everywhere (v8) ===================== */
.table-wrap,main .scroll,#reportTableWrap,dialog .scroll,#detail .table-wrap{
 border:1px solid var(--g-border)!important;border-radius:16px!important;overflow:auto;
 background:linear-gradient(180deg,rgb(255 255 255 / .03),rgb(255 255 255 / .01)),color-mix(in srgb,var(--panel,#192623) 28%,transparent)!important;
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .05);scrollbar-width:thin}
:is(main,dialog,#detail) table{width:100%;border-collapse:separate!important;border-spacing:0!important;font-size:13.5px}
:is(main,dialog,#detail) thead th{position:sticky;top:0;z-index:2;text-align:left;white-space:nowrap;
 background:color-mix(in srgb,var(--panel,#192623) 70%,transparent)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 font-size:11px!important;font-weight:700!important;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#9fb0aa)!important;
 padding:13px 16px!important;border-bottom:1px solid var(--g-border)!important}
:is(main,dialog,#detail) thead th:first-child{border-top-left-radius:15px}
:is(main,dialog,#detail) thead th:last-child{border-top-right-radius:15px}
:is(main,dialog,#detail) tbody td{padding:13px 16px!important;vertical-align:middle;color:var(--text,#e8edeb);background:transparent;
 border-bottom:1px solid color-mix(in srgb,var(--g-border) 65%,transparent)!important;transition:background-color .15s ease}
:is(main,dialog,#detail) tbody tr:last-child td{border-bottom:0!important}
:is(main,dialog,#detail) tbody tr:nth-child(even) td{background:rgb(255 255 255 / .012)}
:is(main,dialog,#detail) tbody tr:hover td{background:color-mix(in srgb,var(--ui-accent) 7%,transparent)!important}
:is(main,dialog,#detail) tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--ui-accent)}
:is(main,dialog,#detail) tbody td:first-child{font-weight:650}
:is(main,dialog,#detail) tbody td small{display:block;margin-top:2px;font-weight:500;color:var(--muted,#9fb0aa);font-size:12px}
/* columns detected by glass.js */
:is(main,dialog,#detail) .cell-num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(main,dialog,#detail) .cell-actions{text-align:right!important;white-space:nowrap;width:1%}
:is(main,dialog,#detail) td.cell-actions button,:is(main,dialog,#detail) td.cell-actions a{min-height:34px!important;padding:6px 14px!important;font-size:12.5px!important;border-radius:10px!important;margin:2px 0 2px 6px!important}
/* status words: coloured dot + text (never colour alone) */
:is(main,dialog,#detail) td[data-status]{white-space:nowrap;font-weight:600}
:is(main,dialog,#detail) td[data-status]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:currentColor;box-shadow:0 0 10px currentColor}
:is(main,dialog,#detail) td[data-status=good]{color:#3fb67a!important}
:is(main,dialog,#detail) td[data-status=warn]{color:#e0a020!important}
:is(main,dialog,#detail) td[data-status=bad]{color:#e5605f!important}
:is(main,dialog,#detail) td[data-status=neutral]{color:var(--muted,#9fb0aa)!important}
:root[data-theme=light] :is(main,dialog,#detail) td[data-status=good]{color:#14804a!important}
:root[data-theme=light] :is(main,dialog,#detail) td[data-status=warn]{color:#9a6a00!important}
:root[data-theme=light] :is(main,dialog,#detail) td[data-status=bad]{color:#c0302f!important}
/* empty table message */
:is(main,dialog,#detail) td.empty,:is(main,dialog,#detail) td[colspan]:only-child{text-align:center!important;padding:34px 16px!important;color:var(--muted,#9fb0aa)!important;font-weight:500!important;background:transparent!important;box-shadow:none!important}
/* pagination under tables */
main .pagination,main .record-pagination,dialog .pagination{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-top:12px!important;padding:8px 4px 0}
main .pagination>span,main .pagination>p,main .pagination>small,main .record-pagination>span{font-size:12.5px;color:var(--muted,#9fb0aa)}
main .pagination button,main .record-pagination button{min-height:36px!important;padding:6px 14px!important;border-radius:999px!important;font-size:12.5px!important}
main .pagination>div,main .recharge-pagination-controls{display:flex!important;align-items:center;gap:8px}
/* light theme */
:root[data-theme=light] :is(main,dialog,#detail) thead th{background:rgb(255 255 255 / .8)!important}
:root[data-theme=light] .table-wrap,:root[data-theme=light] main .scroll{background:rgb(255 255 255 / .55)!important}
:root[data-theme=light] :is(main,dialog,#detail) tbody td{color:#1f2a2e}
/* phones: compact cells, scroll hint shadow */
@media(max-width:750px){
 :is(main,dialog,#detail) thead th,:is(main,dialog,#detail) tbody td{padding:11px 12px!important}
}
/* ===================== end tables ===================== */
:is(main,dialog,#detail) thead th,:is(main,dialog,#detail) tbody td{border-left:0!important;border-right:0!important}
:is(main,dialog,#detail) thead th+th,:is(main,dialog,#detail) tbody td+td{box-shadow:none}
:is(main,dialog,#detail) thead th{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:color-mix(in srgb,var(--panel,#192623) 94%,var(--ui-accent) 6%)!important}
:root[data-theme=light] :is(main,dialog,#detail) thead th{background:color-mix(in srgb,#fff 94%,var(--ui-accent) 6%)!important}

/* ===================== Light mode: make the glass & motion clearly visible (v9) ===================== */
:root[data-theme=light]{--bg:#eef1f6;
 --g-surface:rgb(255 255 255 / .58);--g-surface-strong:rgb(255 255 255 / .82);--g-field:rgb(255 255 255 / .72);
 --g-border:color-mix(in srgb,var(--ui-accent) 22%,rgb(30 41 59 / .1));--g-border-strong:color-mix(in srgb,var(--ui-accent) 55%,rgb(30 41 59 / .14));
 --g-shadow:0 22px 44px -26px color-mix(in srgb,var(--ui-accent) 45%,rgb(30 41 59 / .5)),0 2px 6px rgb(30 41 59 / .06);
 --g-edge:linear-gradient(135deg,#fff,rgb(255 255 255 / .55) 40%,color-mix(in srgb,var(--ui-accent) 55%,#fff));
 --g-highlight:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(255 255 255 / .4)}
:root[data-theme=light],:root[data-theme=light] .glass-bg{background:#eef1f6!important}
/* richer pastel aurora: normal blending (multiply made it muddy/invisible) */
:root[data-theme=light] .glass-bg .gb-blob{mix-blend-mode:normal;opacity:.75}
:root[data-theme=light] .glass-bg .gb-1{background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 55%,#fff),transparent 72%)}
:root[data-theme=light] .glass-bg .gb-2{background:radial-gradient(closest-side,color-mix(in srgb,#7aa2ff 60%,#fff),transparent 72%);opacity:.7}
:root[data-theme=light] .glass-bg .gb-3{background:radial-gradient(closest-side,color-mix(in srgb,#c49bff 55%,#fff),transparent 72%);opacity:.65}
:root[data-theme=light] .glass-bg .gb-4{background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 40%,#ffe7b3),transparent 70%);opacity:.6}
:root[data-theme=light] .glass-bg .gb-follow{mix-blend-mode:normal;opacity:.55;background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 35%,transparent),transparent 70%)}
:root[data-theme=light] .glass-bg .gb-sheen{opacity:.9;background:conic-gradient(from 0deg at 50% 50%,transparent 0 40%,color-mix(in srgb,var(--ui-accent) 14%,transparent) 50%,transparent 60% 100%)}
:root[data-theme=light] .glass-bg .gb-grid{background-image:linear-gradient(rgb(30 41 59 / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(30 41 59 / .06) 1px,transparent 1px)}
:root[data-theme=light] .glass-bg .gb-vignette{background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgb(238 241 246 / .6) 100%)}
:root[data-theme=light] .glass-bg canvas{opacity:.9}
/* frosted white panels with bright edges and a soft coloured shadow */
:root[data-theme=light] main>section:not(.metrics):not(.stats):not([hidden]):not(#userReportView),:root[data-theme=light] main .panel,:root[data-theme=light] .chart-card,:root[data-theme=light] .login-card,:root[data-theme=light] .manager-platform-summary>article{
 background:linear-gradient(var(--g-surface),var(--g-surface)) padding-box,var(--g-edge) border-box!important;box-shadow:var(--g-highlight),var(--g-shadow)!important;
 -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%)}
:root[data-theme=light] #detail,:root[data-theme=light] dialog[open]{background:linear-gradient(var(--g-surface-strong),var(--g-surface-strong)) padding-box,var(--g-edge) border-box!important}
:root[data-theme=light] main section section,:root[data-theme=light] main section .panel,:root[data-theme=light] main .panel .panel{background:rgb(255 255 255 / .45)!important;border-color:var(--g-border)!important}
:root[data-theme=light] .metrics article,:root[data-theme=light] .stats>*,:root[data-theme=light] #developerMetrics article{background-color:rgb(255 255 255 / .55)!important;box-shadow:inset 0 1px 0 #fff,var(--g-shadow)!important}
:root[data-theme=light] body>aside,:root[data-theme=light] aside.manager-sidebar,:root[data-theme=light] aside.developer-sidebar{background:rgb(255 255 255 / .5)!important;border-right:1px solid rgb(255 255 255 / .8)!important;box-shadow:12px 0 40px -30px color-mix(in srgb,var(--ui-accent) 60%,transparent)}
:root[data-theme=light] body>aside nav .sidebar-group-items>*:not(.active):not([aria-current=page]){color:#1f2a2e!important}
:root[data-theme=light] main>header:first-of-type,:root[data-theme=light] main>header#overview,:root[data-theme=light] main>header.developer-heading{background:rgb(255 255 255 / .55)!important;border-bottom-color:rgb(255 255 255 / .9)!important}
:root[data-theme=light] .mobile-topbar{background:rgb(255 255 255 / .6)}
/* tables in light mode */
:root[data-theme=light] .table-wrap,:root[data-theme=light] main .scroll{background:rgb(255 255 255 / .5)!important;border-color:var(--g-border)!important}
:root[data-theme=light] :is(main,dialog,#detail) tbody tr:nth-child(even) td{background:rgb(30 41 59 / .025)}
:root[data-theme=light] :is(main,dialog,#detail) tbody tr:hover td{background:color-mix(in srgb,var(--ui-accent) 10%,transparent)!important}
:root[data-theme=light] :is(main,dialog,#detail) tbody td{border-bottom-color:rgb(30 41 59 / .07)!important}
/* buttons & fields */
:root[data-theme=light] main button:not(.primary):not(#searchCustomersButton):not(.custom-select-trigger):not(.column-sort):not(th *):not([aria-pressed=true]):not(.active){background:rgb(255 255 255 / .7)!important;border-color:var(--g-border)!important;color:#1f2a2e!important}
:root[data-theme=light] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),:root[data-theme=light] select,:root[data-theme=light] textarea{background-color:rgb(255 255 255 / .8)!important}
:root[data-theme=light] #searchForm.filters,:root[data-theme=light] main .filters{background:rgb(255 255 255 / .4)!important}
:root[data-theme=light] .telegram-inbox-dialog .tg-conversation{background:radial-gradient(700px 400px at 80% 0,color-mix(in srgb,var(--ui-accent) 10%,transparent),transparent 70%),#f4f6fa}
/* ===================== end light v9 ===================== */

/* Sidebar: still scrollable, but no visible scrollbar */
body>aside,body>aside nav,aside.manager-sidebar,aside.manager-sidebar nav,aside.developer-sidebar,aside.developer-sidebar nav,body>aside *{scrollbar-width:none!important;-ms-overflow-style:none!important}
body>aside::-webkit-scrollbar,body>aside *::-webkit-scrollbar,aside.manager-sidebar::-webkit-scrollbar,aside.manager-sidebar *::-webkit-scrollbar,aside.developer-sidebar::-webkit-scrollbar,aside.developer-sidebar *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}

/* Light mode: stronger, clearly visible colour fields behind the glass */
:root[data-theme=light] .glass-bg .gb-1{background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 85%,#fff),transparent 72%);opacity:.9}
:root[data-theme=light] .glass-bg .gb-2{background:radial-gradient(closest-side,#7d9dff,transparent 72%);opacity:.75}
:root[data-theme=light] .glass-bg .gb-3{background:radial-gradient(closest-side,#bb8cff,transparent 72%);opacity:.7}
:root[data-theme=light] .glass-bg .gb-4{background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-accent) 70%,#ffd37a),transparent 70%);opacity:.75}
:root[data-theme=light]{--g-surface:rgb(255 255 255 / .46);--g-surface-strong:rgb(255 255 255 / .78)}
:root[data-theme=light] body>aside,:root[data-theme=light] aside.manager-sidebar,:root[data-theme=light] aside.developer-sidebar{background:rgb(255 255 255 / .38)!important}
:root[data-theme=light] main>header:first-of-type,:root[data-theme=light] main>header#overview,:root[data-theme=light] main>header.developer-heading{background:rgb(255 255 255 / .42)!important}
:root[data-theme=light] .metrics article,:root[data-theme=light] .stats>*,:root[data-theme=light] #developerMetrics article{background-color:rgb(255 255 255 / .42)!important}

/* ===================== Customer profile layout fixes (v10) ===================== */
/* Right column (Support case / Contact customer): one clean column, full-width controls */
#detail .detail-grid>.case{display:flex!important;flex-direction:column!important;gap:12px!important;padding:20px!important}
#detail .detail-grid>.case>*{width:100%!important;max-width:none!important;margin:0!important;grid-column:auto!important;box-sizing:border-box}
#detail .detail-grid>.case>[hidden],#detail .detail-grid>.case>input[hidden]{display:none!important}
#detail .case h3{font-size:16px!important;margin:2px 0 0!important}
#detail .case hr{border:0!important;border-top:1px solid var(--g-border)!important;margin:8px 0!important;height:0}
#detail .case label{display:flex!important;flex-direction:column;gap:6px}
#detail .case .contact-action-row,#detail .case .personal-tag-picker{display:flex!important;flex-direction:column!important;gap:10px!important;grid-template-columns:none!important}
#detail .case .contact-action-row>*,#detail .case .personal-tag-picker>*{width:100%!important;max-width:none!important;margin:0!important}
#detail .case .contact-action-row>[hidden]{display:none!important}
#detail .case button:not(.custom-select-trigger):not(.custom-select-option),#detail .case a.message-link,#detail .case #openMessage{width:100%!important;min-height:44px!important;display:flex!important;align-items:center;justify-content:center;gap:10px;white-space:nowrap!important;text-align:center}
#detail .case #openMessage{font-size:14px}
#detail .case #confirmSent{white-space:normal!important}
#detail .case small{display:block;font-size:12px!important;line-height:1.55;color:var(--muted,#9fb0aa)}
#detail .case .personal-tag-picker>span{font-size:12.5px;color:var(--muted,#9fb0aa)}
#detail .case #messageTagChoice{flex-wrap:wrap;gap:6px}
@media(min-width:1200px){#detail .detail-grid>.case{max-height:calc(100dvh - 120px)}}
/* when the column sits under the profile (narrower screens) keep it readable, not stretched edge to edge */
@media(max-width:1199px){#detail .detail-grid>.case{max-width:720px!important}}

/* Profile facts: tidy grid, copy button right next to the value */
#detail #profile{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:18px 24px!important;padding:20px!important}
#detail #profile>span{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#9fb0aa);min-width:0}
#detail #profile>span>strong{font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--text,#e8edeb);font-weight:700;min-width:0;overflow-wrap:anywhere}
#detail .profile-copy-line{display:inline-flex!important;align-items:center;justify-content:flex-start!important;gap:8px!important;width:auto!important;max-width:100%}
#detail .profile-copy-line>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#detail .profile-copy-button{flex:0 0 30px!important;width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;display:grid!important;place-items:center;border-radius:9px!important;margin:0!important;position:static!important}
#detail .profile-copy-button svg{width:15px;height:15px}
#detail #profile>.profile-device-drawer,#detail #profile>details{grid-column:1/-1;border-top:1px solid var(--g-border);padding-top:14px}
#detail .profile-device-drawer>summary{display:inline-flex!important;align-items:center;gap:8px;width:auto!important;cursor:pointer;font-weight:600;font-size:13px;text-transform:none;letter-spacing:0;color:var(--text,#e8edeb)}
#detail .profile-device-drawer>summary svg{width:18px;height:18px}
#detail .profile-device-drawer>summary::after{position:static!important;margin-left:4px!important;transform:none}
/* Header area */
#detail #sharedTimelineButton{min-height:36px!important;padding:6px 14px!important;font-size:13px!important;border-radius:999px!important;margin-bottom:14px!important}
#detail .customer-balance-summary article small{font-size:10px;letter-spacing:.04em}
#detail .customer-balance-summary article strong{font-size:16px}
/* Support details form inside the profile */
#detail .customer-support-details{padding:20px!important}
#detail .customer-support-details textarea{min-height:110px}
/* ===================== end v10 ===================== */
#detail .profile-device-drawer>summary>span{width:auto!important;min-width:0!important;flex:0 0 auto!important}
#detail .profile-device-drawer>summary::after{font-size:14px;color:var(--ui-accent)}
@media(min-width:900px){#detail .customer-balance-summary{flex-wrap:nowrap!important}#detail .customer-balance-summary article{min-width:92px!important;padding:8px 12px!important}}
#detail>.section-head:first-child{flex-wrap:nowrap}
#detail>.section-head:first-child>div:first-child{min-width:0}
@media(max-width:899px){#detail>.section-head:first-child{flex-wrap:wrap}}

/* ===================== Profile header gap + Account history redesign (v11) ===================== */
/* sticky profile header sits flush at the very top (a general panel rule added 24px above it) */
main>section#detail#detail,#detail#detail{padding-top:0!important}
#detail#detail>.section-head:first-child{top:0!important;margin-top:0!important}

/* Section title row */
#detail .detail-grid>div>.section-head{margin:26px 0 12px!important;align-items:center}
#detail .detail-grid>div>.section-head h3{font-size:18px!important;margin:0!important}

/* Level 1 — record groups: one segmented control instead of five coloured boxes */
#detail#detail .record-main-toolbar{display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px!important}
#detail#detail .record-main-toolbar .tabs{display:inline-flex!important;flex-wrap:wrap;gap:4px!important;padding:4px!important;border-radius:14px;background:var(--g-field);border:1px solid var(--g-border);box-shadow:inset 0 1px 0 rgb(255 255 255 / .04)}
#detail#detail .record-main-toolbar .tabs button{min-height:38px!important;padding:8px 16px!important;border-radius:10px!important;border:0!important;background:transparent!important;color:var(--muted,#9fb0aa)!important;font-weight:650!important;font-size:13.5px!important;box-shadow:none!important;white-space:nowrap}
#detail#detail .record-main-toolbar .tabs button:hover{color:var(--text,#e8edeb)!important;background:color-mix(in srgb,var(--ui-accent) 10%,transparent)!important}
#detail#detail .record-main-toolbar .tabs button.active,#detail#detail .record-main-toolbar .tabs button[aria-pressed=true]{color:var(--ui-ink,#111)!important;background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 70%,#fff))!important;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--ui-accent) 80%,transparent)!important}
#detail#detail .record-main-toolbar .tabs button[hidden]{display:none!important}
#detail#detail .record-refresh-action{min-height:40px!important;padding:8px 16px!important;border-radius:999px!important}

/* Explorer card: one calm panel, no boxes inside boxes */
#detail#detail .player-record-explorer{padding:18px!important;border-radius:18px!important;border:1px solid var(--g-border)!important;background:color-mix(in srgb,var(--panel,#192623) 30%,transparent)!important;display:flex;flex-direction:column;gap:14px}
#detail#detail .player-record-explorer>*{margin:0!important}

/* Level 2 — record type: underline tabs */
#detail#detail .record-primary-tabs{display:flex!important;flex-wrap:wrap;gap:4px 18px!important;border-bottom:1px solid var(--g-border);padding:0 2px!important;background:none!important;border-radius:0!important}
#detail#detail #playerRecordExplorer>.record-primary-tabs>button{position:relative;min-height:40px!important;padding:8px 2px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted,#9fb0aa)!important;font-weight:650!important;font-size:13.5px!important}
#detail#detail #playerRecordExplorer>.record-primary-tabs>button:hover{color:var(--text,#e8edeb)!important}
#detail#detail #playerRecordExplorer>.record-primary-tabs>button[aria-pressed=true],#detail#detail #playerRecordExplorer>.record-primary-tabs>button.active{color:var(--text,#e8edeb)!important}
#detail#detail #playerRecordExplorer>.record-primary-tabs>button[aria-pressed=true]::after,#detail#detail #playerRecordExplorer>.record-primary-tabs>button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--ui-accent);box-shadow:0 0 12px var(--ui-accent)}

/* Level 3 — status: small chips with a meaning dot */
#detail#detail .record-status-tabs{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;background:none!important;padding:0!important;border:0!important}
#detail#detail .record-status-tabs::before{content:attr(data-glass-label);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#9fb0aa);margin-right:4px}
#detail#detail #playerRecordExplorer>.record-status-tabs>button{min-height:32px!important;padding:5px 12px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:650!important;background:var(--g-field)!important;border:1px solid var(--g-border)!important;color:var(--text,#e8edeb)!important;box-shadow:none!important;display:inline-flex!important;align-items:center;gap:7px}
#detail#detail #playerRecordExplorer>.record-status-tabs>button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted,#9fb0aa)}
#detail#detail #playerRecordExplorer>.record-status-tabs>button[data-status=good]::before{background:#3fb67a}
#detail#detail #playerRecordExplorer>.record-status-tabs>button[data-status=warn]::before{background:#e0a020}
#detail#detail #playerRecordExplorer>.record-status-tabs>button[data-status=bad]::before{background:#e5605f}
#detail#detail #playerRecordExplorer>.record-status-tabs>button[aria-pressed=true]{border-color:color-mix(in srgb,var(--ui-accent) 60%,transparent)!important;background:color-mix(in srgb,var(--ui-accent) 16%,transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 12%,transparent)!important}

/* Filters: clear heading, aligned fields, real primary Search button */
#detail#detail .record-cash-filters{display:grid!important;grid-template-columns:1fr auto;gap:12px 16px;align-items:end;padding:16px!important;border-radius:14px!important;border:1px solid var(--g-border)!important;background:var(--g-field)!important}
#detail#detail .record-cash-filters>.record-filter-heading{grid-column:1/-1;display:flex;align-items:baseline;gap:10px}
#detail#detail .record-cash-filters>.record-filter-heading strong{font-size:14px}
#detail#detail .record-cash-filters>.record-filter-heading small{font-size:12px;color:var(--muted,#9fb0aa)}
#detail#detail .record-cash-filters>.record-filter-grid{grid-column:1;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:12px!important}
#detail#detail .record-cash-filters>details{grid-column:1/-1;order:3}
#detail#detail .record-cash-filters>details>summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--accent-readable,var(--ui-accent));width:max-content}
#detail#detail .record-cash-filters>details[open]>.record-filter-grid{margin-top:12px;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:12px!important}
#detail#detail .record-cash-filters>.record-filter-actions{grid-column:2;grid-row:2;display:flex!important;gap:8px;align-self:end}
#detail#detail .record-filter-actions button{min-height:42px!important;padding:8px 18px!important;border-radius:12px!important}
#detail#detail .record-filter-actions button:first-child{background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 70%,#fff))!important;color:var(--ui-ink,#111)!important;border-color:transparent!important;box-shadow:var(--g-glow)!important}
@media(max-width:900px){#detail#detail .record-cash-filters{grid-template-columns:1fr}#detail#detail .record-cash-filters>.record-filter-actions{grid-column:1;grid-row:auto}}

/* Notes */
#detail#detail .player-record-explorer>p,#detail p.disclaimer,#detail#detail .table-scroll-hint{font-size:12px!important;color:var(--muted,#9fb0aa)!important;line-height:1.55}

/* Records table: caption becomes a clean header bar */
#detail#detail .player-record-explorer .table-wrap{border-radius:14px!important}
#detail#detail .record-table-caption{caption-side:top;text-align:left;display:table-caption;padding:14px 16px!important;border-bottom:1px solid var(--g-border);background:color-mix(in srgb,var(--panel,#192623) 60%,transparent)}
#detail#detail .record-table-caption strong{font-size:15px;margin-right:8px}
#detail#detail .record-table-caption .record-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;background:color-mix(in srgb,var(--ui-accent) 16%,transparent);color:var(--accent-readable,var(--ui-accent));vertical-align:2px}
#detail#detail .record-table-caption small{display:inline;margin-left:10px;color:var(--muted,#9fb0aa);font-size:12px}
#detail#detail .player-record-explorer td .record-badge{display:inline-block;padding:1px 8px;border-radius:6px;font-size:11px;font-weight:600;background:transparent;border:1px solid var(--g-border);color:var(--muted,#9fb0aa);margin-bottom:4px}
#detail#detail .player-record-explorer td code,#detail#detail .player-record-explorer td small{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11.5px;color:var(--muted,#9fb0aa);letter-spacing:.01em}
#detail#detail .player-record-explorer td.record-empty{padding:36px 16px!important;text-align:center!important;color:var(--muted,#9fb0aa)!important}
#detail#detail .player-record-explorer td button,#detail#detail .player-record-explorer td a{min-height:34px!important;padding:6px 14px!important;border-radius:999px!important;font-size:12.5px!important;white-space:nowrap}
/* pager row inside explorer */
#detail#detail .record-pagination{display:flex!important;align-items:center;gap:10px;flex-wrap:wrap}
#detail#detail .record-pagination>span{margin-right:auto;font-size:12.5px;color:var(--muted,#9fb0aa)}
#detail#detail .record-pagination button{border-radius:999px!important;min-height:36px!important;padding:6px 14px!important;font-size:12.5px!important}
/* ===================== end v11 ===================== */

/* filters: simple top-to-bottom layout (heading, fields, more filters, buttons on the right) */
#detail#detail .record-cash-filters{display:flex!important;flex-direction:column!important;gap:12px!important}
#detail#detail .record-cash-filters>*{order:0!important;grid-column:auto!important;grid-row:auto!important}
#detail#detail .record-cash-filters>.record-filter-actions{order:4!important;justify-content:flex-end;align-self:stretch}
#detail#detail .record-cash-filters>details{order:3!important}
#detail#detail .record-cash-filters>.record-filter-grid{order:2!important}
#detail#detail .record-cash-filters>.record-filter-heading{order:1!important}
/* level-1 tabs: one line, swipe sideways if narrow */
#detail#detail .record-main-toolbar .tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;max-width:100%}
#detail#detail .record-main-toolbar .tabs::-webkit-scrollbar{display:none}
#detail#detail .record-main-toolbar{flex-wrap:nowrap!important}
#detail#detail .record-main-toolbar .tabs{flex:0 1 auto;min-width:0}
#detail#detail .record-refresh-action{flex:0 0 auto}
#detail#detail .record-cash-filters{align-items:stretch!important;justify-content:flex-start!important;text-align:left!important}
#detail#detail .record-cash-filters>.record-filter-heading{justify-content:flex-start!important;width:100%!important;margin:0!important}
#detail#detail .record-cash-filters .record-filter-grid{width:100%!important;max-width:none!important;margin:0!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:12px 14px!important;justify-items:stretch!important}
#detail#detail .record-cash-filters .record-filter-grid>label{width:100%!important;min-width:0!important;margin:0!important;display:flex!important;flex-direction:column;gap:6px;text-align:left!important}
#detail#detail .record-cash-filters .record-filter-grid>label>input,#detail#detail .record-cash-filters .record-filter-grid>label>.custom-select{width:100%!important;margin:0!important}
#detail#detail .record-cash-filters>details{width:100%!important;text-align:left}
#detail#detail .record-cash-filters>details>summary{margin:0!important}
#detail#detail .record-cash-filters>.record-filter-actions{width:100%!important;display:flex!important;justify-content:flex-end!important;margin:0!important}
#detail#detail #playerRecordExplorer>.record-status-tabs:not(:has(button:not([hidden]))){display:none!important}
#detail#detail #playerRecordExplorer>.record-primary-tabs{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
#detail#detail #playerRecordExplorer>.record-primary-tabs::-webkit-scrollbar{display:none}
#detail#detail #playerRecordExplorer>.record-primary-tabs>button{flex:0 0 auto}
#detail#detail #playerRecordExplorer td:first-child{max-width:210px}
#detail#detail #playerRecordExplorer td:first-child>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#detail#detail #playerRecordExplorer th,#detail#detail #playerRecordExplorer td{padding-left:12px!important;padding-right:12px!important}
#detail#detail #playerRecordExplorer td:last-child button{padding:6px 12px!important}

/* ===== Account history tables (v12): one line per cell, compact, scroll sideways ===== */
#detail#detail #playerRecordExplorer .table-wrap{overflow:auto!important;max-height:min(560px,70vh);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ui-accent) 45%,transparent) transparent;overscroll-behavior:contain}
#detail#detail #playerRecordExplorer table{width:max-content!important;min-width:100%!important;table-layout:auto!important;font-size:12.5px!important}
#detail#detail #playerRecordExplorer thead th,#detail#detail #playerRecordExplorer tbody td{white-space:nowrap!important;padding:10px 12px!important;line-height:1.35!important;vertical-align:middle!important}
#detail#detail #playerRecordExplorer thead th{font-size:10.5px!important;z-index:3;box-shadow:0 1px 0 var(--g-border)}
#detail#detail #playerRecordExplorer tbody td>*{white-space:nowrap!important}
#detail#detail #playerRecordExplorer tbody td:first-child{max-width:200px;position:sticky;left:0;z-index:2;background:color-mix(in srgb,var(--panel,#192623) 92%,transparent)!important}
#detail#detail #playerRecordExplorer thead th:first-child{position:sticky;left:0;z-index:4}
#detail#detail #playerRecordExplorer tbody tr:hover td:first-child{background:color-mix(in srgb,var(--panel,#192623) 85%,var(--ui-accent) 15%)!important}
#detail#detail #playerRecordExplorer tbody td:first-child .record-badge{margin:0 0 3px!important;font-size:10.5px!important;padding:0 7px!important}
#detail#detail #playerRecordExplorer tbody td small,#detail#detail #playerRecordExplorer tbody td time{display:block;font-size:11px!important;margin-top:1px}
#detail#detail #playerRecordExplorer tbody tr:nth-child(even) td:not(:first-child){background:rgb(255 255 255 / .015)}
#detail#detail #playerRecordExplorer .cell-num{font-weight:700}
#detail#detail #playerRecordExplorer .table-scroll-hint,#detail#detail .table-scroll-hint{display:block;text-align:right}
:root[data-theme=light] #detail#detail #playerRecordExplorer tbody td:first-child,:root[data-theme=light] #detail#detail #playerRecordExplorer thead th:first-child{background:rgb(255 255 255 / .94)!important}
/* negative money in red, positive in green (sign + colour, never colour alone) */
#detail#detail #playerRecordExplorer td.cell-num[data-sign=neg]{color:#e5605f!important}
#detail#detail #playerRecordExplorer td.cell-num[data-sign=pos]{color:#3fb67a!important}
:root[data-theme=light] #detail#detail #playerRecordExplorer td.cell-num[data-sign=neg]{color:#c0302f!important}
:root[data-theme=light] #detail#detail #playerRecordExplorer td.cell-num[data-sign=pos]{color:#14804a!important}
/* give the history more room: on mid-size screens the side column moves below the profile */
@media(min-width:1200px) and (max-width:1499px){
 #detail .detail-grid{grid-template-columns:minmax(0,1fr) 340px!important}
}
:is(main,dialog,#detail) td[data-status=lossy]{color:#e5605f!important;font-weight:600}
:is(main,dialog,#detail) td[data-status=lossy]::before{opacity:.8}
:root[data-theme=light] :is(main,dialog,#detail) td[data-status=lossy]{color:#c0302f!important}

/* ===== Performance (v13) ===== */
.glass-bg>*{backface-visibility:hidden}
.glass-bg .gb-sheen,.glass-bg .gb-blob{will-change:transform}
/* lite mode: weaker PCs or slow frames detected by glass.js */
html.glass-lite .glass-bg canvas,html.glass-lite .glass-bg .gb-sheen,html.glass-lite .glass-bg .gb-grain,html.glass-lite .glass-bg .gb-follow{display:none!important}
html.glass-lite .glass-bg .gb-blob{mix-blend-mode:normal!important;animation-duration:60s!important}
html.glass-lite .glass-bg .gb-grid{animation:none!important}
html.glass-lite body>aside,html.glass-lite main>section,html.glass-lite main .panel,html.glass-lite dialog[open],html.glass-lite #detail,html.glass-lite .metrics article,html.glass-lite main>header{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
/* idle: freeze the background after 2 minutes without input */
html.glass-idle .glass-bg *{animation-play-state:paused!important}
/* content far below the screen skips rendering work until scrolled near */
main>section:not([hidden]):not(#detail)+section:not([hidden]):not(#detail){content-visibility:auto;contain-intrinsic-size:auto 600px}

/* ===== Glass & Glow translator ===== */
html body .tr-fab{position:fixed;right:20px;bottom:20px;z-index:1200;display:inline-flex!important;align-items:center;gap:8px;height:46px;min-height:46px!important;padding:0 16px 0 13px!important;margin:0!important;border-radius:999px!important;border:1px solid var(--g-border-strong,rgb(255 255 255 / .2))!important;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent,#3fb67a) 92%,#fff 8%),color-mix(in srgb,var(--ui-accent,#3fb67a) 70%,#000 30%))!important;color:var(--ui-ink,#04140c)!important;font:600 14px/1 inherit!important;letter-spacing:.01em;box-shadow:0 12px 28px -10px color-mix(in srgb,var(--ui-accent,#3fb67a) 70%,transparent),inset 0 1px 0 rgb(255 255 255 / .35)!important;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,bottom .25s ease}
html body .tr-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px color-mix(in srgb,var(--ui-accent,#3fb67a) 85%,transparent),inset 0 1px 0 rgb(255 255 255 / .4)!important}
html body .tr-fab:focus-visible{outline:2px solid var(--text,#fff);outline-offset:3px}
html body .tr-fab svg{width:20px;height:20px;flex:none}
html.tr-open body .tr-fab{transform:none;opacity:.92}
/* Stay clear of the Telegram composer and the toast */
html body:has(section:not([hidden]) .tg-has-chat) .tr-fab{bottom:92px}
html body #toast{bottom:80px}

html body .tr-panel{position:fixed;right:20px;bottom:78px;z-index:1201;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 110px);display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--g-radius,20px);background:var(--g-surface-strong,rgb(20 30 28 / .92));-webkit-backdrop-filter:var(--g-blur,blur(24px) saturate(180%));backdrop-filter:var(--g-blur,blur(24px) saturate(180%));border:1px solid var(--g-border-strong,rgb(255 255 255 / .14));box-shadow:0 30px 70px -24px rgb(0 0 0 / .55),var(--g-highlight,inset 0 1px 0 rgb(255 255 255 / .06));color:var(--text);overflow:auto;animation:trIn .2s ease both}
html body .tr-panel[hidden]{display:none!important}
@keyframes trIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
html[data-motion=reduced] body .tr-panel{animation:none}
html body:has(section:not([hidden]) .tg-has-chat) .tr-panel{bottom:150px}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;background:none!important;border:0!important;position:static!important}
html body .tr-panel h2.tr-title{margin:0!important;font-size:16px!important;font-weight:700;color:var(--text)!important;letter-spacing:0}
html body .tr-panel button{font:inherit;cursor:pointer}
html body .tr-panel .tr-close{width:32px;height:32px;min-height:32px!important;padding:0!important;display:grid;place-items:center;border-radius:10px!important;border:1px solid transparent!important;background:transparent!important;color:var(--muted)!important;font-size:20px!important;line-height:1}
html body .tr-panel .tr-close:hover{background:color-mix(in srgb,var(--text) 8%,transparent)!important;color:var(--text)!important}
.tr-langs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
html body .tr-panel select{width:100%;min-width:0;height:38px;padding:0 30px 0 11px!important;border-radius:var(--g-radius-sm,11px)!important;border:1px solid var(--g-border,rgb(255 255 255 / .1))!important;background-color:var(--g-field,rgb(0 0 0 / .2))!important;color:var(--text)!important;font:500 13px/1 inherit!important;appearance:auto}
html body .tr-panel select option{background:var(--panel,#192623);color:var(--text)}
html body .tr-panel .tr-swap{width:38px;height:38px;min-height:38px!important;padding:0!important;border-radius:999px!important;border:1px solid var(--g-border,rgb(255 255 255 / .1))!important;background:var(--g-field,rgb(0 0 0 / .2))!important;color:var(--accent-readable,var(--ui-accent))!important;font-size:16px!important;transition:transform .25s ease}
html body .tr-panel .tr-swap:hover{transform:rotate(180deg)}
.tr-box{position:relative;border-radius:var(--g-radius-md,14px);border:1px solid var(--g-border,rgb(255 255 255 / .1));background:var(--g-field,rgb(0 0 0 / .2))}
.tr-source-box:focus-within{border-color:color-mix(in srgb,var(--ui-accent) 60%,transparent);box-shadow:var(--g-glow-soft,0 0 0 4px rgb(63 182 122 / .2))}
html body .tr-panel textarea.tr-source{display:block;width:100%;min-height:112px;max-height:40vh;resize:vertical;margin:0;padding:12px 36px 26px 13px!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--text)!important;font:400 14px/1.5 inherit!important}
html body .tr-panel .tr-clear{position:absolute;top:8px;right:8px;width:26px;height:26px;min-height:26px!important;padding:0!important;border-radius:8px!important;border:0!important;background:transparent!important;color:var(--muted)!important;font-size:17px!important;line-height:1}
html body .tr-panel .tr-clear:hover{color:var(--text)!important;background:color-mix(in srgb,var(--text) 8%,transparent)!important}
.tr-count{position:absolute;right:12px;bottom:7px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.tr-result-box{min-height:96px;padding:12px 13px 26px;background:color-mix(in srgb,var(--ui-accent) 7%,var(--g-field,rgb(0 0 0 / .2)))}
.tr-result{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5;color:var(--text);max-height:36vh;overflow:auto;outline:0}
.tr-result:empty::before{content:attr(data-placeholder);color:var(--muted)}
.tr-panel[aria-busy=true] .tr-result{opacity:.55}
.tr-detected{position:absolute;left:13px;bottom:7px;font-size:11px;color:var(--accent-readable,var(--ui-accent))}
.tr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tr-status{flex:1 1 140px;min-width:0;font-size:12px;color:var(--muted);line-height:1.35}
.tr-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
html body .tr-panel .tr-actions button{height:36px;min-height:36px!important;padding:0 14px!important;border-radius:var(--g-radius-sm,11px)!important;border:1px solid var(--g-border,rgb(255 255 255 / .1))!important;background:var(--g-field,rgb(0 0 0 / .2))!important;color:var(--text)!important;font:600 13px/1 inherit!important;box-shadow:none!important}
html body .tr-panel .tr-actions button:hover{border-color:var(--g-border-strong,rgb(255 255 255 / .2))!important}
html body .tr-panel .tr-actions button[hidden]{display:none!important}
html body .tr-panel .tr-actions .tr-go{background:var(--ui-accent,#3fb67a)!important;border-color:transparent!important;color:var(--ui-ink,#04140c)!important}
html body .tr-panel .tr-actions .tr-go:hover{filter:brightness(1.08)}
html body .tr-panel :focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
@media (max-width:750px){
 html body .tr-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:48px;height:48px;padding:0!important;justify-content:center}
 html body .tr-fab .tr-fab-label{display:none}
 html body .tr-panel{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 96px)}
 html.nav-open body .tr-fab{display:none!important}
}
@media print{html body .tr-fab,html body .tr-panel{display:none!important}}
/* Sign-in page: every string is already translated and the page has its own language menu; on phones the button sat over the card */
html body.ui-login .tr-fab,html body.ui-login .tr-panel{display:none!important}
/* ===== end Glass & Glow translator ===== */
/* ===== Glass chart tooltip ===== */
html body .gct{position:fixed;left:0;top:0;z-index:1300;min-width:150px;max-width:260px;padding:10px 12px 11px;border-radius:14px;pointer-events:none;opacity:0;transition:opacity .14s ease,transform .12s ease;
 background:linear-gradient(160deg,color-mix(in srgb,var(--gct-accent,#8f7cf0) 16%,rgb(18 22 28 / .9)),rgb(14 18 22 / .9));
 -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
 border:1px solid color-mix(in srgb,var(--gct-accent,#8f7cf0) 45%,rgb(255 255 255 / .1));
 box-shadow:0 18px 40px -16px rgb(0 0 0 / .7),0 0 0 1px rgb(0 0 0 / .2),inset 0 1px 0 rgb(255 255 255 / .08);color:#eef2f1;font:500 12.5px/1.35 var(--ui-font,Nunito,'Segoe UI',system-ui,sans-serif)}
html body .gct.gct-on{opacity:1}
html body .gct::after{content:'';position:absolute;left:var(--gct-caret,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);background:rgb(14 18 22 / .95);border-right:1px solid color-mix(in srgb,var(--gct-accent,#8f7cf0) 45%,transparent);border-bottom:1px solid color-mix(in srgb,var(--gct-accent,#8f7cf0) 45%,transparent)}
html body .gct.gct-below::after{bottom:auto;top:-6px;transform:rotate(225deg)}
.gct-title{margin:0 0 7px;padding-bottom:7px;border-bottom:1px solid rgb(255 255 255 / .08);font-size:11.5px;font-weight:700;letter-spacing:.03em;color:rgb(238 242 241 / .62);font-variant-numeric:tabular-nums}
.gct-row{display:flex;align-items:center;gap:8px}
.gct-row+.gct-row,.gct-extra+.gct-row{margin-top:6px}
.gct-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent),0 0 10px var(--c)}
.gct-label{flex:1;min-width:0;color:rgb(238 242 241 / .78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gct-value{margin-left:10px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.gct-extra{display:flex;align-items:center;gap:6px;margin:5px 0 0 17px;font-size:11px}
.gct-sub{color:rgb(238 242 241 / .5)}
.gct-delta{padding:1px 6px;border-radius:6px;font-weight:700;font-variant-numeric:tabular-nums}
.gct-up{background:rgb(63 182 122 / .18);color:#6bd89c}
.gct-down{background:rgb(229 96 95 / .18);color:#f08d8c}
.gct-flat{background:rgb(255 255 255 / .08);color:rgb(238 242 241 / .6)}
html[data-theme=light] body .gct{background:linear-gradient(160deg,color-mix(in srgb,var(--gct-accent,#2a78d6) 10%,rgb(255 255 255 / .95)),rgb(255 255 255 / .94));color:#1f2a2e;border-color:color-mix(in srgb,var(--gct-accent,#2a78d6) 40%,rgb(15 23 42 / .1));box-shadow:0 18px 40px -18px rgb(30 41 59 / .45),inset 0 1px 0 #fff}
html[data-theme=light] body .gct::after{background:rgb(255 255 255 / .97)}
html[data-theme=light] .gct-title{color:#5b6670;border-color:rgb(15 23 42 / .08)}
html[data-theme=light] .gct-label{color:#4a5560}
html[data-theme=light] .gct-value{color:#111a1e}
html[data-theme=light] .gct-sub{color:#7a858e}
html[data-theme=light] .gct-up{color:#17784a}html[data-theme=light] .gct-down{color:#b0393a}html[data-theme=light] .gct-flat{color:#5b6670;background:rgb(15 23 42 / .06)}
@media (prefers-reduced-motion:reduce){html body .gct{transition:none}}
/* ===== end Glass chart tooltip ===== */
/* ===== v14: equal-size filter fields ===== */
html body :is(#searchForm,#todayView,#customersView,#detail,main,dialog) :is(form,.toolbar,.filters,.filter-bar,div) label :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not(.custom-select-native),select:not(.custom-select-native)),
html body :is(#searchForm,#todayView,#customersView,#detail,main,dialog) :is(form,.toolbar,.filters,.filter-bar,div) label .custom-select,
html body :is(#searchForm,#todayView,#customersView,#detail,main,dialog) :is(form,.toolbar,.filters,.filter-bar,div) label .custom-select>.custom-select-trigger.custom-select-trigger{box-sizing:border-box!important;height:44px!important;min-height:44px!important;max-height:44px!important}
html body :is(#searchForm,#todayView,#customersView,#detail,main,dialog) :is(form,.toolbar,.filters,.filter-bar,div) label :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not(.custom-select-native),select:not(.custom-select-native)),
html body :is(#searchForm,#todayView,#customersView,#detail,main,dialog) :is(form,.toolbar,.filters,.filter-bar,div) label .custom-select>.custom-select-trigger.custom-select-trigger{border-radius:12px!important;padding-top:0!important;padding-bottom:0!important;line-height:42px}
html body :is(#searchForm,#todayView,#customersView,#detail,main,dialog) :is(form,.toolbar,.filters,.filter-bar,div) label .custom-select>.custom-select-trigger.custom-select-trigger{width:100%!important;line-height:normal}
/* Username label with the Batch button: keep the label row the same height as its neighbours */
html body :is(#searchForm,main,dialog) .batch-username-heading{height:17px!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:space-between;gap:8px;overflow:visible}
html body :is(#searchForm,main,dialog) .batch-username-heading>.batch-usernames-open{height:22px!important;min-height:22px!important;margin:-3px 0!important;padding:0 9px!important;font-size:11px!important;line-height:20px!important;border-radius:999px!important}
html body #searchForm#searchForm>button:is(.primary,[type=submit]){box-sizing:border-box!important;height:44px!important;min-height:44px!important;padding-top:0!important;padding-bottom:0!important;border-radius:12px!important}
/* ===== end v14 ===== */

/* Keep the translator anchored while input and async results change. */
html body #glassTranslator.tr-panel{height:min(550px,calc(100dvh - 110px));overflow:auto;overflow-anchor:none;scrollbar-gutter:stable}
html body #glassTranslator .tr-head,html body #glassTranslator .tr-langs,html body #glassTranslator .tr-source-box,html body #glassTranslator .tr-foot{flex-shrink:0}
html body #glassTranslator .tr-result-box{flex:1 0 150px;min-height:150px;max-height:150px;overflow:hidden}
html body #glassTranslator .tr-result{height:100%;max-height:100%;overflow:auto}
html body #glassTranslator .tr-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
html body #glassTranslator .tr-status{height:32px;overflow:auto}
html body #glassTranslator .tr-actions{min-height:36px}
html body #glassTranslator textarea.tr-source{height:132px;min-height:132px;max-height:132px;resize:none}
@media(max-width:750px){html body #glassTranslator.tr-panel{height:min(550px,calc(100dvh - 96px))}}