/* Advertiser compatibility layer. Loaded after reference and existing page styles. */
:root { --primary-color:#2588f8; --accent-color:#69adff; color-scheme:dark; }
:root[data-ui-accent="violet"] { --primary-color:#7c5cff; --accent-color:#9a83ff; }
body { margin:0; }
body > .navbar { position:sticky!important; top:0; z-index:1040; }
.sidebar .user-info { display:none; }
.sidebar { top:var(--navbar-height)!important; height:calc(100dvh - var(--navbar-height))!important; }
.main-content { margin-top:0!important; }
.advertiser-portal-navbar .container-fluid { display:flex; flex-wrap:wrap; gap:.55rem; }
.advertiser-navbar-stats,.advertiser-navbar-account { display:flex; align-items:center; gap:.55rem; }
.advertiser-navbar-stats .badge { display:inline-flex; align-items:center; gap:.35rem; min-height:38px; padding:.55rem .75rem; font-size:.78rem!important; }
.advertiser-navbar-account .account-info { display:flex; gap:.35rem; white-space:nowrap; }
:root[data-ui-theme="light"] .advertiser-navbar-account .account-info { color:#202637!important; }
:root[data-ui-theme="light"] .advertiser-navbar-account .btn-outline-light { color:#202637; border-color:rgba(32,44,67,.2); background:#fff; }
:root[data-ui-theme="light"] .advertiser-navbar-account .btn-outline-light:hover { color:#fff; border-color:var(--primary-color); background:var(--primary-color); }
.card { overflow:visible; }
.table-responsive { max-width:100%; overflow-x:auto; border-radius:var(--radius-md); }
.table { --bs-table-color:var(--text-color); --bs-table-striped-color:var(--text-color); --bs-table-hover-color:var(--text-color); --bs-table-striped-bg:rgba(255,255,255,.025); --bs-table-hover-bg:rgba(105,173,255,.09); }
.table td,.table th { border-color:var(--border-color)!important; }
.table-light,.table-dark { --bs-table-bg:var(--surface-raised); --bs-table-color:var(--text-color); }
.bg-white,.bg-light,.signup-container { background:var(--surface-color)!important; color:var(--text-color)!important; }
.text-dark,.text-body,.form-text { color:var(--muted-color)!important; }
.dropdown-item { color:var(--text-color); }
.dropdown-item:hover,.dropdown-item:focus { color:var(--text-color); background:var(--surface-raised); }
.form-control:disabled,.form-select:disabled { background:var(--surface-raised); color:var(--muted-color); opacity:.8; }
input[type=checkbox],input[type=radio] { accent-color:var(--primary-color); }
.btn-outline-primary { color:var(--accent-color); border-color:var(--primary-color); }
.btn-outline-primary:hover { color:white; background:var(--primary-color); }
.btn-close { filter:invert(1) grayscale(1); }
.signup-container { width:calc(100% - 32px)!important; max-width:760px; margin:32px auto!important; border:1px solid var(--border-color); border-radius:20px; box-shadow:var(--shadow-lg); padding:clamp(20px,4vw,40px)!important; }
.sidebar-backdrop { position:fixed; inset:var(--navbar-height) 0 0; background:rgba(0,0,0,.6); z-index:1030; border:0; }
.sidebar-backdrop[hidden] { display:none; }
.publisher-login-page { color-scheme:light; }
body.publisher-login-page { height:auto; min-height:100dvh; overflow:auto; }
.publisher-login-page > .navbar { display:flex!important; position:relative!important; height:auto; min-height:64px; }
.publisher-login-page .page-wrap { height:auto; min-height:calc(100dvh - 64px); flex-direction:column; }
.publisher-login-page footer { position:static!important; width:100%!important; margin-left:0!important; background:transparent!important; }
.publisher-login-page .shell { flex-shrink:0; }
.publisher-login-page .shell > .row,.publisher-login-page .shell > .row > [class*="col-"] { height:auto; }
.publisher-login-page .promo-panel { overflow:visible!important; }
.publisher-login-page .highlight,.publisher-login-page .cards,.publisher-login-page .cta-row,.publisher-login-page .terms { display:block!important; }
.publisher-login-page .shell { height:auto!important; max-height:none!important; }
.publisher-login-page .login-panel { min-height:600px; }
.publisher-login-page .login-panel { justify-content:flex-start; padding-top:64px!important; }
.publisher-login-page .highlight { padding:16px; margin-block:16px; }
.publisher-login-page .highlight .h1 { font-size:1rem; line-height:1.4; margin-bottom:6px; }
.publisher-login-page .mini { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); padding:12px; margin-block:8px; }
.publisher-login-page .mini .t { color:#f5f7ff; font-size:.85rem; }
.publisher-login-page .mini .d { color:#aebfd4; font-size:.78rem; }
.publisher-login-page .cta-row .btn { margin:4px 0; }
.publisher-login-page .terms { color:#aebfd4; font-size:.72rem; line-height:1.5; }
.publisher-login-page .login-panel,.publisher-login-page form { color:#142238!important; }
.publisher-login-page .h-title { color:#142238; }
.publisher-login-page .form-control { color:#142238!important; border-color:#dfe7f1!important; }
.publisher-login-page .form-control::placeholder { color:#697991!important; }
.publisher-login-page .promo-panel { height:100%; padding:36px!important; overflow:auto; }
.publisher-login-page .promo-panel > .big,.publisher-login-page .promo-panel > .lead,.publisher-login-page .promo-panel > .feature-list,.publisher-login-page .promo-badge { display:block!important; }
.publisher-login-page .promo-panel > .big { font-size:2rem; }
.publisher-login-page .promo-panel .cards { display:grid; grid-template-columns:1fr; }
.publisher-login-page .text-muted { color:#697991!important; }
.publisher-login-page .togglePassword { color:#53647b; cursor:pointer; }
.publisher-login-page .navbar .nav-link { color:#d6e3f5!important; }
@media(max-width:991.98px) {
 .main-content { margin-left:0!important; width:100%!important; }
 .navbar-brand { white-space:normal; max-width:calc(100vw - 110px); }
 .publisher-login-page .login-panel { min-height:0; }
 .publisher-login-page .promo-panel { display:block!important; padding:28px!important; }
 .publisher-login-page .shell > .row { flex-direction:column; }
 footer { left:0!important; }
 .advertiser-portal-navbar .navbar-brand { order:1; flex:1 1 calc(100% - 64px); }
 .advertiser-navbar-stats { order:2; width:100%; }
 .advertiser-navbar-account { order:3; width:100%; justify-content:space-between; }
 .advertiser-navbar-stats .badge { flex:1 1 0; justify-content:center; min-width:0; }
}
@media(max-width:575.98px) {
 .advertiser-navbar-stats .badge { padding-inline:.35rem; font-size:.68rem!important; }
 .advertiser-navbar-account .btn { min-width:88px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* Paint the portal after ui.js finishes the enhanced sidebar layout. */
:root.pc-ui-booting body:has(.sidebar) { visibility:hidden; }
:root.pc-ui-booting body:has(.sidebar) *,
:root.pc-ui-booting body:has(.sidebar) *::before,
:root.pc-ui-booting body:has(.sidebar) *::after {
  transition:none!important;
  animation:none!important;
}

/* Stable content-only navigation. The previous page remains visible while the
   next response is prepared, then the new content receives one short fade. */
#page-content { position:relative; }
#page-content.ajax-nav-loading { pointer-events:none; }
#page-content.ajax-nav-loading::before {
  content:"";
  position:fixed;
  z-index:1200;
  top:var(--navbar-height, 56px);
  left:var(--sidebar-width, 224px);
  width:32%;
  max-width:360px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-color), transparent);
  animation:ajaxNavigationProgress .8s ease-in-out infinite;
}
#page-content.ajax-nav-loading > * { opacity:.72; transition:opacity .12s ease; }
#page-content.ajax-nav-entering { animation:ajaxContentEnter .16s ease-out; }
@keyframes ajaxNavigationProgress {
  from { transform:translateX(-120%); }
  to { transform:translateX(340%); }
}
@keyframes ajaxContentEnter {
  from { opacity:.72; }
  to { opacity:1; }
}
@media(max-width:991.98px) {
  #page-content.ajax-nav-loading::before { left:0; top:var(--navbar-height, 60px); }
}

/* Compact production dashboard layer. Scoped to authenticated portal pages. */
body:has(.sidebar) {
  --sidebar-width:224px;
  --navbar-height:56px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
  padding-top:var(--navbar-height);
  color:var(--text-color)!important;
  background-color:var(--background-color)!important;
  background-image:radial-gradient(circle at 82% -10%,color-mix(in srgb,var(--primary-color) 14%,transparent),transparent 30rem)!important;
  font-size:14px;
  line-height:1.45;
}
body:has(.sidebar) > .navbar {
  position:fixed!important;
  inset:0 0 auto 0;
  width:100%;
  min-height:var(--navbar-height)!important;
  padding:8px 16px!important;
}
body:has(.sidebar) .advertiser-portal-navbar .container-fluid {
  flex-wrap:nowrap;
  gap:8px;
  padding:0;
}
body:has(.sidebar) .advertiser-portal-navbar .navbar-brand {
  flex:0 1 260px;
  min-width:180px;
  margin:0 8px 0 0;
  padding:0 0 0 12px;
  font-size:15px!important;
  line-height:1.2;
}
body:has(.sidebar) .advertiser-navbar-stats,
body:has(.sidebar) .advertiser-navbar-account { gap:8px; }
body:has(.sidebar) .advertiser-navbar-stats .badge {
  min-height:32px;
  padding:6px 10px;
  font-size:11.5px!important;
  font-weight:700;
}
body:has(.sidebar) .advertiser-navbar-account .btn {
  min-height:34px;
  padding:6px 10px;
  font-size:12px;
}
body:has(.sidebar) .advertiser-navbar-account .account-info {
  font-size:13px;
  font-weight:650;
}

body:has(.sidebar) .sidebar {
  width:var(--sidebar-width)!important;
  padding:8px!important;
  gap:2px;
}
body:has(.sidebar) .pc-sidebar-brand {
  min-height:44px;
  margin:0 0 6px;
  padding:6px 8px;
}
body:has(.sidebar) .pc-sidebar-brand > span { width:27px; height:27px; font-size:13px; }
body:has(.sidebar) .pc-sidebar-brand strong { font-size:15px!important; }
body:has(.sidebar) .pc-sidebar-collapse { top:16px; right:7px; width:23px; height:23px; }
body:has(.sidebar) .pc-nav-search {
  min-height:36px;
  margin:2px 2px 6px;
  padding:6px 9px;
  gap:8px;
}
body:has(.sidebar) .pc-nav-search input { font-size:12.5px; }
body:has(.sidebar) .pc-nav-heading { padding:8px 10px 3px; font-size:9.5px; }
body:has(.sidebar) .sidebar .nav-link {
  min-height:36px;
  margin:1px 0;
  padding:7px 10px!important;
  gap:9px;
  border-radius:7px;
  font-size:13.5px;
  line-height:1.2;
}
body:has(.sidebar) .sidebar .collapse .nav-link { padding-left:24px!important; }
body:has(.sidebar) .sidebar .nav-link i { width:16px; margin:0; font-size:13px; }
body:has(.sidebar) .sidebar .nav-link kbd { padding:2px 4px; font-size:9px; }
body:has(.sidebar) .pc-sidebar-theme {
  min-height:36px;
  margin:8px 0 4px;
  padding:7px 9px;
  font-size:12px;
}
body:has(.sidebar) .pc-sidebar-account {
  grid-template-columns:34px minmax(0,1fr) auto;
  min-height:52px;
  gap:8px;
  padding:7px 8px;
}
body:has(.sidebar) .pc-sidebar-account .pc-avatar { width:34px; height:34px; font-size:10px; }
body:has(.sidebar) .pc-account-copy strong { font-size:12px; }
body:has(.sidebar) .pc-account-copy small { font-size:10px; }

body:has(.sidebar) .main-content {
  margin-left:var(--sidebar-width)!important;
  max-width:none;
  padding:16px 20px 64px!important;
  line-height:1.45;
}
body:has(.sidebar) .main-content > * + * { margin-top:16px; }
body:has(.sidebar) .main-content > .container-fluid,
body:has(.sidebar) .main-content > .container { max-width:none; padding-inline:0!important; }
body:has(.sidebar) .main-content h1 { font-size:30px; letter-spacing:-.035em; }
body:has(.sidebar) .main-content h2 { font-size:24px; letter-spacing:-.025em; }
body:has(.sidebar) .main-content h3 { margin-bottom:12px!important; font-size:28px; letter-spacing:-.03em; }
body:has(.sidebar) .main-content h4 { margin:16px 0 10px; font-size:21px; letter-spacing:-.02em; }
body:has(.sidebar) .main-content h5 { margin:16px 0 10px!important; font-size:18px; }

body:has(.sidebar) .main-content .metrics-row,
body:has(.sidebar) .main-content .summary-cards,
body:has(.sidebar) .main-content .row.g-3 {
  --bs-gutter-x:12px;
  --bs-gutter-y:12px;
}
body:has(.sidebar) .main-content .metrics-row { margin-bottom:16px; }
body:has(.sidebar) .main-content .metrics-row .card,
body:has(.sidebar) .main-content .summary-cards .card {
  min-height:108px!important;
  margin-bottom:0!important;
  padding:14px 16px!important;
  border-radius:10px!important;
  border-top-width:2px!important;
  box-shadow:0 5px 16px rgba(0,0,0,.14)!important;
}
body:has(.sidebar) .main-content .metrics-row .card:hover,
body:has(.sidebar) .main-content .summary-cards .card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
}
body:has(.sidebar) .metrics-title {
  font-size:11.5px!important;
  line-height:1.3;
  letter-spacing:.06em;
}
body:has(.sidebar) .metrics-value {
  margin:7px 0 0;
  font-size:34px!important;
  line-height:1;
  letter-spacing:-.035em;
}
body:has(.sidebar) .metric-icon { top:12px; right:12px; width:34px; height:34px; border-radius:9px; font-size:14px; }

body:has(.sidebar) .main-content .card {
  border-radius:10px!important;
  box-shadow:0 5px 16px rgba(0,0,0,.12)!important;
}
body:has(.sidebar) .main-content .card-header { min-height:40px; padding:9px 13px; font-size:13px; }
body:has(.sidebar) .main-content .card-body { padding:12px 14px; }
body:has(.sidebar) .chart-panel { padding:12px; border-radius:10px; }
body:has(.sidebar) .chart-panel .chart-container { height:260px!important; min-height:220px; }

body:has(.sidebar) .main-content form.mb-4,
body:has(.sidebar) .main-content .filter-form {
  margin-bottom:16px!important;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:10px;
  background:color-mix(in srgb, var(--surface-color) 94%, transparent);
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
body:has(.sidebar) .main-content form .row { --bs-gutter-x:12px; --bs-gutter-y:8px; }
body:has(.sidebar) .main-content form .row.mt-3 { margin-top:8px!important; }
body:has(.sidebar) .main-content label,
body:has(.sidebar) .main-content .form-label {
  margin-bottom:4px;
  font-size:11.5px;
  line-height:1.25;
}
body:has(.sidebar) .main-content .form-control,
body:has(.sidebar) .main-content .form-select,
body:has(.sidebar) .main-content .input-group-text {
  min-height:38px;
  padding:7px 10px;
  border-radius:8px;
  font-size:13px;
}
body:has(.sidebar) .main-content .btn {
  min-height:36px;
  padding:7px 12px;
  border-radius:8px;
  font-size:12.5px;
}
body:has(.sidebar) .main-content .btn-sm,
body:has(.sidebar) .main-content .table .btn { min-height:30px; padding:5px 8px; font-size:11.5px; }

body:has(.sidebar) .main-content .table { margin-bottom:0; }
body:has(.sidebar) .main-content .table thead th {
  height:40px;
  padding:8px 11px;
  font-size:10.5px;
  line-height:1.25;
}
body:has(.sidebar) .main-content .table tbody td {
  min-height:40px;
  padding:9px 11px;
  font-size:12.5px;
  line-height:1.35;
}
body:has(.sidebar) .main-content .alert { margin-bottom:12px!important; padding:9px 12px; font-size:12.5px; }
body:has(.sidebar) .pagination { margin-top:12px; }
body:has(.sidebar) .page-link { min-width:34px; min-height:34px; padding:5px 9px; }

@media (min-width:992px) {
  :root[data-ui-sidebar="compact"] body:has(.sidebar) { --sidebar-width:76px; }
  :root[data-ui-sidebar="compact"] body:has(.sidebar) .sidebar .collapse .nav-link { padding-left:10px!important; }
}
@media (max-width:1199.98px) and (min-width:992px) {
  body:has(.sidebar) { --sidebar-width:208px; }
  body:has(.sidebar) .advertiser-portal-navbar .navbar-brand { flex-basis:210px; min-width:160px; font-size:14px!important; }
  body:has(.sidebar) .advertiser-navbar-stats .badge { padding-inline:8px; }
  body:has(.sidebar) .main-content { padding-inline:16px!important; }
}
@media (max-width:991.98px) {
  body:has(.sidebar) { --sidebar-width:224px; --navbar-height:60px; }
  body:has(.sidebar) > .navbar { padding:8px 12px!important; }
  body:has(.sidebar) .advertiser-portal-navbar .container-fluid { flex-wrap:wrap; }
  body:has(.sidebar) .main-content { margin-left:0!important; padding:14px 14px 56px!important; }
  body:has(.sidebar) .sidebar .nav-link { min-height:42px; padding-block:9px!important; }
  body:has(.sidebar) .main-content .metrics-row .card,
  body:has(.sidebar) .main-content .summary-cards .card { min-height:104px!important; }
  body:has(.sidebar) .main-content .form-control,
  body:has(.sidebar) .main-content .form-select,
  body:has(.sidebar) .main-content .btn { min-height:42px; }
}
@media (max-width:575.98px) {
  body:has(.sidebar) .main-content h1 { font-size:27px; }
  body:has(.sidebar) .main-content h2 { font-size:23px; }
  body:has(.sidebar) .main-content h3 { font-size:25px; }
  body:has(.sidebar) .main-content h4 { font-size:19px; }
  body:has(.sidebar) .metrics-value { font-size:32px!important; }
  body:has(.sidebar) .main-content .metrics-row .card,
  body:has(.sidebar) .main-content .summary-cards .card { min-height:96px!important; padding:12px 14px!important; }
  body:has(.sidebar) .main-content .form-control,
  body:has(.sidebar) .main-content .form-select,
  body:has(.sidebar) .main-content .btn { min-height:44px; }
  body:has(.sidebar) .main-content .metrics-row > [class*="col-"],
  body:has(.sidebar) .main-content .summary-cards > [class*="col-"] { width:50%; }
}
@media (max-width:359.98px) {
  body:has(.sidebar) .main-content .metrics-row > [class*="col-"],
  body:has(.sidebar) .main-content .summary-cards > [class*="col-"] { width:100%; }
}

/* Theme-aware data surfaces. Overrides legacy fixed black/white table colors. */
body:has(.sidebar) {
  --data-header-bg:color-mix(in srgb, var(--primary-color) 42%, #111a2c);
  --data-header-border:color-mix(in srgb, var(--accent-color) 38%, rgba(255,255,255,.13));
  --data-header-text:#f8faff;
  --data-row-bg:color-mix(in srgb, var(--surface-color) 96%, var(--primary-color) 4%);
  --data-row-alt:color-mix(in srgb, var(--surface-color) 91%, var(--primary-color) 9%);
  --data-row-hover:color-mix(in srgb, var(--surface-raised) 78%, var(--primary-color) 22%);
  --data-footer-bg:color-mix(in srgb, var(--surface-raised) 78%, var(--primary-color) 22%);
  --data-border:color-mix(in srgb, var(--primary-color) 20%, var(--border-color));
  --data-text:var(--text-color);
}
:root[data-ui-theme="light"] body:has(.sidebar) {
  --data-header-bg:color-mix(in srgb, var(--primary-color) 58%, #293246);
  --data-header-border:color-mix(in srgb, var(--primary-color) 58%, rgba(255,255,255,.38));
  --data-header-text:#fff;
  --data-row-bg:color-mix(in srgb, #fff 96%, var(--primary-color) 4%);
  --data-row-alt:color-mix(in srgb, #fff 91%, var(--primary-color) 9%);
  --data-row-hover:color-mix(in srgb, #fff 82%, var(--primary-color) 18%);
  --data-footer-bg:color-mix(in srgb, #fff 78%, var(--primary-color) 22%);
  --data-border:color-mix(in srgb, var(--primary-color) 24%, rgba(42,52,75,.14));
  --data-text:#202637;
}
body:has(.sidebar) .main-content .table-responsive {
  color:var(--data-text);
  background:var(--data-row-bg)!important;
  border-color:var(--data-border)!important;
}
body:has(.sidebar) .main-content table.table,
body:has(.sidebar) .main-content table.campaign-table,
body:has(.sidebar) .main-content table.did-table {
  --bs-table-bg:var(--data-row-bg);
  --bs-table-color:var(--data-text);
  --bs-table-striped-bg:var(--data-row-alt);
  --bs-table-striped-color:var(--data-text);
  --bs-table-hover-bg:var(--data-row-hover);
  --bs-table-hover-color:var(--data-text);
  color:var(--data-text)!important;
  background:var(--data-row-bg)!important;
  border-color:var(--data-border)!important;
}
body:has(.sidebar) .main-content table.table > thead,
body:has(.sidebar) .main-content table.table > thead.table-dark,
body:has(.sidebar) .main-content table.table > thead > tr,
body:has(.sidebar) .main-content table.table > thead > tr > th,
body:has(.sidebar) .main-content table.campaign-table > thead > tr > th,
body:has(.sidebar) .main-content table.did-table > thead > tr > th {
  color:var(--data-header-text)!important;
  background:var(--data-header-bg)!important;
  background-color:var(--data-header-bg)!important;
  border-color:var(--data-header-border)!important;
  box-shadow:none!important;
}
body:has(.sidebar) .main-content table.table > thead a,
body:has(.sidebar) .main-content table.campaign-table > thead a,
body:has(.sidebar) .main-content table.did-table > thead a {
  color:var(--data-header-text)!important;
}
body:has(.sidebar) .main-content table.table > tbody > tr > *,
body:has(.sidebar) .main-content table.campaign-table > tbody > tr > *,
body:has(.sidebar) .main-content table.did-table > tbody > tr > * {
  color:var(--data-text)!important;
  background:var(--data-row-bg)!important;
  background-color:var(--data-row-bg)!important;
  border-color:var(--data-border)!important;
  box-shadow:none!important;
}
body:has(.sidebar) .main-content table.table.table-striped > tbody > tr:nth-of-type(even) > *,
body:has(.sidebar) .main-content table.campaign-table.table-striped > tbody > tr:nth-of-type(even) > *,
body:has(.sidebar) .main-content table.did-table.table-striped > tbody > tr:nth-of-type(even) > * {
  background:var(--data-row-alt)!important;
  background-color:var(--data-row-alt)!important;
}
body:has(.sidebar) .main-content table.table > tbody > tr:hover > *,
body:has(.sidebar) .main-content table.campaign-table > tbody > tr:hover > *,
body:has(.sidebar) .main-content table.did-table > tbody > tr:hover > * {
  color:var(--data-text)!important;
  background:var(--data-row-hover)!important;
  background-color:var(--data-row-hover)!important;
}
body:has(.sidebar) .main-content table.table > tbody > tr:hover > *:first-child {
  box-shadow:inset 3px 0 var(--primary-color)!important;
}
body:has(.sidebar) .main-content table.table > tfoot,
body:has(.sidebar) .main-content table.table > tfoot.table-secondary,
body:has(.sidebar) .main-content table.table > tfoot > tr,
body:has(.sidebar) .main-content table.table > tfoot > tr > * {
  color:var(--data-text)!important;
  background:var(--data-footer-bg)!important;
  background-color:var(--data-footer-bg)!important;
  border-color:var(--data-border)!important;
  box-shadow:none!important;
}
body:has(.sidebar) .main-content .sortable-header:hover,
body:has(.sidebar) .main-content .sortable-header:focus {
  color:var(--data-header-text)!important;
  background:color-mix(in srgb, var(--primary-color) 74%, transparent)!important;
}
body:has(.sidebar) .main-content .sortable-header.active-sort {
  color:#fff!important;
  background:color-mix(in srgb, var(--primary-color) 82%, #172038)!important;
  box-shadow:inset 0 -3px var(--accent-color)!important;
}
body:has(.sidebar) .main-content .sort-inactive { color:color-mix(in srgb, var(--data-header-text) 66%, transparent); }
body:has(.sidebar) .main-content table.table input[type="checkbox"] { accent-color:var(--primary-color); }

/* Dashboard analytics. Scoped to the Dashboard so every other page keeps its layout. */
body:has(#page-content.dashboard-page) {
  background-color:var(--background-color)!important;
  background-image:radial-gradient(circle at 82% -10%,color-mix(in srgb,var(--primary-color) 16%,transparent),transparent 30rem)!important;
}
#page-content.dashboard-page {
  --dashboard-blue:var(--primary-color);
  --dashboard-blue-soft:var(--accent-color);
  --dashboard-green:#38c793;
  --dashboard-red:#ef6472;
  --dashboard-indigo:#718df5;
  padding-bottom:54px!important;
}
#page-content.dashboard-page .container-fluid { max-width:1680px; }
#page-content.dashboard-page .dashboard-heading-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}
#page-content.dashboard-page .dashboard-heading-row h3 {
  margin:0;
  color:var(--text-color);
  font-size:clamp(1.45rem,2.2vw,1.8rem)!important;
  font-weight:800;
  letter-spacing:-.035em;
}
#page-content.dashboard-page .dashboard-range {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:5px 10px;
  color:var(--muted-color);
  background:color-mix(in srgb,var(--surface-raised) 84%,transparent);
  border:1px solid var(--border-color);
  border-radius:8px;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
#page-content.dashboard-page .dashboard-range i { color:var(--accent-color); }
#page-content.dashboard-page .dashboard-metric-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
#page-content.dashboard-page .dashboard-metric {
  --metric-color:var(--dashboard-blue);
  position:relative;
  min-width:0;
  min-height:112px;
  padding:14px 15px;
  color:var(--text-color);
  background:
    linear-gradient(125deg,color-mix(in srgb,var(--metric-color) 15%,var(--surface-color)),color-mix(in srgb,var(--surface-color) 96%,transparent));
  border:1px solid color-mix(in srgb,var(--metric-color) 58%,var(--border-color));
  border-radius:11px;
  box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#page-content.dashboard-page .dashboard-metric::after {
  content:"";
  position:absolute;
  right:-38px;
  bottom:-55px;
  width:140px;
  height:140px;
  background:radial-gradient(circle,color-mix(in srgb,var(--metric-color) 20%,transparent),transparent 69%);
  border-radius:50%;
  pointer-events:none;
}
#page-content.dashboard-page .dashboard-metric:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--metric-color) 78%,var(--border-color));
  box-shadow:0 12px 28px color-mix(in srgb,var(--metric-color) 13%,rgba(0,0,0,.2));
}
#page-content.dashboard-page .metric-buyer,
#page-content.dashboard-page .metric-revenue,
#page-content.dashboard-page .metric-profit { --metric-color:var(--dashboard-green); }
#page-content.dashboard-page .metric-publisher { --metric-color:var(--dashboard-indigo); }
#page-content.dashboard-page .metric-duration { --metric-color:#8794a9; }
#page-content.dashboard-page .metric-cost { --metric-color:var(--dashboard-red); }
#page-content.dashboard-page .dashboard-metric-head,
#page-content.dashboard-page .dashboard-metric-body {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#page-content.dashboard-page .dashboard-metric-head { justify-content:flex-start; }
#page-content.dashboard-page .dashboard-metric-icon {
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  color:color-mix(in srgb,var(--metric-color) 82%,white);
  background:color-mix(in srgb,var(--metric-color) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--metric-color) 25%,transparent);
  border-radius:9px;
  font-size:1rem;
}
#page-content.dashboard-page .dashboard-metric .metrics-title {
  min-width:0;
  color:var(--text-color)!important;
  font-size:.74rem!important;
  font-weight:800!important;
  letter-spacing:.025em;
  line-height:1.25;
  text-transform:uppercase;
}
#page-content.dashboard-page .dashboard-metric-body { margin-top:10px; }
#page-content.dashboard-page .dashboard-metric .metrics-value {
  margin:0;
  color:var(--text-color)!important;
  font-size:clamp(1.65rem,2.6vw,2.15rem)!important;
  font-weight:850!important;
  line-height:1;
  letter-spacing:-.045em;
}
#page-content.dashboard-page .dashboard-metric-mark {
  color:var(--metric-color);
  font-size:1.55rem;
  filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--metric-color) 32%,transparent));
}
#page-content.dashboard-page .dashboard-metric-signal {
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:29px;
}
#page-content.dashboard-page .dashboard-metric-signal i {
  width:6px;
  height:7px;
  background:var(--metric-color);
  border-radius:2px 2px 0 0;
  opacity:.88;
}
#page-content.dashboard-page .dashboard-metric-signal i:nth-child(2) { height:11px; }
#page-content.dashboard-page .dashboard-metric-signal i:nth-child(3) { height:19px; }
#page-content.dashboard-page .dashboard-metric-signal i:nth-child(4) { height:27px; }
#page-content.dashboard-page .dashboard-metric-signal i:nth-child(5) { height:17px; }
#page-content.dashboard-page .dashboard-metric-signal i:nth-child(6) { height:24px; }

#page-content.dashboard-page .filter-container {
  margin:0 0 14px!important;
  padding:12px 14px!important;
  background:color-mix(in srgb,var(--surface-color) 96%,transparent)!important;
  border:1px solid var(--border-color)!important;
  border-radius:11px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.1)!important;
}
#page-content.dashboard-page .dashboard-filter-title {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 9px;
  color:var(--text-color);
  font-size:.88rem!important;
  font-weight:800;
}
#page-content.dashboard-page .dashboard-filter-title i { color:var(--accent-color); }
#page-content.dashboard-page .dashboard-filter-form .row { row-gap:8px; }
#page-content.dashboard-page .dashboard-filter-form .mt-3 { margin-top:8px!important; }
#page-content.dashboard-page .dashboard-filter-form label { margin-bottom:4px; font-size:.68rem; }
#page-content.dashboard-page .dashboard-filter-form .form-control,
#page-content.dashboard-page .dashboard-filter-form .form-select { min-height:36px!important; height:36px; padding-block:5px!important; font-size:.76rem; }
#page-content.dashboard-page .dashboard-filter-form .btn { min-height:34px; padding:6px 14px; font-size:.76rem; }

#page-content.dashboard-page .dashboard-analytics-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) repeat(2,minmax(220px,1fr));
  grid-template-rows:repeat(2,minmax(190px,1fr));
  gap:12px;
}
#page-content.dashboard-page .dashboard-chart-panel {
  min-width:0;
  padding:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 35%,var(--surface-color)),var(--surface-color));
  border:1px solid var(--border-color);
  border-radius:11px;
  box-shadow:0 8px 22px rgba(0,0,0,.1);
  overflow:hidden;
}
#page-content.dashboard-page .dashboard-trend-panel {
  grid-row:span 2;
  border-color:color-mix(in srgb,var(--primary-color) 34%,var(--border-color));
}
#page-content.dashboard-page .dashboard-chart-panel header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
#page-content.dashboard-page .dashboard-panel-kicker {
  display:block;
  margin-bottom:2px;
  color:var(--accent-color);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
#page-content.dashboard-page .dashboard-chart-panel h5 {
  margin:0;
  color:var(--text-color);
  font-size:.86rem!important;
  font-weight:800;
}
#page-content.dashboard-page .dashboard-panel-total {
  color:var(--muted-color);
  font-size:.68rem;
  font-weight:700;
  white-space:nowrap;
}
#page-content.dashboard-page .dashboard-panel-icon {
  color:var(--accent-color);
  font-size:1rem;
}
#page-content.dashboard-page .dashboard-chart-canvas { position:relative; height:142px; }
#page-content.dashboard-page .dashboard-chart-large { height:356px; }

:root[data-ui-theme="light"] #page-content.dashboard-page .dashboard-metric {
  background:linear-gradient(125deg,color-mix(in srgb,var(--metric-color) 9%,#fff),#fff);
  box-shadow:0 8px 22px rgba(30,42,68,.08);
}
:root[data-ui-theme="light"] #page-content.dashboard-page .dashboard-chart-panel,
:root[data-ui-theme="light"] #page-content.dashboard-page .filter-container { box-shadow:0 8px 22px rgba(30,42,68,.07)!important; }

@media(max-width:1199.98px) {
  #page-content.dashboard-page .dashboard-analytics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }
  #page-content.dashboard-page .dashboard-trend-panel { grid-column:1/-1; grid-row:auto; }
  #page-content.dashboard-page .dashboard-chart-large { height:290px; }
}
@media(max-width:991.98px) {
  #page-content.dashboard-page .dashboard-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:575.98px) {
  #page-content.dashboard-page .dashboard-heading-row { align-items:flex-start; flex-direction:column; }
  #page-content.dashboard-page .dashboard-range { white-space:normal; }
  #page-content.dashboard-page .dashboard-metric-grid,
  #page-content.dashboard-page .dashboard-analytics-grid { grid-template-columns:1fr; }
  #page-content.dashboard-page .dashboard-trend-panel { grid-column:auto; }
  #page-content.dashboard-page .dashboard-chart-large { height:240px; }
  #page-content.dashboard-page .dashboard-chart-canvas { height:180px; }
}

/* Call Logs filtered summary. The table, filters, and page behavior are untouched. */
body:has(#page-content.calllog-page) {
  background-color:var(--background-color)!important;
  background-image:radial-gradient(circle at 82% -10%,color-mix(in srgb,var(--primary-color) 14%,transparent),transparent 30rem)!important;
}
#page-content.calllog-page .calllog-summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 14px;
}
#page-content.calllog-page .calllog-summary-card {
  --summary-color:var(--primary-color);
  position:relative;
  min-width:0;
  height:126px;
  padding:9px 12px 28px;
  color:var(--text-color);
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--summary-color) 10%,var(--surface-raised)),color-mix(in srgb,var(--surface-color) 96%,transparent));
  border:1px solid color-mix(in srgb,var(--summary-color) 28%,var(--border-color));
  border-radius:8px;
  box-shadow:0 7px 18px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#page-content.calllog-page .calllog-summary-card:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--summary-color) 58%,var(--border-color));
  box-shadow:0 11px 24px color-mix(in srgb,var(--summary-color) 12%,rgba(0,0,0,.2));
}
#page-content.calllog-page .summary-calls,
#page-content.calllog-page .summary-revenue { --summary-color:#3aa7f2; }
#page-content.calllog-page .summary-buyer,
#page-content.calllog-page .summary-profit { --summary-color:#38c793; }
#page-content.calllog-page .summary-affiliate { --summary-color:#e6a331; }
#page-content.calllog-page .summary-publisher { --summary-color:#a46be0; }
#page-content.calllog-page .summary-payout,
#page-content.calllog-page .summary-cost { --summary-color:#e35660; }
#page-content.calllog-page .calllog-summary-card header {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 28px;
  align-items:center;
  min-height:28px;
}
#page-content.calllog-page .calllog-summary-card header span {
  grid-column:2;
  overflow:hidden;
  color:var(--text-color);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.15;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
#page-content.calllog-page .calllog-summary-card header i {
  grid-column:3;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#fff;
  background:var(--summary-color);
  border:1px solid color-mix(in srgb,var(--summary-color) 72%,white);
  border-radius:7px;
  box-shadow:0 5px 12px color-mix(in srgb,var(--summary-color) 30%,transparent);
  font-size:.88rem;
}
#page-content.calllog-page .calllog-summary-card > strong {
  display:block;
  margin:-2px 0 0;
  color:var(--text-color);
  font-size:clamp(1.45rem,2.35vw,1.9rem);
  font-weight:850;
  letter-spacing:-.045em;
  line-height:1.05;
  text-align:center;
}
#page-content.calllog-page .calllog-summary-rate {
  display:block;
  margin-top:1px;
  color:var(--summary-color);
  font-size:.64rem;
  font-weight:800;
  line-height:1;
  text-align:center;
}
#page-content.calllog-page .calllog-summary-line {
  position:relative;
  display:block;
  height:13px;
  margin:1px 0 0;
  opacity:.88;
  background:
    linear-gradient(172deg,transparent 0 28%,color-mix(in srgb,var(--summary-color) 28%,transparent) 29% 42%,transparent 43% 100%);
  border-bottom:2px solid var(--summary-color);
}
#page-content.calllog-page .calllog-summary-line::after {
  content:"";
  position:absolute;
  inset:auto 0 -3px;
  height:6px;
  background:radial-gradient(circle,var(--summary-color) 0 2px,transparent 2.4px) 0 0/20% 6px repeat-x;
}
#page-content.calllog-page .calllog-summary-footer {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  min-height:23px;
  padding:4px 7px;
  overflow:hidden;
  color:color-mix(in srgb,var(--text-color) 92%,transparent);
  background:color-mix(in srgb,var(--summary-color) 32%,transparent);
  border-top:1px solid color-mix(in srgb,var(--summary-color) 38%,transparent);
  font-size:.61rem;
  line-height:1.25;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
:root[data-ui-theme="light"] #page-content.calllog-page .calllog-summary-card {
  background:linear-gradient(145deg,color-mix(in srgb,var(--summary-color) 7%,#fff),#fff);
  box-shadow:0 7px 18px rgba(30,42,68,.08);
}
:root[data-ui-theme="light"] #page-content.calllog-page .calllog-summary-footer {
  color:color-mix(in srgb,var(--text-color) 90%,transparent);
  background:color-mix(in srgb,var(--summary-color) 18%,#fff);
}
@media(max-width:1199.98px) {
  #page-content.calllog-page .calllog-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:575.98px) {
  #page-content.calllog-page .calllog-summary-grid { gap:8px; }
  #page-content.calllog-page .calllog-summary-card { height:116px; padding:8px 8px 26px; }
  #page-content.calllog-page .calllog-summary-card header { grid-template-columns:24px minmax(0,1fr) 24px; }
  #page-content.calllog-page .calllog-summary-card header span { font-size:.58rem; }
  #page-content.calllog-page .calllog-summary-card header i { width:24px; height:24px; font-size:.75rem; }
  #page-content.calllog-page .calllog-summary-card > strong { font-size:1.35rem; }
  #page-content.calllog-page .calllog-summary-footer { font-size:.53rem; }
}

/* Theme-aware content surfaces shared by every authenticated page. */
body:has(.sidebar) .bulk-toolbar,
body:has(.sidebar) .did-list-shell,
body:has(.sidebar) .auto-convert-panel,
body:has(.sidebar) .no-records-container {
  color:var(--text-color)!important;
  background:var(--surface-color)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-sm)!important;
}
body:has(.sidebar) .bulk-toolbar .text-muted,
body:has(.sidebar) .did-list-shell .text-muted { color:var(--muted-color)!important; }
body:has(.sidebar) .did-list-shell { overflow:hidden; }
body:has(.sidebar) .did-list-scroll {
  overflow-x:auto!important;
  overflow-y:auto!important;
  background:var(--surface-color)!important;
}

/* Keep the complete DID column chooser visible on ordinary desktop screens. */
#didColumnsModal .modal-dialog {
  width:calc(100% - 24px);
  max-width:1120px;
  margin:12px auto;
}
#didColumnsModal .modal-dialog > form { width:100%; }
#didColumnsModal .modal-content {
  max-height:calc(100dvh - 24px);
  color:var(--text-color);
  background:var(--surface-color);
  border-color:var(--border-color);
}
#didColumnsModal .modal-header,
#didColumnsModal .modal-footer { padding:10px 14px; }
#didColumnsModal .modal-body {
  max-height:none!important;
  padding:10px 14px!important;
  overflow:visible!important;
}
#didColumnsModal .modal-body > p { margin-bottom:8px!important; font-size:.75rem; }
#didColumnsModal .modal-body .d-flex.mb-3 { margin-bottom:8px!important; }
#didColumnsModal .did-column-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
#didColumnsModal .did-column-grid .form-check {
  min-width:0;
  min-height:34px;
  margin:0;
  padding:6px 8px 6px 34px!important;
  color:var(--text-color);
  background:var(--surface-raised)!important;
  border-color:var(--border-color)!important;
}
#didColumnsModal .did-column-grid .form-check-input { margin-top:2px; }
#didColumnsModal .did-column-grid .form-check-label {
  display:block;
  overflow:hidden;
  font-size:.7rem;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#didColumnsModal .form-text { margin-top:7px!important; font-size:.68rem; }
@media(max-width:991.98px) {
  #didColumnsModal .did-column-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:767.98px), (max-height:599px) {
  #didColumnsModal .modal-body {
    max-height:calc(100dvh - 142px)!important;
    overflow-y:auto!important;
  }
  #didColumnsModal .did-column-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:439.98px) {
  #didColumnsModal .did-column-grid { grid-template-columns:1fr; }
}

/* Keep the application footer below dialogs and their actions. */
body.modal-open footer {
  visibility:hidden!important;
  pointer-events:none!important;
}
.modal-backdrop { z-index:1240!important; }
.modal { z-index:1250!important; }
#didColumnsModal {
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  overflow:hidden!important;
}
#didColumnsModal.show {
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#didColumnsModal .modal-dialog {
  margin:0 auto!important;
  transform:none!important;
}
#didColumnsModal .modal-content {
  border:1px solid color-mix(in srgb,var(--primary-color) 34%,var(--border-color));
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.48);
  overflow:hidden;
}
#didColumnsModal .modal-header {
  min-height:56px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--primary-color) 15%,var(--surface-raised)),var(--surface-raised))!important;
}
#didColumnsModal .modal-title { font-size:1.05rem!important; letter-spacing:-.015em; }
#didColumnsModal .modal-footer {
  position:relative;
  z-index:2;
  min-height:54px;
  background:var(--surface-raised)!important;
  border-top:1px solid var(--border-color)!important;
}

/* Shared visual summary cards for Buyer, Campaign, Publisher, and Inbound DID. */
#page-content.entity-summary-page .entity-stat-grid {
  display:grid;
  gap:10px;
  margin:0 0 16px;
}
#page-content.entity-summary-page .entity-stat-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
#page-content.entity-summary-page .entity-stat-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
#page-content.entity-summary-page .entity-stat-grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
#page-content.entity-summary-page .entity-stat-grid-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
#page-content.entity-summary-page .entity-stat-card {
  --stat-color:var(--primary-color);
  position:relative;
  min-width:0;
  height:142px;
  padding:36px 11px 27px;
  color:var(--text-color);
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--stat-color) 17%,var(--surface-raised)),color-mix(in srgb,var(--surface-color) 96%,transparent));
  border:1px solid color-mix(in srgb,var(--stat-color) 38%,var(--border-color));
  border-radius:8px;
  box-shadow:0 7px 18px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#page-content.entity-summary-page .entity-stat-card:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--stat-color) 68%,var(--border-color));
  box-shadow:0 11px 26px color-mix(in srgb,var(--stat-color) 14%,rgba(0,0,0,.2));
}
#page-content.entity-summary-page .stat-blue { --stat-color:#45a9e9; }
#page-content.entity-summary-page .stat-green { --stat-color:#38c786; }
#page-content.entity-summary-page .stat-amber { --stat-color:#d99742; }
#page-content.entity-summary-page .stat-yellow { --stat-color:#dfc52e; }
#page-content.entity-summary-page .stat-orange { --stat-color:#ea8c12; }
#page-content.entity-summary-page .stat-red { --stat-color:#e04e54; }
#page-content.entity-summary-page .stat-slate { --stat-color:#8796a5; }
#page-content.entity-summary-page .entity-stat-card > header {
  position:absolute;
  inset:0 0 auto;
  min-height:29px;
  padding:6px 9px;
  overflow:hidden;
  color:#fff;
  background:color-mix(in srgb,var(--stat-color) 55%,var(--surface-raised));
  border-bottom:1px solid color-mix(in srgb,var(--stat-color) 48%,transparent);
  font-size:.66rem;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
#page-content.entity-summary-page .entity-stat-card > i {
  position:absolute;
  top:39px;
  right:10px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:#fff;
  background:color-mix(in srgb,var(--stat-color) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--stat-color) 70%,white);
  border-radius:8px;
  box-shadow:0 5px 13px color-mix(in srgb,var(--stat-color) 30%,transparent);
  font-size:1.05rem;
}
#page-content.entity-summary-page .entity-stat-card > strong {
  display:block;
  margin:0 35px 0 0;
  color:var(--text-color);
  font-size:clamp(1.8rem,3vw,2.35rem);
  font-weight:850;
  letter-spacing:-.05em;
  line-height:1.05;
  text-align:center;
}
#page-content.entity-summary-page .entity-stat-rate {
  display:block;
  margin:2px 35px 0 0;
  color:var(--stat-color);
  font-size:.68rem;
  font-weight:800;
  line-height:1;
  text-align:center;
}
#page-content.entity-summary-page .entity-stat-line {
  position:absolute;
  right:10px;
  bottom:32px;
  left:10px;
  height:12px;
  opacity:.86;
  background:linear-gradient(172deg,transparent 0 36%,color-mix(in srgb,var(--stat-color) 25%,transparent) 37% 55%,transparent 56% 100%);
  border-bottom:2px solid var(--stat-color);
}
#page-content.entity-summary-page .entity-stat-line::after {
  content:"";
  position:absolute;
  inset:auto 0 -3px;
  height:6px;
  background:radial-gradient(circle,var(--stat-color) 0 2px,transparent 2.4px) 0 0/25% 6px repeat-x;
}
#page-content.entity-summary-page .entity-stat-footer {
  position:absolute;
  inset:auto 0 0;
  min-height:24px;
  padding:5px 7px;
  overflow:hidden;
  color:color-mix(in srgb,var(--text-color) 94%,transparent);
  background:color-mix(in srgb,var(--stat-color) 34%,transparent);
  border-top:1px solid color-mix(in srgb,var(--stat-color) 42%,transparent);
  font-size:.59rem;
  line-height:1.25;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
:root[data-ui-theme="light"] #page-content.entity-summary-page .entity-stat-card {
  background:linear-gradient(150deg,color-mix(in srgb,var(--stat-color) 9%,#fff),#fff);
  box-shadow:0 7px 18px rgba(30,42,68,.08);
}
:root[data-ui-theme="light"] #page-content.entity-summary-page .entity-stat-card > header { color:#fff; }
:root[data-ui-theme="light"] #page-content.entity-summary-page .entity-stat-footer {
  color:var(--text-color);
  background:color-mix(in srgb,var(--stat-color) 19%,#fff);
}
@media(max-width:1199.98px) {
  #page-content.entity-summary-page .entity-stat-grid-5,
  #page-content.entity-summary-page .entity-stat-grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:767.98px) {
  #page-content.entity-summary-page .entity-stat-grid-3,
  #page-content.entity-summary-page .entity-stat-grid-4,
  #page-content.entity-summary-page .entity-stat-grid-5,
  #page-content.entity-summary-page .entity-stat-grid-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-content.entity-summary-page .entity-stat-card { height:132px; padding-top:34px; }
  #page-content.entity-summary-page .entity-stat-card > header { font-size:.59rem; }
  #page-content.entity-summary-page .entity-stat-card > strong { font-size:1.7rem; }
}
@media(max-width:359.98px) {
  #page-content.entity-summary-page .entity-stat-grid-3,
  #page-content.entity-summary-page .entity-stat-grid-4,
  #page-content.entity-summary-page .entity-stat-grid-5,
  #page-content.entity-summary-page .entity-stat-grid-6 { grid-template-columns:1fr; }
}

/* Account period cards based on the supplied compact financial overview. */
#page-content.account-summary-page .account-overview-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px;
}
#page-content.account-summary-page .account-overview-heading h3 {
  margin:1px 0 0;
  color:var(--text-color);
  font-size:1.45rem;
  letter-spacing:-.025em;
}
#page-content.account-summary-page .account-overview-kicker {
  color:var(--primary-color);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
#page-content.account-summary-page .account-overview-heading > i {
  color:color-mix(in srgb,var(--primary-color) 78%,white);
  font-size:1.4rem;
}
#page-content.account-summary-page .account-period-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
#page-content.account-summary-page .account-period-card {
  --period-accent:#43d68f;
  position:relative;
  min-width:0;
  min-height:164px;
  overflow:hidden;
  padding:15px 15px 18px;
  color:var(--text-color);
  background:
    linear-gradient(122deg,rgba(255,255,255,.10) 0 48%,transparent 48.4%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 88%,#aeb7c4),var(--surface-color));
  border:1px solid color-mix(in srgb,var(--period-accent) 30%,var(--border-color));
  border-radius:12px;
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 7px 18px rgba(0,0,0,.14);
}
#page-content.account-summary-page .account-period-yesterday { --period-accent:#ef6969; }
#page-content.account-summary-page .account-period-card::after {
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--text-muted) 28%,transparent);
  border-radius:8px;
}
#page-content.account-summary-page .account-period-card header,
#page-content.account-summary-page .account-period-values,
#page-content.account-summary-page .account-period-line { position:relative; z-index:1; }
#page-content.account-summary-page .account-period-card header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
#page-content.account-summary-page .account-period-card h4 {
  margin:0 0 2px;
  color:var(--text-color);
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
}
#page-content.account-summary-page .account-period-card time {
  display:block;
  color:var(--text-muted);
  font-size:.72rem;
}
#page-content.account-summary-page .account-period-icon {
  display:grid;
  width:54px;
  height:34px;
  place-items:center;
  flex:0 0 auto;
  color:color-mix(in srgb,var(--text-color) 82%,transparent);
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
  border:1px solid color-mix(in srgb,var(--text-muted) 32%,transparent);
  border-radius:7px;
  box-shadow:inset 0 1px rgba(255,255,255,.18);
  font-size:1.3rem;
}
#page-content.account-summary-page .account-period-values {
  display:grid;
  gap:7px;
}
#page-content.account-summary-page .account-period-values > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#page-content.account-summary-page .account-period-values span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-color);
  font-size:.8rem;
  font-weight:650;
}
#page-content.account-summary-page .account-period-values strong {
  font-size:1.08rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
#page-content.account-summary-page .account-credit { color:#53c681; }
#page-content.account-summary-page .account-used { color:#f06b6b; }
#page-content.account-summary-page .account-period-line {
  position:absolute;
  right:28%;
  bottom:7px;
  left:28%;
  height:3px;
  background:var(--period-accent);
  border-radius:999px;
  box-shadow:0 0 10px color-mix(in srgb,var(--period-accent) 75%,transparent);
}
#page-content.account-summary-page .account-overview-note {
  margin:0 0 22px;
  color:var(--text-muted);
  font-size:.76rem;
  line-height:1.5;
}
[data-theme="light"] #page-content.account-summary-page .account-period-card {
  background:
    linear-gradient(122deg,rgba(255,255,255,.72) 0 48%,transparent 48.4%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 90%,#aeb7c4),var(--surface-color));
  box-shadow:inset 0 1px white,0 7px 18px rgba(36,48,68,.10);
}
@media(max-width:991.98px) {
  #page-content.account-summary-page .account-period-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:479.98px) {
  #page-content.account-summary-page .account-period-grid { grid-template-columns:1fr; }
  #page-content.account-summary-page .account-period-card { min-height:152px; }
}