/* ==========================================================================
   CLIENT THEME — warm, quiet, editorial (same language as admin-claude.css).
   Loaded LAST in <head> by app/views/layouts/client.php, after portal.css.
   Re-points every token family the older layers use (--p-*, --u-*, legacy),
   then restyles chrome, cards, tables, buttons, badges, forms; adds icon
   chips, empty-state illustrations (App\Core\Illustration) and motion.

   Palette (light → dark)
     canvas #FAF9F5 → #262624   sidebar #F3F1EA → #1F1E1D
     card   #FFFFFF → #30302E   hairline #E6E2D8 → #3E3D39
     ink    #141413 → #F5F4EE   accent = brand colour, else clay #C6613F → #D97757
   The layout prints --cl-brand / --cl-brand-dark / --cl-brand-on when a brand
   colour is set in Branding (child panels: the reseller's colour).
   Type: Inter for the interface, Source Serif 4 for page titles and big numbers.

   Sections: 1 tokens · 2 base · 3 sidebar · 4 top bar · 5 page header ·
   6 cards · 7 stat tiles & icon chips · 8 lists · 9 tables · 10 buttons ·
   11 badges · 12 forms · 13 alerts/toasts · 14 tabs · 15 dashboard ·
   16 empty states & illustrations · 17 page-specific heroes · 18 motion ·
   19 responsive · 20 reduced motion
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root, :root[data-theme="light"] {
  /* Blue & white hosting-panel palette (white surfaces, cool grey canvas, blue accent) */
  --cl-canvas: #f4f7fc; --cl-side: #ffffff; --cl-card: #ffffff; --cl-sunken: #f6f8fc; --cl-hover: rgba(37, 99, 235, .05); --cl-active: rgba(37, 99, 235, .09);
  --cl-line: #e2e8f0; --cl-line-soft: #edf1f7; --cl-line-strong: #cbd5e1;
  --cl-ink: #0f172a; --cl-ink-2: #334155; --cl-ink-3: #64748b; --cl-ink-4: #94a3b8;
  --cl-accent: var(--cl-brand, #2563eb);
  --cl-on-accent: var(--cl-brand-on, #ffffff);
  --cl-green: #15803d; --cl-green-soft: #dcfce7; --cl-amber: #b45309; --cl-amber-soft: #fef3c7; --cl-red: #dc2626; --cl-red-soft: #fee2e2;
  --cl-blue: #1d4ed8; --cl-blue-soft: #dbeafe; --cl-violet: #6d28d9; --cl-violet-soft: #ede9fe; --cl-teal: #0f766e; --cl-teal-soft: #ccfbf1;
  --cl-shadow-pop: 0 10px 30px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .06);
  --cl-shadow-lift: 0 6px 18px rgba(37, 99, 235, .10), 0 1px 2px rgba(15, 23, 42, .05);
}
:root[data-theme="dark"] {
  --cl-canvas: #0b1220; --cl-side: #0f172a; --cl-card: #111a2e; --cl-sunken: #0e1627; --cl-hover: rgba(96, 165, 250, .07); --cl-active: rgba(96, 165, 250, .13);
  --cl-line: #1e293b; --cl-line-soft: #172235; --cl-line-strong: #334155;
  --cl-ink: #e2e8f0; --cl-ink-2: #cbd5e1; --cl-ink-3: #94a3b8; --cl-ink-4: #64748b;
  --cl-accent: var(--cl-brand-dark, #3b82f6);
  --cl-green: #8fbf8a; --cl-green-soft: rgba(143, 191, 138, .14); --cl-amber: #e0b062; --cl-amber-soft: rgba(224, 176, 98, .14); --cl-red: #e8806b; --cl-red-soft: rgba(232, 128, 107, .15);
  --cl-blue: #8fb3dc; --cl-blue-soft: rgba(143, 179, 220, .14); --cl-violet: #b3a6dc; --cl-violet-soft: rgba(179, 166, 220, .14); --cl-teal: #85c2bb; --cl-teal-soft: rgba(133, 194, 187, .14);
  --cl-shadow-pop: 0 12px 36px rgba(0, 0, 0, .45);
  --cl-shadow-lift: 0 8px 22px rgba(0, 0, 0, .35);
}
/* derived accent shades (follow the brand colour automatically) */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --cl-accent-hover: color-mix(in srgb, var(--cl-accent) 86%, #000);
  --cl-accent-soft: color-mix(in srgb, var(--cl-accent) 11%, var(--cl-card));
  --cl-accent-soft-2: color-mix(in srgb, var(--cl-accent) 22%, var(--cl-card));
  --cl-accent-ring: color-mix(in srgb, var(--cl-accent) 24%, transparent);
  --cl-accent-ink: color-mix(in srgb, var(--cl-accent) 80%, var(--cl-ink));
  --cl-ease: cubic-bezier(.2, .7, .2, 1);
}

/* every older token family points at the palette */
:root, :root[data-theme="light"], :root[data-theme="dark"], body.is-client, body.is-guest {
  --p-primary: var(--cl-accent); --p-primary-hover: var(--cl-accent-hover); --p-primary-soft: var(--cl-accent-soft); --p-ring: var(--cl-accent-ring);
  --p-bg: var(--cl-canvas); --p-card: var(--cl-card); --p-border: var(--cl-line); --p-border-soft: var(--cl-line-soft); --p-hover: var(--cl-sunken);
  --p-text: var(--cl-ink); --p-text-2: var(--cl-ink-2); --p-text-3: var(--cl-ink-3); --p-muted: var(--cl-ink-4);
  --p-radius: 12px; --p-radius-sm: 8px; --p-shadow: none; --p-shadow-lg: var(--cl-shadow-lift); --p-shadow-pop: var(--cl-shadow-pop);
  --p-success: var(--cl-green); --p-success-soft: var(--cl-green-soft); --p-success-ink: var(--cl-green);
  --p-warning: var(--cl-amber); --p-warning-soft: var(--cl-amber-soft); --p-warning-ink: var(--cl-amber);
  --p-danger: var(--cl-red); --p-danger-soft: var(--cl-red-soft); --p-danger-ink: var(--cl-red);
  --p-info: var(--cl-blue); --p-info-soft: var(--cl-blue-soft); --p-info-ink: var(--cl-blue);
  --p-violet: var(--cl-violet); --p-violet-soft: var(--cl-violet-soft); --p-cyan: var(--cl-teal); --p-cyan-soft: var(--cl-teal-soft);
  --p-rose: var(--cl-red); --p-rose-soft: var(--cl-red-soft);

  --cl-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* hosting-panel look: headings, money and stats use the same sans font as the interface */
  --cl-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: var(--cl-font); --font-heading: var(--cl-font); --font-display: var(--cl-font); --u-font: var(--cl-font);
  --u-brand: var(--cl-accent); --u-brand-2: var(--cl-accent-hover); --u-brand-ink: var(--cl-accent); --u-brand-soft: var(--cl-accent-soft); --u-brand-ring: var(--cl-accent-ring);
  --u-amber: var(--cl-amber);
  --brand: var(--cl-accent); --brand-hover: var(--cl-accent-hover); --brand-ink: var(--cl-accent); --brand-soft: var(--cl-accent-soft); --brand-blue: var(--cl-accent); --brand-blue-dark: var(--cl-accent-hover);
  --primary: var(--cl-accent); --primary-hover: var(--cl-accent-hover); --primary-light: var(--cl-accent-soft); --primary-glow: none; --primary-gradient: var(--cl-accent);
  --accent: var(--cl-accent);
  --canvas: var(--cl-canvas); --bg-app: var(--cl-canvas); --bg-app-grad: var(--cl-canvas); --bg-base: var(--cl-canvas);
  --sidebar-width: 252px;
  --header-height: 60px;
}
/* Collapsed icon rail (desktop): portal.css narrows --sidebar-width on :root, but the 252px above is also set on
   body.is-client (and later on :root[data-theme]), which won — the rail kept full width and the page never moved over */
@media (min-width: 1025px) {
  :root.sb-rail, :root.sb-rail body.is-client { --sidebar-width: var(--p-rail-width, 76px); }
}

/* ---------- 2. Base ---------- */
html:has(> body.cc) { background: var(--cl-canvas) !important; }
:root body.cc { background: var(--cl-canvas) !important; color: var(--cl-ink); font-family: var(--cl-font) !important; font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; }
:root body.cc :is(h1, h2, h3, h4, h5, input, select, textarea, button) { font-family: var(--cl-font); }
:root body.cc ::selection { background: var(--cl-accent-soft-2); }
:root body.cc :focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }
:root body.cc .client-main { background: var(--cl-canvas) !important; }
:root body.cc .client-content { padding: 28px 32px 48px; max-width: none; } /* fill the width: a cap left an empty strip on wide / zoomed-out screens */
:root body.cc .client-content :is(p, li, td, dd) a:not(.btn):not([class*="badge"]):not([class*="-btn"]) { color: var(--cl-accent-ink); }
:root body.cc .client-content hr { border-color: var(--cl-line-soft) !important; }
:root body.cc .ico { flex: 0 0 auto; }

/* ---------- 3. Sidebar ---------- */
:root body.cc .client-sidebar {
  background: var(--cl-side) !important; border-right: 1px solid var(--cl-line-soft) !important; box-shadow: none !important;
}
/* The brand row is sticky while the menu scrolls: it needs the sidebar's own (opaque) background, or links show through it */
:root body.cc .client-sidebar .sidebar-brand { background: var(--cl-side) !important; border-bottom: 0 !important; height: var(--header-height); }
:root body.cc .client-sidebar .brand-name { font-family: var(--cl-serif) !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: -.01em; color: var(--cl-ink) !important; }
:root body.cc .client-sidebar .brand-icon:not(.has-logo) { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; box-shadow: none !important; border-radius: 9px !important; }
:root body.cc .client-sidebar .nav-group-title {
  font: 500 12px/1 var(--cl-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cl-ink-4) !important; padding-top: 16px !important;
}
:root body.cc .client-sidebar :is(.nav-item > a, .nav-logout-btn, .nav-group-toggle) {
  min-height: 34px; color: var(--cl-ink-2) !important; font: 450 13.5px/1.25 var(--cl-font) !important; border-radius: 8px !important; background: transparent !important;
  transition: background-color .15s ease, color .15s ease !important;
}
:root body.cc .client-sidebar :is(.nav-item > a, .nav-logout-btn, .nav-group-toggle) svg { color: var(--cl-ink-3) !important; width: 17px !important; height: 17px !important; transition: color .15s ease, transform .2s var(--cl-ease) !important; }
:root body.cc .client-sidebar :is(.nav-item > a, .nav-logout-btn, .nav-group-toggle):hover { background: var(--cl-hover) !important; color: var(--cl-ink) !important; }
:root body.cc .client-sidebar :is(.nav-item > a, .nav-group-toggle):hover svg:first-child { color: var(--cl-ink) !important; }
:root body.cc .client-sidebar .nav-item.active > a {
  background: var(--cl-card) !important; color: var(--cl-ink) !important; font-weight: 550 !important;
  box-shadow: 0 0 0 1px var(--cl-line), 0 1px 2px rgba(20, 20, 19, .04) !important;
}
:root body.cc .client-sidebar .nav-item.active > a svg { color: var(--cl-accent) !important; }
:root body.cc .client-sidebar .nav-item.active > a::before { display: none !important; }
:root body.cc .client-sidebar .nav-sub .nav-item.active > a { box-shadow: none !important; background: var(--cl-active) !important; }
:root body.cc .client-sidebar .nav-sub { border-left-color: var(--cl-line) !important; }
:root body.cc .client-sidebar .nav-group.is-open > .nav-sub:not([hidden]) { animation: cm-drop .22s var(--cl-ease); }
:root body.cc .client-sidebar .nav-badge { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
/* inset pill items (admin style) */
:root body.cc .client-sidebar .nav-list { padding: 0 10px !important; }
:root body.cc .client-sidebar :is(.nav-item a, .nav-group-toggle, .nav-logout-btn) { padding: 7px 10px 7px 12px !important; min-height: 34px; }
:root body.cc .client-sidebar .nav-group-title { padding: 16px 22px 6px !important; }
:root body.cc .client-sidebar .nav-sub { margin-left: 21px !important; padding-left: 8px !important; }
:root body.cc .client-sidebar .nav-sub .nav-item a { padding: 6px 10px !important; min-height: 30px; font-size: 13px !important; }
:root body.cc .client-sidebar :is(.nav-tone-violet, .nav-tone-red) > a { color: var(--cl-ink-2) !important; font-weight: 450 !important; }
:root body.cc .client-sidebar .nav-tone-violet > a svg { color: var(--cl-violet) !important; }
:root body.cc .client-sidebar .nav-tone-red > a svg { color: var(--cl-red) !important; }
:root body.cc .client-sidebar :is(.nav-tone-violet, .nav-tone-red) > a:hover { background: var(--cl-hover) !important; color: var(--cl-ink) !important; }
:root body.cc .client-sidebar .nav-logout-btn, :root body.cc .client-sidebar .nav-logout-btn svg { color: var(--cl-ink-3) !important; }
:root body.cc .client-sidebar .nav-logout-btn:hover { background: var(--cl-red-soft) !important; color: var(--cl-red) !important; }
:root body.cc .client-sidebar .nav-logout-btn:hover svg { color: var(--cl-red) !important; }
:root body.cc .client-sidebar .nav-group:has(.nav-sub .nav-item.active) > .nav-group-toggle { color: var(--cl-ink) !important; }
:root body.cc .client-sidebar .nav-group:has(.nav-sub .nav-item.active) > .nav-group-toggle .nav-link-content svg { color: var(--cl-accent) !important; }
:root body.cc .client-sidebar .nav-chevron { color: var(--cl-ink-4) !important; }
:root body.cc .client-sidebar .sidebar-footer { border-top: 1px solid var(--cl-line-soft) !important; background: transparent !important; }
/* The footer is a grid: an auto column grew to the referral link input's natural width (+ Copy), pushing the credits and
   referral cards past the sidebar edge (sideways scroll) once a customer has joined the affiliate programme */
:root body.cc .client-sidebar .sidebar-footer { grid-template-columns: minmax(0, 1fr); }
:root body.cc .client-sidebar .sidebar-footer > * { min-width: 0; }
:root body.cc .sidebar-wallet { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: 10px !important; box-shadow: none !important; }
:root body.cc .sidebar-wallet :is(.sidebar-wallet-ico, .sidebar-wallet-icon) { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; }
:root body.cc .sidebar-wallet-amount { color: var(--cl-ink) !important; }
:root body.cc :is(.sidebar-referral, .referral-card, [data-referral]) { background: var(--cl-card) !important; background-image: none !important; border: 1px solid var(--cl-line) !important; color: var(--cl-ink) !important; box-shadow: none !important; }
:root body.cc [data-referral] :is(h3, h4, strong, p, span:not(.btn)) { color: inherit; }
/* portal.css styled these for the old blue-gradient card (white text, translucent white boxes): on the white card the
   stat labels were white on white and the stat boxes and close button disappeared */
:root body.cc [data-referral] .sidebar-referral-stats span { background: var(--cl-sunken) !important; border: 1px solid var(--cl-line-soft); }
:root body.cc [data-referral] .sidebar-referral-stats small { color: var(--cl-ink-3) !important; }
:root body.cc [data-referral] .sidebar-referral-close { color: var(--cl-ink-3) !important; }
:root body.cc [data-referral] .sidebar-referral-close:hover { color: var(--cl-ink) !important; background: var(--cl-hover) !important; }
:root body.cc [data-referral] .sidebar-referral-link input { background: var(--cl-sunken) !important; border: 1px solid var(--cl-line) !important; color: var(--cl-ink-2) !important; }
:root body.cc [data-referral] .sidebar-referral-link button { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; flex: 0 0 auto; }
:root body.cc [data-referral] .btn-referral { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; }
:root body.cc [data-referral] .btn-referral:hover { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
:root body.cc [data-referral] input { background: var(--cl-sunken) !important; border-color: var(--cl-line) !important; color: var(--cl-ink-2) !important; }
:root body.cc .sb-flyout { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; box-shadow: var(--cl-shadow-pop) !important; color: var(--cl-ink) !important; }

/* ---------- 4. Top bar ---------- */
:root body.cc .client-header {
  background: color-mix(in srgb, var(--cl-canvas) 86%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(10px) !important; backdrop-filter: saturate(1.4) blur(10px) !important;
  border-bottom: 1px solid var(--cl-line-soft) !important; height: var(--header-height);
}
:root body.cc .client-header .topbar-title { font-family: var(--cl-serif) !important; font-weight: 500 !important; font-size: 19px !important; letter-spacing: -.01em; color: var(--cl-ink) !important; }
:root body.cc .client-header :is(.icon-btn, .mobile-menu-btn) { background: transparent !important; border-color: transparent !important; color: var(--cl-ink-2) !important; border-radius: 9px !important; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
:root body.cc .client-header :is(.icon-btn, .mobile-menu-btn):hover { background: var(--cl-hover) !important; color: var(--cl-ink) !important; }
:root body.cc .client-header .icon-btn[aria-expanded="true"] { background: var(--cl-active) !important; color: var(--cl-ink) !important; border-color: transparent !important; }
:root body.cc .client-header .topbar-cart-ico { background: transparent !important; border-color: transparent !important; color: var(--cl-ink-2) !important; width: 36px; height: 36px; }
:root body.cc .client-header .topbar-cart:hover .topbar-cart-ico { background: var(--cl-hover) !important; color: var(--cl-ink) !important; }
:root body.cc .client-header .topbar-search input { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: 9px !important; height: 36px; min-height: 36px !important; }
:root body.cc .client-header .topbar-search input:focus { border-color: var(--cl-accent) !important; box-shadow: 0 0 0 3px var(--cl-accent-ring) !important; }
:root body.cc .client-header .topbar-search kbd { background: var(--cl-sunken) !important; border: 1px solid var(--cl-line) !important; color: var(--cl-ink-3) !important; border-radius: 5px !important; }
:root body.cc .client-header .topbar-pin { background: transparent !important; border: 1px solid var(--cl-line) !important; border-radius: 999px !important; color: var(--cl-ink-2) !important; height: 34px; }
:root body.cc .client-header .topbar-pin svg { color: var(--cl-ink-3) !important; }
:root body.cc .client-header .topbar-pin-value { color: var(--cl-ink) !important; }
:root body.cc .client-header .header-avatar-btn { background: transparent !important; border: 1px solid transparent !important; border-radius: 10px !important; height: 42px; }
:root body.cc .client-header .header-avatar-btn:hover, :root body.cc .client-header .header-avatar-btn[aria-expanded="true"] { background: var(--cl-hover) !important; }
:root body.cc .client-header .user-avatar { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
:root[data-theme="dark"] body.cc .client-header .user-avatar { background: var(--cl-line-strong) !important; color: var(--cl-ink) !important; }
:root body.cc .client-header .user-avatar * { color: inherit !important; }
:root body.cc .client-header .app-user-name { color: var(--cl-ink) !important; font-weight: 550 !important; }
:root body.cc .notif-count { background: var(--cl-accent) !important; border-color: var(--cl-canvas) !important; color: var(--cl-on-accent) !important; }
:root body.cc :is(.header-menu, .topbar-menu, .notif-menu, .dropdown-menu) { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; box-shadow: var(--cl-shadow-pop) !important; border-radius: 12px !important; }
:root body.cc :is(.header-menu, .topbar-menu, .notif-menu, .dropdown-menu) :is(a, button):hover { background: var(--cl-hover) !important; }
:root body.cc .impersonation-bar { background: #141413 !important; color: #faf9f5 !important; }
:root body.cc .impersonation-bar.verify-banner-bar { background: var(--cl-amber-soft) !important; color: var(--cl-amber) !important; }
:root body.cc .offer-strip { background: #141413 !important; color: #faf9f5 !important; }
:root[data-theme="dark"] body.cc .offer-strip { background: #1a1918 !important; border-bottom: 1px solid var(--cl-line) !important; }
:root body.cc .offer-strip :is(p, strong, span, button) { color: inherit !important; }
:root body.cc .offer-strip--teal { background: var(--cl-teal) !important; color: #fff !important; }
:root body.cc .offer-strip-btn { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; border-color: transparent !important; }

/* ---------- 5. Page header & breadcrumb ---------- */
:root body.cc :is(.client-page-title, .page-title, .page-header h1, .client-page-header h1, .ps-title, .ac-title, .pb-title) {
  font-family: var(--cl-serif) !important; font-weight: 500 !important; font-size: 28px !important; line-height: 1.22 !important;
  letter-spacing: -.012em !important; color: var(--cl-ink) !important;
}
:root body.cc :is(.client-page-title, .page-title) > svg { color: var(--cl-accent) !important; }
:root body.cc :is(.client-page-desc, .page-subtitle, .page-header p, .client-page-header > div > p) { color: var(--cl-ink-3) !important; font-size: 14px !important; }
:root body.cc .page-crumbs { color: var(--cl-ink-3) !important; font-size: 13px; margin-bottom: 14px; }
:root body.cc .page-crumbs a { color: var(--cl-ink-3) !important; text-decoration: none; }
:root body.cc .page-crumbs a:hover { color: var(--cl-ink) !important; }
:root body.cc .page-crumbs [aria-current] { color: var(--cl-ink-2) !important; }
:root body.cc :is(.breadcrumb-trail, .breadcrumb, .breadcrumbs, .ps-crumbs) a { color: var(--cl-ink-3) !important; }

/* ---------- 6. Cards ---------- */
:root body.cc :is(.client-card, .data-card, .chart-card, .form-card, .guh-card, .dash-card, .ps-card, .pb-card, .ac-card, .client-empty-card, .filter-bar-card, .news-card, .plan-card, .srv-card, .whmcs-section-panel, .checkout-summary, .checkout-main, .client-flash-bar) {
  background: var(--cl-card) !important; background-image: none !important; border: 1px solid var(--cl-line) !important; border-radius: 12px !important; box-shadow: none !important;
}
:root body.cc :is(.client-card, .data-card, .dash-card, .ps-card, .pb-card, .ac-card) :is(.client-card, .data-card, .dash-card, .ps-card, .pb-card, .ac-card) { border-color: var(--cl-line-soft) !important; }
:root body.cc :is(.card-head, .client-card-header, .chart-header, .guh-card-header, .pb-card-head, .ac-card-head, .ps-card-head) { border-bottom-color: var(--cl-line-soft) !important; }
:root body.cc :is(.dash-card-title, .ac-card-title, .client-card-title, .ps-card-title, .card-head h2, .card-head h3, .chart-header h3) {
  display: flex; align-items: center; gap: 10px; font-weight: 600 !important; font-size: 15px !important; color: var(--cl-ink) !important; letter-spacing: -.006em !important; font-family: var(--cl-font) !important;
}
:root body.cc :is(.dash-card-action, .card-head a:not(.btn)) { color: var(--cl-accent-ink) !important; font-weight: 500 !important; }
:root body.cc :is(.card-footer, .client-card-footer) { background: var(--cl-sunken) !important; border-top: 1px solid var(--cl-line-soft) !important; }

/* section-heading icon chip (Illustration::headings) */
:root body.cc .cm-hico {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: var(--cl-accent-soft); color: var(--cl-accent); border: 1px solid color-mix(in srgb, var(--cl-accent) 14%, transparent);
}
:root body.cc .cm-hico svg { width: 15px; height: 15px; }

/* ---------- 7. Stat tiles & icon chips ---------- */
:root body.cc :is(.dash-stat, .client-kpi-card, .kpi-card) {
  background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: 12px !important; box-shadow: none !important;
}
:root body.cc .dash-stat-label, :root body.cc :is(.client-kpi-card, .kpi-card) .kpi-label {
  font: 500 13px/1.3 var(--cl-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cl-ink-3) !important;
}
:root body.cc :is(.dash-stat-value, .kpi-val, .dash-wallet-balance) {
  font-family: var(--cl-serif) !important; font-weight: 500 !important; font-size: 28px !important; letter-spacing: -.015em !important; color: var(--cl-ink) !important;
  font-variant-numeric: tabular-nums;
}
:root body.cc .dash-stat-link { color: var(--cl-ink-3) !important; font-weight: 500 !important; transition: color .15s ease; }
:root body.cc a.dash-stat:hover .dash-stat-link { color: var(--cl-accent) !important; }
/* icon chips: one shape, muted tones; "blue" (the default tone) follows the brand colour */
:root body.cc :is(.dash-stat-ico, .dash-att-ico, .ac-ico, .pb-ico, .ps-ico, .kpi-icon, .kpi-icon-pill) {
  border-radius: 10px !important; box-shadow: none !important; background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
}
:root body.cc .tone-blue, :root body.cc .tone-primary { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; }
:root body.cc .tone-cyan, :root body.cc .tone-teal { background: var(--cl-teal-soft) !important; color: var(--cl-teal) !important; }
:root body.cc .tone-violet, :root body.cc .tone-purple { background: var(--cl-violet-soft) !important; color: var(--cl-violet) !important; }
:root body.cc .tone-amber, :root body.cc .tone-warning { background: var(--cl-amber-soft) !important; color: var(--cl-amber) !important; }
:root body.cc .tone-green, :root body.cc .tone-success { background: var(--cl-green-soft) !important; color: var(--cl-green) !important; }
:root body.cc .tone-rose, :root body.cc .tone-red, :root body.cc .tone-danger { background: var(--cl-red-soft) !important; color: var(--cl-red) !important; }
:root body.cc .tone-info { background: var(--cl-blue-soft) !important; color: var(--cl-blue) !important; }
/* (tone classes on non-chip rows, e.g. .dash-att-item.tone-x, must stay transparent) */
:root body.cc :is(.dash-att-item, .ac-alert, .alert, .ac-status-banner)[class*="tone-"] { background: var(--cl-card) !important; color: inherit !important; }

/* ---------- 8. Lists inside cards ---------- */
:root body.cc :is(.dash-service, .dash-row-list li, .dash-account-row) { border-top-color: var(--cl-line-soft) !important; }
:root body.cc .dash-service-name { color: var(--cl-ink) !important; font-weight: 550 !important; }
:root body.cc .dash-service-main:hover .dash-service-name, :root body.cc .dash-row-list li > a:first-child:hover strong { color: var(--cl-accent-ink) !important; }
:root body.cc .dash-service-name small, :root body.cc .dash-service-renew { color: var(--cl-ink-4) !important; }
:root body.cc .dash-service-sso { color: var(--cl-accent-ink) !important; }
:root body.cc .dash-row-amount { color: var(--cl-ink) !important; font-variant-numeric: tabular-nums; font-weight: 600 !important; }
:root body.cc .dash-account-row dt { color: var(--cl-ink-3) !important; font-weight: 400 !important; }
:root body.cc .dash-account-val { font-weight: 500 !important; }
/* leading row icon (added by the dashboard markup) */
:root body.cc .cm-row-ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--cl-sunken); color: var(--cl-ink-2); border: 1px solid var(--cl-line-soft); }
:root body.cc .cm-row-ico svg { width: 17px; height: 17px; }

/* ---------- 9. Tables ---------- */
:root body.cc :is(.client-table, .data-table, .mini-table, table.table, .guh-table, .pb-table, .ac-table, .ps-table, .dm-table, .si-table) th {
  background: transparent !important; color: var(--cl-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important;
  font: 500 12.5px/1.3 var(--cl-font) !important; border-bottom: 1px solid var(--cl-line) !important;
}
:root body.cc :is(.client-table, .data-table, .mini-table, table.table, .guh-table, .pb-table, .ac-table, .ps-table, .dm-table, .si-table) td { border-bottom-color: var(--cl-line-soft) !important; color: var(--cl-ink-2); }
:root body.cc :is(.client-table, .data-table, .mini-table, table.table, .guh-table, .pb-table, .ac-table, .ps-table) td :is(strong, b) { color: var(--cl-ink); }
:root body.cc :is(.client-table, .data-table, table.table, .guh-table, .pb-table, .ac-table, .ps-table) tbody tr { transition: background-color .15s ease; }
:root body.cc :is(.client-table, .data-table, table.table, .guh-table, .pb-table, .ac-table, .ps-table) tbody tr:hover td { background: var(--cl-hover) !important; }
:root body.cc :is(.client-table, .data-table, .pb-table, .ac-table, .ps-table) td a:not(.btn):not([class*="badge"]) { color: var(--cl-ink) !important; font-weight: 550; }
:root body.cc :is(.client-table, .data-table, .pb-table, .ac-table, .ps-table) td a:not(.btn):not([class*="badge"]):hover { color: var(--cl-accent-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
:root body.cc :is(.client-table, .data-table) code { background: var(--cl-sunken) !important; color: var(--cl-ink-2) !important; }

/* ---------- 10. Buttons ---------- */
:root body.cc .btn {
  border-radius: 8px !important; font-weight: 500 !important; box-shadow: none !important; background-image: none !important; letter-spacing: 0 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s var(--cl-ease) !important;
}
:root body.cc :is(.btn-primary, .btn-primary:focus, .guh-btn-primary, .promo-cta-btn) { background: var(--cl-accent) !important; border: 1px solid var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
:root body.cc :is(.btn-primary, .guh-btn-primary, .promo-cta-btn):hover { background: var(--cl-accent-hover) !important; border-color: var(--cl-accent-hover) !important; color: var(--cl-on-accent) !important; }
:root body.cc :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary) { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; color: var(--cl-ink) !important; }
:root body.cc :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary):hover { background: var(--cl-sunken) !important; border-color: var(--cl-line-strong) !important; color: var(--cl-ink) !important; }
:root body.cc :is(.btn-ghost, .btn-link) { background: transparent !important; border-color: transparent !important; color: var(--cl-ink-2) !important; }
:root body.cc .btn-ghost:hover { background: var(--cl-hover) !important; color: var(--cl-ink) !important; }
:root body.cc .btn-danger { background: var(--cl-red) !important; border-color: var(--cl-red) !important; color: #fff !important; }
:root body.cc .btn-danger:hover { background: color-mix(in srgb, var(--cl-red) 88%, #000) !important; border-color: transparent !important; }
:root body.cc .btn-success { background: var(--cl-green) !important; border-color: var(--cl-green) !important; color: #fff !important; }
:root body.cc .btn-success:hover { background: color-mix(in srgb, var(--cl-green) 88%, #000) !important; }
:root body.cc .btn-warning { background: var(--cl-amber) !important; border-color: var(--cl-amber) !important; }
:root body.cc .btn-ghost-danger { color: var(--cl-red) !important; border-color: color-mix(in srgb, var(--cl-red) 30%, var(--cl-line)) !important; }
:root body.cc .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--cl-accent-ring) !important; }
/* press feedback */
:root body.cc :is(.btn, .icon-btn, .bottom-nav-item, .dash-quick a, .promo-coupon-pill):active:not(:disabled) { transform: scale(.97) !important; }
:root body.cc .btn svg { transition: transform .2s var(--cl-ease); }
:root body.cc .btn:hover svg:last-child:not(:first-child) { transform: translateX(2px); }

/* ---------- 11. Badges ---------- */
:root body.cc :is(.status-badge, .badge, .dash-badge, .ac-badge, .pb-pill, .ps-pill) {
  border-radius: 999px !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; border: 0 !important;
}
:root body.cc :is(.status-badge, .badge) { --b: var(--cl-ink-2); --b-soft: var(--cl-sunken); }
:root body.cc :is(.status-badge, .badge):is(.badge-active, .badge-success, .badge-paid, .badge-verified, .badge-green, .badge-yes, .badge-completed, .badge-online, .badge-open, .badge-approved, .badge-delivered, .badge-resolved) { --b: var(--cl-green); --b-soft: var(--cl-green-soft); }
:root body.cc :is(.status-badge, .badge):is(.badge-pending, .badge-warning, .badge-unpaid, .badge-under-review, .badge-amber, .badge-draft, .badge-in-progress, .badge-on-hold, .badge-customer-reply, .badge-expiring) { --b: var(--cl-amber); --b-soft: var(--cl-amber-soft); }
:root body.cc :is(.status-badge, .badge):is(.badge-danger, .badge-failed, .badge-critical, .badge-overdue, .badge-suspended, .badge-rejected, .badge-terminated, .badge-fraud, .badge-red, .badge-expired, .badge-high, .badge-urgent) { --b: var(--cl-red); --b-soft: var(--cl-red-soft); }
:root body.cc :is(.status-badge, .badge):is(.badge-info, .badge-blue, .badge-primary, .badge-answered, .badge-medium) { --b: var(--cl-blue); --b-soft: var(--cl-blue-soft); }
:root body.cc .dash-badge--active, :root body.cc .ac-badge--success, :root body.cc .ac-badge--green { background: var(--cl-green-soft) !important; color: var(--cl-green) !important; }
:root body.cc .dash-badge--warning, :root body.cc .ac-badge--warning, :root body.cc .ac-badge--amber { background: var(--cl-amber-soft) !important; color: var(--cl-amber) !important; }
:root body.cc .dash-badge--danger, :root body.cc .ac-badge--danger, :root body.cc .ac-badge--red { background: var(--cl-red-soft) !important; color: var(--cl-red) !important; }
:root body.cc .dash-badge--info, :root body.cc .ac-badge--info, :root body.cc .ac-badge--blue { background: var(--cl-blue-soft) !important; color: var(--cl-blue) !important; }
:root body.cc .dash-badge--muted, :root body.cc .ac-badge--muted { background: var(--cl-sunken) !important; color: var(--cl-ink-3) !important; }
:root body.cc .ac-badge--violet { background: var(--cl-violet-soft) !important; color: var(--cl-violet) !important; }
:root body.cc :is(.dash-badge, .status-badge, .badge)::before { flex: 0 0 auto; }
:root body.cc :is(.dash-count, .cpm-count) { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }

/* ---------- 12. Forms ---------- */
:root body.cc :is(.form-control, .form-select, .filter-select, input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="url"], input[type="tel"], select, textarea):not(.topbar-search input):not([type="color"]) {
  border-color: var(--cl-line) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--cl-ink);
  transition: border-color .15s ease, box-shadow .2s ease !important;
}
:root body.cc :is(.form-control, .form-select, .filter-select, input, select, textarea):focus { border-color: var(--cl-accent) !important; box-shadow: 0 0 0 3px var(--cl-accent-ring) !important; outline: none !important; }
:root body.cc ::placeholder { color: var(--cl-ink-4) !important; }
:root body.cc :is(.form-label, label.form-label) { color: var(--cl-ink-2) !important; font-weight: 500 !important; }
:root body.cc :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--cl-accent); }
:root body.cc :is(.switch, .toggle) input:checked + .slider { background: var(--cl-accent) !important; }

/* ---------- 13. Alerts & toasts ---------- */
:root body.cc .alert { border-radius: 10px !important; box-shadow: none !important; }
:root body.cc .alert:not(.alert-success):not(.alert-warning):not(.alert-danger):not(.alert-error):not(.alert-info) { --a: var(--cl-accent); --a-soft: var(--cl-accent-soft); --a-ink: var(--cl-accent-ink); }
:root body.cc .alert-success { --a: var(--cl-green); --a-soft: var(--cl-green-soft); --a-ink: var(--cl-green); }
:root body.cc .alert-warning { --a: var(--cl-amber); --a-soft: var(--cl-amber-soft); --a-ink: var(--cl-amber); }
:root body.cc :is(.alert-danger, .alert-error) { --a: var(--cl-red); --a-soft: var(--cl-red-soft); --a-ink: var(--cl-red); }
:root body.cc .alert-info { --a: var(--cl-blue); --a-soft: var(--cl-blue-soft); --a-ink: var(--cl-blue); }
:root body.cc .client-content > .alert { animation: cm-toast-in .42s var(--cl-ease) both; }
/* success flash: the check draws itself */
:root body.cc .alert-success > svg:first-child :is(path, circle) { stroke-dasharray: 60; stroke-dashoffset: 0; animation: cm-draw .7s .18s var(--cl-ease) both; }
:root body.cc .ax-toast, .cm-toast {
  background: var(--cl-ink) !important; color: var(--cl-canvas) !important; border: 0 !important; border-radius: 10px !important; box-shadow: var(--cl-shadow-pop) !important;
  animation: cm-toast-up .38s var(--cl-ease) both;
}
.cm-toast { position: fixed; z-index: 1300; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 11px 16px; font: 500 13.5px/1.4 var(--cl-font, system-ui); max-width: calc(100vw - 32px); }
.cm-toast.is-leaving { animation: cm-toast-down .25s ease both; }
.cm-toast svg { flex: 0 0 auto; color: var(--cl-green); }

/* ---------- 14. Tabs, segmented controls, accordions ---------- */
:root body.cc :is(.seg-tabs, .group-tabs, .guh-nav-tabs, .pay-tabs, .seg-control, .segmented, .ps-tabs, .pb-tabs, .ac-tabs, .pb-filters) {
  background: var(--cl-sunken) !important; border: 1px solid var(--cl-line-soft) !important; border-radius: 10px !important;
}
:root body.cc :is(.seg-tabs, .group-tabs, .seg-control, .segmented, .ps-tabs, .pb-tabs, .ac-tabs, .pb-filters) :is(a, button) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important; color: var(--cl-ink-3) !important; }
:root body.cc :is(.seg-tabs, .group-tabs, .seg-control, .segmented, .ps-tabs, .pb-tabs, .ac-tabs, .pb-filters) :is(a, button):hover { color: var(--cl-ink) !important; }
:root body.cc :is(.seg-tabs, .group-tabs, .seg-control, .segmented, .ps-tabs, .pb-tabs, .ac-tabs, .pb-filters) :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"], [aria-pressed="true"]) {
  background: var(--cl-card) !important; color: var(--cl-ink) !important; box-shadow: 0 1px 2px rgba(20, 20, 19, .08), 0 0 0 1px var(--cl-line-soft) !important;
}
:root body.cc :is([role="tabpanel"]:not([hidden]), .tab-pane.active, .tab-pane.show) { animation: cm-fade-up .28s var(--cl-ease) both; }
:root body.cc details > summary { cursor: pointer; }
:root body.cc details > summary::-webkit-details-marker { color: var(--cl-ink-4); }
:root body.cc details[open] > :not(summary) { animation: cm-fade-up .24s var(--cl-ease) both; }
:root body.cc :is(.progress, .si-bar-track, .ps-bar, .pb-bar, .ac-progress, .usage-bar, .sbx-bar) { background: var(--cl-line-soft) !important; overflow: hidden; }
:root body.cc :is(.progress-bar, .si-bar-track > span, .ps-bar > span, .pb-bar > span, .ac-progress > span, .usage-bar > span, .sbx-bar > span) {
  background: var(--cl-accent) !important; transform-origin: left center; animation: cm-grow .9s .15s var(--cl-ease) both;
}
:root body.cc .si-bar.is-warn .si-bar-track > span, :root body.cc .si-bar.warn .si-bar-track > span { background: var(--cl-amber) !important; }
:root body.cc .si-bar.is-danger .si-bar-track > span, :root body.cc .si-bar.danger .si-bar-track > span { background: var(--cl-red) !important; }

/* ---------- 15. Dashboard ---------- */
/* welcome hero */
:root body.cc .cm-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  margin: 0 0 22px; padding: 26px 28px; overflow: hidden;
  background: var(--cl-card); border: 1px solid var(--cl-line); border-radius: 16px;
}
:root body.cc .cm-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--cl-accent) 9%, transparent), transparent 70%);
}
:root body.cc .cm-hero > * { position: relative; }
:root body.cc .cm-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--cl-ink-3); }
:root body.cc .cm-hero-eyebrow svg { color: var(--cl-accent); }
:root body.cc .cm-hero-title { margin: 0; font-family: var(--cl-serif) !important; font-weight: 500 !important; font-size: 30px !important; line-height: 1.18 !important; letter-spacing: -.015em; color: var(--cl-ink) !important; }
:root body.cc .cm-hero-text { margin: 8px 0 0; max-width: 58ch; font-size: 14.5px; line-height: 1.55; color: var(--cl-ink-2); }
:root body.cc .cm-hero-text strong { color: var(--cl-ink); font-weight: 600; }
:root body.cc .cm-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
:root body.cc .cm-hero-art { width: 260px; height: 170px; margin: -10px -6px -14px 0; }
:root body.cc .cm-hero-art svg { width: 100%; height: 100%; display: block; }
/* attention list */
:root body.cc .dash-section-title { font: 600 15px/1.3 var(--cl-font) !important; color: var(--cl-ink) !important; display: flex; align-items: center; gap: 8px; }
:root body.cc .dash-att-item {
  background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: 12px !important; box-shadow: none !important;
}
:root body.cc .dash-att-item .dash-att-ico { background: var(--cl-sunken) !important; color: var(--cl-ink-2) !important; border-color: var(--cl-line-soft) !important; }
:root body.cc .dash-att-item.tone-danger .dash-att-ico { background: var(--cl-red-soft) !important; color: var(--cl-red) !important; border-color: transparent !important; }
:root body.cc .dash-att-item.tone-warning .dash-att-ico { background: var(--cl-amber-soft) !important; color: var(--cl-amber) !important; border-color: transparent !important; }
:root body.cc .dash-att-item.tone-info .dash-att-ico { background: var(--cl-blue-soft) !important; color: var(--cl-blue) !important; border-color: transparent !important; }
:root body.cc .dash-att-item.tone-danger { box-shadow: inset 3px 0 0 var(--cl-red) !important; }
:root body.cc .dash-att-text strong { color: var(--cl-ink) !important; font-weight: 550 !important; }
:root body.cc .dash-att-text small { color: var(--cl-ink-3) !important; }
:root body.cc .dash-att-cta { color: var(--cl-accent-ink) !important; font-weight: 500 !important; }
:root body.cc .dash-att-item.tone-danger .dash-att-cta { color: var(--cl-red) !important; }
:root body.cc .dash-allset { background: var(--cl-green-soft) !important; color: var(--cl-green) !important; border: 0 !important; border-radius: 12px !important; }
:root body.cc .dash-quick a { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: 10px !important; color: var(--cl-ink) !important; box-shadow: none !important; }
:root body.cc .dash-quick a:hover { border-color: var(--cl-line-strong) !important; background: var(--cl-sunken) !important; }
:root body.cc .dash-quick a :is(span, svg):first-child { color: var(--cl-accent); }
:root body.cc .siw-chart .bar { fill: var(--cl-accent) !important; }
:root body.cc .siw-chart .grid { stroke: var(--cl-line-soft) !important; }
:root body.cc .siw-chart .axis { fill: var(--cl-ink-4) !important; }
:root body.cc .siw-rm-avatar { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
:root body.cc .siw-rm-avatar.has-photo { background: var(--cl-sunken) !important; }
:root body.cc .siw-rm-bio { color: var(--cl-ink-2); }
/* promo slider: dark ink card (the brand colour carries the action) */
:root body.cc .client-promo-banner-card { background: var(--cl-accent) !important; background-image: linear-gradient(135deg, var(--cl-accent), color-mix(in srgb, var(--cl-accent) 70%, #0b1f5c)) !important; border: 0 !important; box-shadow: none !important; border-radius: 16px !important; }
:root[data-theme="dark"] body.cc .client-promo-banner-card { background: #1a1918 !important; border: 1px solid var(--cl-line) !important; }
:root body.cc .client-promo-banner-card :is(.promo-headline) { font-family: var(--cl-serif) !important; font-weight: 500 !important; letter-spacing: -.015em !important; color: #faf9f5 !important; }
:root body.cc .client-promo-banner-card .promo-summary { color: rgba(250, 249, 245, .72) !important; }
:root body.cc .client-promo-banner-card .promo-badge-tag { background: rgba(250, 249, 245, .1) !important; color: #faf9f5 !important; border: 1px solid rgba(250, 249, 245, .18) !important; }
:root body.cc .promo-coupon-pill { background: rgba(250, 249, 245, .06) !important; border-color: rgba(250, 249, 245, .25) !important; }
:root body.cc .promo-dot.is-active { background: var(--cl-accent) !important; }
:root body.cc .client-flash-bar { border-left: 3px solid var(--cl-accent) !important; }

/* ---------- 16. Empty states & illustrations ---------- */
:root body.cc :is(.ac-empty, .pb-empty, .ps-empty, .dash-empty, .notif-empty).cm-has-illus { text-align: center; align-items: center; }
:root body.cc .cm-illus { display: block; width: 176px; height: 124px; margin: 4px auto 6px; flex: 0 0 auto; }
:root body.cc .cm-illus svg { width: 100%; height: 100%; display: block; overflow: visible; }
:root body.cc .dash-empty.cm-has-illus { padding-top: 10px; }
:root body.cc :is(.ac-empty, .pb-empty, .ps-empty, .dash-empty, .notif-empty) > strong { font-weight: 600 !important; font-size: 15px !important; color: var(--cl-ink) !important; }
:root body.cc :is(.ac-empty, .pb-empty, .ps-empty, .dash-empty, .notif-empty) :is(p, span:not(.cm-illus)) { color: var(--cl-ink-3) !important; }
/* illustration paint (shared by hero + empty states) */
.cm-illus svg, .cm-hero-svg { --il-ink: color-mix(in srgb, var(--cl-accent) 62%, var(--cl-ink)); }
:is(.cm-illus, .cm-hero-art) .il-blob { fill: var(--cl-accent-soft); }
:is(.cm-illus, .cm-hero-art) .il-shadow { fill: var(--cl-ink); opacity: .07; }
:is(.cm-illus, .cm-hero-art) .il-card { fill: var(--cl-card); stroke: var(--il-ink); stroke-width: 2; stroke-linejoin: round; }
:is(.cm-illus, .cm-hero-art) .il-stroke { fill: none; stroke: var(--il-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.cm-illus, .cm-hero-art) .il-acc { fill: var(--cl-accent); }
:is(.cm-illus, .cm-hero-art) .il-soft { fill: var(--cl-accent-soft-2); }
:is(.cm-illus, .cm-hero-art) .il-soft-s { fill: var(--cl-accent-soft-2); stroke: var(--il-ink); stroke-width: 2; stroke-linejoin: round; }
:is(.cm-illus, .cm-hero-art) .il-line { fill: var(--cl-line); }
:is(.cm-illus, .cm-hero-art) .il-dot { fill: var(--cl-on-accent); }
:is(.cm-illus, .cm-hero-art) .il-white { fill: none; stroke: var(--cl-on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.cm-illus, .cm-hero-art) .il-thin { stroke-width: 1.6; }
:is(.cm-illus, .cm-hero-art) .il-acc-s { fill: none; stroke: var(--cl-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.cm-illus, .cm-hero-art) .il-faint { opacity: .45; }
:is(.cm-illus, .cm-hero-art) .il-orbit { fill: none; stroke: var(--cl-accent); stroke-width: 2; stroke-dasharray: 4 5; opacity: .7; }
:is(.cm-illus, .cm-hero-art) .il-glass { fill: color-mix(in srgb, var(--cl-card) 70%, transparent); stroke: var(--cl-accent); stroke-width: 4; }
:is(.cm-illus, .cm-hero-art) .il-handle { fill: none; stroke: var(--cl-accent); stroke-width: 7; stroke-linecap: round; }
:is(.cm-illus, .cm-hero-art) .il-spark { fill: var(--cl-accent); opacity: .5; }
:is(.cm-illus, .cm-hero-art) .il-spark-s { fill: none; stroke: var(--cl-accent); stroke-width: 2.2; stroke-linecap: round; opacity: .6; }
:is(.cm-illus, .cm-hero-art) .il-ring { fill: none; stroke: var(--cl-accent); stroke-width: 2; opacity: .45; }
:is(.cm-illus, .cm-hero-art) .il-area { fill: var(--cl-accent); opacity: .08; }
:is(.cm-illus, .cm-hero-art) :is(.il-float, .il-pop) { transform-box: fill-box; transform-origin: 50% 50%; }
:is(.cm-illus, .cm-hero-art) .il-float { animation: cm-float 6s ease-in-out .9s infinite; }
:is(.cm-illus, .cm-hero-art) .il-pop { animation: cm-pop .55s .25s cubic-bezier(.3, 1.5, .5, 1) both; }
:is(.cm-illus, .cm-hero-art) .il-pop-2 { animation-delay: .45s; }
:is(.cm-illus, .cm-hero-art) .il-swing { transform-origin: 50% 0; animation: cm-swing 3.2s ease-in-out .5s 2; }
:is(.cm-illus, .cm-hero-art) .il-draw { stroke-dasharray: 320; stroke-dashoffset: 0; animation: cm-draw-long 1.3s .3s var(--cl-ease) both; }
:is(.cm-illus, .cm-hero-art) .il-blob { transform-box: fill-box; transform-origin: center; animation: cm-blob .6s var(--cl-ease) both; }

/* ---------- 17. Page heroes & coloured blocks from older pages ---------- */
:root body.cc :is(.ac-hero, .ac-review-cta, .pb-ref-hero, .dmx-hub, .kb-hero, .fb-hero, .dmo-hero, .dm-hero, .aff-hero, .pb-aff-hero, .ax-hero, .dmx-hero, .sbx-hero) {
  background: var(--cl-card) !important; background-image: radial-gradient(560px 240px at 100% 0%, color-mix(in srgb, var(--cl-accent) 10%, transparent), transparent 70%) !important;
  border: 1px solid var(--cl-line) !important; color: var(--cl-ink) !important; box-shadow: none !important;
}
:root body.cc :is(.ac-hero, .ac-review-cta, .pb-ref-hero, .dmx-hub, .kb-hero, .fb-hero, .dmo-hero, .dm-hero, .aff-hero, .pb-aff-hero, .ax-hero, .dmx-hero, .sbx-hero) :is(h1, h2, h3, strong, p, span, small, label, div) { color: inherit; }
:root body.cc :is(.ac-hero, .ac-review-cta, .pb-ref-hero, .dmx-hub, .kb-hero, .fb-hero, .dmo-hero, .dm-hero, .aff-hero, .pb-aff-hero, .ax-hero, .dmx-hero, .sbx-hero) :is(h1, h2) { font-family: var(--cl-serif) !important; font-weight: 500 !important; color: var(--cl-ink) !important; letter-spacing: -.012em; }
:root body.cc :is(.ac-hero, .ac-review-cta, .pb-ref-hero, .dmx-hub, .kb-hero, .fb-hero, .dmo-hero, .dm-hero, .aff-hero, .pb-aff-hero, .ax-hero, .dmx-hero, .sbx-hero) p { color: var(--cl-ink-2) !important; }


/* dark "ink" money cards (wallet balance, checkout total) — same family as the promo card */
:root body.cc :is(.pb-balance, .pb-pay-hero) { background: color-mix(in srgb, var(--cl-accent) 82%, #0b1f5c) !important; background-image: radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--cl-accent) 32%, transparent), transparent 70%) !important; color: #faf9f5 !important; border: 0 !important; box-shadow: none !important; }
:root[data-theme="dark"] body.cc :is(.pb-balance, .pb-pay-hero) { background-color: #1a1918 !important; border: 1px solid var(--cl-line) !important; }
:root body.cc :is(.pb-balance, .pb-pay-hero) :is(.btn-secondary, .btn-light, .btn-white, .btn) { background: rgba(250, 249, 245, .1) !important; border-color: rgba(250, 249, 245, .22) !important; color: #faf9f5 !important; }
:root body.cc :is(.pb-balance, .pb-pay-hero) .btn:hover { background: rgba(250, 249, 245, .18) !important; }
:root body.cc :is(.pb-balance, .pb-pay-hero) > * > :is(div, span)[class*="stat"], :root body.cc .pb-balance [class*="-mini"] { background: rgba(250, 249, 245, .07) !important; }
/* buttons/inputs inside the light heroes */
:root body.cc :is(.ac-hero, .ac-review-cta, .pb-ref-hero) .btn:not(.btn-primary) { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; color: var(--cl-ink) !important; }
:root body.cc :is(.ac-hero, .ac-review-cta) .btn-primary, :root body.cc .ac-review-cta .btn:first-of-type { background: var(--cl-accent) !important; border-color: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
:root body.cc .ac-hero-search { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; box-shadow: none !important; }
/* gradient leftovers become the accent */
:root body.cc :is(.pb-aff-art-main, .ax-ribbon:not(.ax-ribbon--free), .ax-btn-grad, .ac-mgr .ac-avatar, .pf-avatar) { background: var(--cl-accent) !important; background-image: none !important; color: var(--cl-on-accent) !important; box-shadow: none !important; }
:root body.cc .ax-ribbon--free { background: var(--cl-green) !important; box-shadow: none !important; }
:root body.cc .ax-res.is-pinned { border-color: color-mix(in srgb, var(--cl-accent) 45%, var(--cl-line)) !important; background: var(--cl-card) !important; }
:root body.cc .ax-res-fallback { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; }
:root body.cc .sidebar-referral { background: var(--cl-card) !important; background-image: none !important; border: 1px solid var(--cl-line) !important; color: var(--cl-ink) !important; }
:root body.cc .sidebar-referral :is(a, button):not(.btn) { color: var(--cl-accent-ink) !important; }

/* store: one accent for every plan card (no rainbow borders); featured plan carries it on the border */
:root body.cc .ps-plan { --plan-accent: var(--cl-accent) !important; border-color: var(--cl-line) !important; box-shadow: none !important; }
:root body.cc .ps-plan.is-featured { border-color: var(--cl-accent) !important; box-shadow: 0 0 0 1px var(--cl-accent) !important; }
:root body.cc .ps-plan :is(.ps-ribbon, .ps-plan-ribbon, [class*="ribbon"]) { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
/* a plan badge with its own colour (Products → Edit → Plan badge) re-tints that card */
:root body.cc .ps-plan.has-badge-color { --cl-accent: var(--badge-color) !important; --cl-on-accent: #fff !important; }
:root body.cc .client-content .ps-cat-list a { color: var(--cl-ink-2) !important; }
:root body.cc .client-content .ps-cat-list a:hover { background: var(--cl-hover) !important; color: var(--cl-ink) !important; }
:root body.cc .client-content .ps-cat-list a.is-active { background: var(--cl-accent-soft) !important; color: var(--cl-ink) !important; font-weight: 550; }
:root body.cc .client-content .ps-cat-list a svg { color: var(--cl-ink-3) !important; }
:root body.cc .client-content .ps-cat-list a.is-active svg { color: var(--cl-accent) !important; }

/* domain extension badges: the muted palette instead of saturated brights */
:root body.cc .t0 { --dmx-c: var(--cl-accent) !important; } :root body.cc .t1 { --dmx-c: #4d7c4f !important; } :root body.cc .t2 { --dmx-c: #3d6a99 !important; }
:root body.cc .t3 { --dmx-c: #b07a2a !important; } :root body.cc .t4 { --dmx-c: #6a5a9e !important; } :root body.cc .t5 { --dmx-c: #b4412f !important; }
:root body.cc .t6 { --dmx-c: #3c7570 !important; } :root body.cc .t7 { --dmx-c: #73726c !important; }

/* invoice document on screen: same accent as the rest of the client area (the document itself stays white) */
:root body.cc .inv-doc { --inv-accent: var(--cl-brand, #c6613f) !important; border-color: var(--cl-line) !important; box-shadow: none !important; }

/* ---------- 18. Motion ---------- */
@keyframes cm-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cm-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cm-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cm-toast-up { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cm-toast-down { to { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes cm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cm-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes cm-draw-long { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@keyframes cm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cm-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cm-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(7deg); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(3deg); } 80% { transform: rotate(-2deg); } }
@keyframes cm-blob { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cm-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes cm-check-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* page enter: the content column fades/slides in once */
:root body.cc .client-content { animation: cm-fade-up .38s var(--cl-ease) both !important; }
/* staggered entrance: cards in grids / lists rise one after another (pure CSS, so nothing flashes before JS runs) */
@media (prefers-reduced-motion: no-preference) {
  :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > * { animation: cm-rise .5s var(--cl-ease) both; }
  :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > :nth-child(2) { animation-delay: 50ms; }
  :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > :nth-child(3) { animation-delay: 100ms; }
  :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > :nth-child(4) { animation-delay: 150ms; }
  :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > :nth-child(5) { animation-delay: 200ms; }
  :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > :nth-child(n+6) { animation-delay: 250ms; }
  :root body.cc .client-content .dash-grid > .dash-col:nth-child(2) > * { animation-delay: 120ms; }
  :root body.cc .client-content .dash-grid > .dash-col:nth-child(2) > :nth-child(n+2) { animation-delay: 180ms; }
}
/* submit button busy state (client-motion.js): same size, label hidden, spinner centred */
:root body.cc .btn.cm-busy { position: relative; color: transparent !important; pointer-events: none; }
:root body.cc .btn.cm-busy > * { visibility: hidden; }
:root body.cc .btn.cm-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid var(--cm-spin, var(--cl-on-accent)); border-right-color: transparent; animation: cm-spin .7s linear infinite;
}
:root body.cc :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .btn-ghost).cm-busy { --cm-spin: var(--cl-ink-2); }
@keyframes cm-spin { to { transform: rotate(360deg); } }
/* hover lift on clickable cards */
:root body.cc :is(a.dash-stat, a.dash-att-item, .dash-quick a, a.ps-card, a.ac-card, a.pb-card, a.client-card, a.ax-card, .ax-res, a.kb-cat, a.ac-article-link, a.ac-quick, .ps-plan, .plan-card, .ps-svc-card, a.cm-lift, .cm-lift) {
  transition: transform .2s var(--cl-ease), border-color .2s ease, box-shadow .2s ease, background-color .15s ease !important;
}
:root body.cc :is(a.dash-stat, a.dash-att-item, a.ps-card, a.ac-card, a.pb-card, a.client-card, a.ax-card, .ax-res, .ps-plan, .plan-card, .ps-svc-card, .cm-lift):hover {
  transform: translateY(-2px) !important; border-color: var(--cl-line-strong) !important; box-shadow: var(--cl-shadow-lift) !important;
}
:root body.cc :is(a.dash-stat, a.dash-att-item):hover :is(.dash-stat-ico, .dash-att-ico) { transform: scale(1.06); }
:root body.cc :is(.dash-stat-ico, .dash-att-ico) { transition: transform .25s var(--cl-ease); }
/* skeleton shimmer while async blocks load */
:root body.cc :is(.si-loading, .cm-skeleton, [aria-busy="true"] > .si-loading) {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 14px 16px !important;
  color: var(--cl-ink-3) !important; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, var(--cl-sunken) 0%, var(--cl-sunken) 35%, color-mix(in srgb, var(--cl-card) 70%, var(--cl-sunken)) 50%, var(--cl-sunken) 65%, var(--cl-sunken) 100%) !important;
  background-size: 300% 100% !important; animation: cm-shimmer 1.4s linear infinite;
}
:root body.cc .si-spinner { border-color: var(--cl-line) !important; border-top-color: var(--cl-accent) !important; }
/* counters never shift the layout */
:root body.cc [data-cm-count] { font-variant-numeric: tabular-nums; }
/* success check (client-motion.js after a successful form submit) */
.cm-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cl-green); color: #fff; animation: cm-check-pop .4s cubic-bezier(.3, 1.5, .5, 1) both; }
.cm-check svg path { stroke-dasharray: 24; animation: cm-draw .45s .15s ease both; }
/* modals */
:root body.cc :is(.modal-dialog, .modal-content, .credit-modal, .ax-modal, dialog) { border-radius: 14px !important; border: 1px solid var(--cl-line) !important; box-shadow: var(--cl-shadow-pop) !important; background: var(--cl-card) !important; }
:root body.cc :is(.modal-overlay.open, .modal-overlay.active) :is(.modal-dialog, .modal-content, .modal) { animation: cm-fade-up .26s var(--cl-ease) both; }
:root body.cc dialog[open] { animation: cm-fade-up .26s var(--cl-ease) both; }

/* ---------- 19. Public header / footer, mobile chrome ---------- */
:root body.cc .public-header { background: color-mix(in srgb, var(--cl-canvas) 88%, transparent) !important; border-bottom: 1px solid var(--cl-line-soft) !important; box-shadow: none !important; }
:root body.cc .public-brand strong, :root body.cc .public-footer-brand { font-family: var(--cl-serif) !important; font-weight: 600 !important; color: var(--cl-ink) !important; }
:root body.cc .public-brand-mark:not(.has-logo) { background: var(--cl-accent) !important; }
:root body.cc .public-links a { color: var(--cl-ink-2) !important; }
:root body.cc .public-links a:hover { color: var(--cl-ink) !important; }
:root body.cc .public-footer { background: var(--cl-side) !important; border-top: 1px solid var(--cl-line-soft) !important; }
:root body.cc .bottom-nav { background: color-mix(in srgb, var(--cl-card) 92%, transparent) !important; border-top: 1px solid var(--cl-line) !important; box-shadow: none !important; }
:root body.cc .bottom-nav-item { color: var(--cl-ink-3) !important; }
:root body.cc .bottom-nav-item.active { color: var(--cl-accent) !important; }
:root body.cc .bottom-nav-fab { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--cl-accent) 35%, transparent) !important; }
:root body.cc .help-fab { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; border: 0 !important; box-shadow: var(--cl-shadow-lift) !important; }
:root body.cc .help-fab:hover { transform: translateY(-2px); }

@media (max-width: 1024px) {
  :root body.cc .client-content { padding: 22px 20px 96px; }
  :root body.cc .cm-hero-art { width: 200px; height: 130px; }
}
@media (max-width: 760px) {
  :root body.cc .client-content { padding: 18px 16px 96px; }
  :root body.cc .cm-hero { grid-template-columns: 1fr; padding: 22px 20px; gap: 6px; }
  :root body.cc .cm-hero-art { order: -1; width: 168px; height: 110px; margin: -6px 0 0 -8px; }
  :root body.cc .cm-hero-title { font-size: 25px !important; }
  :root body.cc :is(.client-page-title, .page-title, .page-header h1, .client-page-header h1, .ps-title, .ac-title, .pb-title) { font-size: 24px !important; }
  :root body.cc :is(.dash-stat-value, .kpi-val, .dash-wallet-balance) { font-size: 24px !important; }
  :root body.cc .client-header .topbar-title { font-size: 17px !important; }
  :root body.cc :is(.dash-stats, .ps-stats) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* the page never scrolls sideways; wide tables scroll inside their card */
:root body.cc .client-main { overflow-x: clip; }
:root body.cc :is(.table-responsive, .table-scroll, .table-wrap, .pb-table-wrap, .ac-table-wrap) { max-width: 100%; overflow-x: auto; }

/* ---------- 20. Reduced motion: no non-essential movement ---------- */
@media (prefers-reduced-motion: reduce) {
  :root body.cc *, :root body.cc *::before, :root body.cc *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  :root body.cc :is(.si-loading, .cm-skeleton) { animation: none !important; }
  :root body.cc :is(a.dash-stat, a.dash-att-item, a.ps-card, a.ac-card, a.pb-card, a.client-card, .ps-plan, .plan-card, .cm-lift, .help-fab):hover { transform: none !important; }
  :root body.cc :is(.btn, .icon-btn, .bottom-nav-item):active { transform: none !important; }
}

/* ---------- No page title block (same as the admin) ----------
   Breadcrumb + title + description are hidden on every client page; the h1 stays for screen readers.
   Header buttons (e.g. "Order new", "Open ticket") stay as a slim right-aligned toolbar. Feature heroes with
   their own content (domain search hub, knowledge base search, referral hero, team banner) are left alone. */
:is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) > :is(.pb-head-main, .ps-head-main, .ac-head-main, div:not([class*="action"]):not(.btn):not(:has(.btn, button, form, a.btn))),
:is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) :is(.pb-crumbs, .client-page-title, .client-page-desc, .ps-title, .ps-desc, .si-title, .pb-title, .pb-desc, .ac-desc) {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
:is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) {
  display: flex !important; justify-content: flex-end !important; align-items: center !important; flex-wrap: wrap; gap: 8px;
  min-height: 0 !important; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
:is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head):not(:has(.btn, button, form, select, input, a[class*="btn"])) { display: none !important; }
@media (max-width: 768px) {
  :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) > :has(.btn) { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) > :has(.btn) > .btn { flex: 1 1 auto; justify-content: center; }
}
/* breadcrumb line above pages: hidden like the admin (the sidebar shows where you are) */
.client-content > nav.page-crumbs, .client-content nav.page-crumbs, .pb-crumbs { display: none !important; }
/* the active sub-item already has a background pill; the old marker dot was positioned for the previous padding */
:root body.cc .client-sidebar .nav-sub .nav-item.active > a::after { display: none !important; }
/* help button: white icon on the blue circle */
:root body.cc .help-fab, :root body.cc .help-fab * { color: var(--cl-on-accent) !important; }
:root body.cc .help-fab svg { stroke: currentColor !important; }

/* ==========================================================================
   21. ICON MOTION (v1.2) — tasteful micro-interactions on every icon family.
   transform / opacity / stroke-dashoffset only (no layout shift); all of it is
   switched off by section 20 + the reduced-motion block at the end.
   client-motion.js adds: pathLength="1" on icons it draws (.cm-draw / sidebar),
   data-cm-ico="spin|down|up|plus|trash|send|ext|search|copy|print|eye" on buttons,
   .cm-live dots on live status pills, .cm-copied while a copy shows its check.
   ========================================================================== */
@keyframes cm-stroke { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes cm-nudge { 0% { transform: none; } 35% { transform: translateX(1px) scale(1.16) rotate(-8deg); } 70% { transform: scale(.96) rotate(3deg); } 100% { transform: scale(1.06); } }
@keyframes cm-pulse-once { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes cm-ring { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cm-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes cm-wiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes cm-bell { 0%, 22%, 100% { transform: rotate(0); } 3% { transform: rotate(16deg); } 7% { transform: rotate(-14deg); } 11% { transform: rotate(10deg); } 15% { transform: rotate(-6deg); } 19% { transform: rotate(2deg); } }
@keyframes cm-bob-down { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(3px); } 70% { transform: translateY(-1px); } }
@keyframes cm-bob-up { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } 70% { transform: translateY(1px); } }
@keyframes cm-spin-once { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cm-fly { 0% { transform: none; } 45% { transform: translate(4px, -4px); opacity: 0; } 46% { transform: translate(-4px, 4px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cm-roll { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(3px) rotate(-6deg); } 70% { transform: translateX(-1px); } }
@keyframes cm-morph-in { from { transform: scale(.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cm-float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cm-msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cm-count-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* every animated icon pivots around its own centre */
:root body.cc :is(.client-sidebar, .client-header, .client-content, .bottom-nav, .help-fab) svg { transform-box: fill-box; transform-origin: 50% 50%; }
:root body.cc svg.cm-draw[data-cm-norm] :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: cm-stroke .9s var(--cm-d, .15s) var(--cl-ease) backwards; }

/* --- 21a. Sidebar: icon nudges + redraws on hover; the active icon pulses once --- */
:root body.cc .client-sidebar :is(.nav-item > a, .nav-group-toggle, .nav-logout-btn) .nav-link-content > svg,
:root body.cc .client-sidebar .nav-logout-btn > svg { transition: color .15s ease, transform .25s var(--cl-ease) !important; }
:root body.cc .client-sidebar :is(.nav-item > a, .nav-group-toggle):hover .nav-link-content > svg { animation: cm-nudge .5s var(--cl-ease) both; }
:root body.cc .client-sidebar :is(.nav-item > a, .nav-group-toggle):hover .nav-link-content > svg[data-cm-norm] :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: cm-stroke .55s var(--cl-ease) backwards; }
:root body.cc .client-sidebar .nav-item.active > a .nav-link-content > svg { animation: cm-pulse-once .7s .35s var(--cl-ease) both; }
/* a few icons get their own gesture */
:root body.cc .client-sidebar a[href="/client/notifications"]:hover .nav-link-content > svg { animation: cm-wiggle .7s ease both; transform-origin: 50% 10%; }
:root body.cc .client-sidebar a[href="/client/store"]:hover .nav-link-content > svg { animation: cm-roll .55s var(--cl-ease) both; }
:root body.cc .client-sidebar a[href="/client/downloads"]:hover .nav-link-content > svg { animation: cm-bob-down .55s ease both; }
:root body.cc .client-sidebar a[href="/client/cloud-backups"]:hover .nav-link-content > svg { animation: cm-bob-up .55s ease both; }
:root body.cc .client-sidebar .nav-logout-btn:hover svg { transform: translateX(3px); }
:root body.cc .client-sidebar .nav-group-toggle .nav-chevron { transition: transform .25s var(--cl-ease) !important; }
:root body.cc .client-sidebar .sidebar-wallet:hover :is(.sidebar-wallet-ico, .sidebar-wallet-icon) { animation: cm-pulse-once .5s var(--cl-ease); }
:root body.cc .client-sidebar .sidebar-wallet :is(.sidebar-wallet-ico, .sidebar-wallet-icon) { transition: transform .2s var(--cl-ease); }

/* --- 21b. Top bar: bell wiggles while there is something unread; toggles turn --- */
:root body.cc .client-header .notif-btn:has(.notif-count) > svg { transform-origin: 50% 8%; animation: cm-bell 4.5s 1.2s ease-in-out 3; }
:root body.cc .client-header .notif-btn:hover > svg { animation: cm-wiggle .7s ease both; transform-origin: 50% 8%; }
:root body.cc .client-header .notif-count { animation: cm-count-pop .45s .9s cubic-bezier(.3, 1.5, .5, 1) both; }
:root body.cc .client-header :is(.theme-toggle, .rail-toggle, .icon-btn, .topbar-cart-ico) svg { transition: transform .35s var(--cl-ease); }
:root body.cc .client-header .theme-toggle:hover svg { transform: rotate(-24deg) scale(1.08); }
:root body.cc .client-header .rail-toggle:hover svg { transform: translateX(-2px); }
:root body.cc .client-header .topbar-cart:hover .topbar-cart-ico svg { animation: cm-roll .55s var(--cl-ease) both; }
:root body.cc .client-header .topbar-pin:hover svg:first-child { animation: cm-wiggle .6s ease both; }

/* --- 21c. Stat & icon chips: draw on load (JS), float + tilt on hover --- */
:root body.cc :is(.dash-stat-ico, .dash-att-ico, .ac-ico, .pb-ico, .pb-aff-stat-ico, .ps-plan-ico, .ps-tile-ico, .cpt-tile-ico, .ac-choice-ico, .sbx-plan-ico, .si-action-ico, .si-score-ico, .kpi-icon, .cm-hico, .cm-row-ico, .pb-file-ico, .notif-ico) {
  transition: transform .3s var(--cl-ease), background-color .2s ease, box-shadow .3s ease !important; will-change: auto;
}
:root body.cc :is(.dash-stat-ico, .dash-att-ico, .ac-ico, .pb-ico, .pb-aff-stat-ico, .ps-plan-ico, .ps-tile-ico, .cpt-tile-ico, .ac-choice-ico, .sbx-plan-ico, .si-action-ico, .kpi-icon, .cm-row-ico, .pb-file-ico) svg { transition: transform .35s var(--cl-ease); }
:root body.cc :is(.dash-stat, .pb-aff-stat, .ps-plan, .ps-tile, .cpt-tile, .ac-choice, .sbx-plan, .si-action, .kpi-card, .client-kpi-card, .dash-att-item, .pb-file, a, label, button):hover > :is(.dash-stat-ico, .dash-att-ico, .ac-ico, .pb-ico, .pb-aff-stat-ico, .ps-plan-ico, .ps-tile-ico, .cpt-tile-ico, .ac-choice-ico, .sbx-plan-ico, .si-action-ico, .kpi-icon, .cm-row-ico, .pb-file-ico) {
  transform: translateY(-2px) scale(1.06) !important; box-shadow: 0 6px 14px color-mix(in srgb, currentColor 18%, transparent) !important;
}
:root body.cc :is(.dash-stat, .pb-aff-stat, .ps-plan, .ps-tile, .cpt-tile, .ac-choice, .sbx-plan, .si-action, .kpi-card, .client-kpi-card, .dash-att-item, .pb-file, a, label, button):hover > :is(.dash-stat-ico, .dash-att-ico, .ac-ico, .pb-ico, .pb-aff-stat-ico, .ps-plan-ico, .ps-tile-ico, .cpt-tile-ico, .ac-choice-ico, .sbx-plan-ico, .si-action-ico, .kpi-icon, .cm-row-ico, .pb-file-ico) svg { transform: rotate(-8deg); }
:root body.cc :is(.dash-card, .ac-card, .ps-card, .pb-card, .client-card):hover .cm-hico { transform: rotate(-6deg) scale(1.06); }
:root body.cc :is(.dash-row-list li, .dash-service, tr):hover .cm-row-ico { transform: scale(1.08); }

/* --- 21d. Buttons: arrows slide, refresh spins, downloads bounce, copy morphs to a check --- */
:root body.cc :is(.btn, .icon-btn, .si-icon-btn, .pb-btn, a, button) > svg { transition: transform .25s var(--cl-ease); }
:root body.cc :is(.dash-stat-link, .dash-att-cta, .dash-card-action, .card-head a, .ac-card-head a, .ps-card-head a) svg { transition: transform .22s var(--cl-ease); }
:root body.cc :is(a.dash-stat, a.dash-att-item):hover :is(.dash-stat-link, .dash-att-cta) svg:last-child,
:root body.cc :is(.dash-card-action, .card-head a, .ac-card-head a, .ps-card-head a, .dash-att-cta):hover > svg:last-child { transform: translateX(3px); }
:root body.cc [data-cm-ico="spin"]:hover > svg { transform: rotate(180deg); transition-duration: .5s; }
:root body.cc [data-cm-ico="spin"].cm-spinning > svg { animation: cm-spin-once .7s var(--cl-ease); }
:root body.cc [data-cm-ico="down"]:hover > svg { animation: cm-bob-down .6s ease 2; }
:root body.cc [data-cm-ico="up"]:hover > svg { animation: cm-bob-up .6s ease 2; }
:root body.cc [data-cm-ico="plus"]:hover > svg:first-child { transform: rotate(90deg); }
:root body.cc [data-cm-ico="trash"]:hover > svg { animation: cm-wiggle .55s ease; }
:root body.cc [data-cm-ico="send"]:hover > svg { animation: cm-fly .6s var(--cl-ease); }
:root body.cc [data-cm-ico="ext"]:hover > svg { transform: translate(2px, -2px); }
:root body.cc [data-cm-ico="search"]:hover > svg { transform: rotate(-12deg) scale(1.1); }
:root body.cc [data-cm-ico="print"]:hover > svg { animation: cm-bob-down .5s ease; }
:root body.cc [data-cm-ico="eye"]:hover > svg { transform: scaleY(.75); }
:root body.cc [data-cm-ico="copy"]:hover > svg { transform: translate(-1px, -1px); }
:root body.cc .cm-copied { color: var(--cl-green) !important; }
:root body.cc .cm-copied > svg { animation: cm-morph-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
:root body.cc .cm-copied > svg path[pathLength] { animation: cm-stroke .4s .1s ease backwards; }

/* --- 21e. Status pills: a soft live dot for active / running / pending states --- */
:root body.cc .cm-live { display: inline-flex !important; align-items: center; gap: 6px; }
:root body.cc .cm-dot { position: relative; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:root body.cc .cm-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: cm-ring 2.4s ease-out infinite; }
:root body.cc .cm-live.is-wait .cm-dot { animation: cm-breathe 1.8s ease-in-out infinite; }
:root body.cc .cm-live.is-wait .cm-dot::after { display: none; }
:root body.cc .cm-live.has-marker::before, :root body.cc .cm-live.has-marker > i { animation: cm-breathe 2s ease-in-out infinite; }
:root body.cc :is(.cp-dot-ok, .srv-dot-ok, .cpa-dot-ok, .pulse-dot, .pulse-green-dot) { animation: cm-breathe 2.4s ease-in-out infinite; }

/* --- 21f. Illustrations: gentle float + pointer parallax (JS sets --px/--py) --- */
:root body.cc .cm-illus { animation: cm-float-soft 6s 1.2s ease-in-out infinite; }
:root body.cc :is(.cm-illus, .cm-hero-art) > svg { transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .6s var(--cl-ease); }
:root body.cc .cm-hero-art .il-orbit { transform-box: fill-box; transform-origin: center; animation: cm-spin-once 24s linear infinite; }

/* --- 21g. Success checks draw themselves --- */
/* (drawn by .cm-draw — client-motion.js treats .dash-allset / .alert-success icons as chips) */
:root body.cc :is(.dash-allset, .alert-success) > svg { animation: cm-pulse-once .6s 1s var(--cl-ease) both; }

/* --- 21h. Mobile chrome --- */
:root body.cc .bottom-nav-item.active svg { animation: cm-pulse-once .6s .3s var(--cl-ease) both; }
:root body.cc .bottom-nav-item svg, :root body.cc .bottom-nav-fab svg { transition: transform .3s var(--cl-ease); }
:root body.cc .bottom-nav-cta:hover .bottom-nav-fab svg, :root body.cc .bottom-nav-cta:active .bottom-nav-fab svg { transform: rotate(90deg); }
:root body.cc .help-fab:hover svg { animation: cm-wiggle .7s ease; }

/* ==========================================================================
   22. POLISH (v1.2) — depth, chips, tables, plans, threads, forms.
   ========================================================================== */
/* depth: cards sit a hair above the canvas, rounder corners, soft shadow on hover for interactive cards */
:root body.cc :is(.client-card, .data-card, .chart-card, .form-card, .guh-card, .dash-card, .ps-card, .pb-card, .ac-card, .news-card, .plan-card, .srv-card, .whmcs-section-panel, .checkout-summary, .checkout-main, .dash-stat, .client-kpi-card, .kpi-card, .pb-aff-stat, .ac-notif, .dash-att-item) {
  border-radius: 14px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02) !important;
}
:root[data-theme="dark"] body.cc :is(.client-card, .data-card, .dash-card, .ps-card, .pb-card, .ac-card, .dash-stat, .pb-aff-stat, .ac-notif, .dash-att-item) { box-shadow: none !important; }
:root body.cc :is(a.dash-stat, a.dash-att-item, a.ps-card, a.ac-card, a.pb-card, a.client-card, .ps-plan, .ac-notif, .pb-aff-stat, .ps-tile, .cpt-tile):hover { box-shadow: var(--cl-shadow-lift) !important; }
:root body.cc :is(.ac-notif, .pb-aff-stat) { transition: box-shadow .2s ease, border-color .2s ease, transform .2s var(--cl-ease); }

/* stat tiles: one calm accent (semantic amber / red / green stay); a faint accent glow in the corner */
:root body.cc :is(.dash-stat, .pb-aff-stat) {
  background-image: radial-gradient(150px 120px at 100% 0%, color-mix(in srgb, var(--cl-accent) 6%, transparent), transparent 75%) !important;
}
:root body.cc :is(.dash-stat-ico, .pb-aff-stat-ico):is(.tone-cyan, .tone-teal, .tone-violet, .tone-purple, .tone-info, .tone-blue, .tone-primary) {
  background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important;
}
:root body.cc .pb-aff-stat-ico[class*="tone-"] { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; }
:root body.cc :is(.dash-stat-ico, .pb-aff-stat-ico) { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
:root body.cc :is(.ps-stat-sub, .dash-stat-link) { font-size: 12.5px !important; }

/* section headers: the title chip is a touch bigger, card heads breathe */
:root body.cc .cm-hico { width: 30px; height: 30px; border-radius: 9px; }

/* tables: header row sticks under the top bar on long lists, tidy numerals */
:root body.cc :is(.client-table, .pb-table, .sl-table, .ac-table) thead th {
  position: sticky; top: var(--header-height); z-index: 2; background: var(--cl-card) !important; box-shadow: inset 0 -1px 0 var(--cl-line);
}
/* Inside a horizontal-scroll wrapper the wrapper is the sticky container, so top: var(--header-height) just pushed
   the header 60px down over the first row (and left an empty strip above it): keep it in place there */
:root body.cc :is(.table-responsive, .table-scroll, .table-wrap, .pb-table-wrap, .ac-table-wrap) :is(.client-table, .pb-table, .sl-table, .ac-table) thead th { position: static; }
:root body.cc :is(.client-table, .pb-table, .sl-table, .ac-table) td { font-variant-numeric: tabular-nums; }
:root body.cc .sl-table tbody tr { transition: background-color .15s ease; }
:root body.cc .sl-table tbody tr:hover td { background: var(--cl-hover) !important; }

/* store: the featured plan is clearly the one to pick */
:root body.cc .ps-plan.is-featured {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cl-accent) 7%, var(--cl-card)) 0, var(--cl-card) 46%) !important;
  box-shadow: 0 0 0 1px var(--cl-accent), 0 14px 34px color-mix(in srgb, var(--cl-accent) 16%, transparent) !important;
}
:root body.cc .ps-plan.is-featured:hover { box-shadow: 0 0 0 1px var(--cl-accent), 0 18px 40px color-mix(in srgb, var(--cl-accent) 22%, transparent) !important; }
:root body.cc .ps-plan-tag { border-radius: 999px !important; padding: 4px 12px !important; letter-spacing: .04em !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--cl-accent) 30%, transparent); }
:root body.cc .ps-plan-tag::before { content: "★"; margin-right: 5px; font-size: 10px; }
:root body.cc .ps-plan-price strong { font-size: 30px !important; letter-spacing: -.02em !important; }
:root body.cc .ps-plan-btn { min-height: 40px; border-radius: 10px !important; }
:root body.cc .ps-plan-ico { background: var(--cl-accent-soft) !important; color: var(--cl-accent) !important; }
:root body.cc .ps-plan-features svg { color: var(--cl-accent) !important; }
/* billing-cycle picker follows the accent (was orange) */
:root body.cc .cyc-row { --cyc-accent: var(--cl-accent) !important; }
:root body.cc .cyc-save { background: var(--cl-green-soft) !important; color: var(--cl-green) !important; }
:root body.cc .cyc-tag { box-shadow: 0 0 0 3px var(--cl-card) !important; }
:root body.cc .cyc-tag-best { background: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }

/* ticket thread: chat bubbles slide in, staff bubbles get a soft card, mine use the accent */
:root body.cc .ac-msg { animation: cm-msg-in .4s var(--cl-ease) both; }
:root body.cc .ac-msg:nth-child(2) { animation-delay: 60ms; } :root body.cc .ac-msg:nth-child(3) { animation-delay: 120ms; } :root body.cc .ac-msg:nth-child(n+4) { animation-delay: 180ms; }
:root body.cc .ac-msg-bubble { border-radius: 16px 16px 16px 4px !important; background: var(--cl-sunken) !important; border: 1px solid var(--cl-line-soft) !important; color: var(--cl-ink) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
:root body.cc .ac-msg--me .ac-msg-bubble { border-radius: 16px 16px 4px 16px !important; background: var(--cl-accent) !important; border-color: var(--cl-accent) !important; color: var(--cl-on-accent) !important; }
:root body.cc .ac-msg--ai .ac-msg-bubble { background: var(--cl-accent-soft) !important; border-color: color-mix(in srgb, var(--cl-accent) 20%, var(--cl-line)) !important; }
:root body.cc .ac-composer .ac-editor { border-radius: 12px !important; transition: border-color .15s ease, box-shadow .2s ease; }
:root body.cc .ac-composer .ac-editor:focus-within { border-color: var(--cl-accent) !important; box-shadow: 0 0 0 3px var(--cl-accent-ring) !important; }

/* forms: grouped fields read as one block, labels sit closer */
:root body.cc :is(.form-control, .form-select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"]):not(.topbar-search input):hover:not(:focus) { border-color: var(--cl-line-strong) !important; }
:root body.cc fieldset { border-color: var(--cl-line) !important; border-radius: 12px !important; }

/* notifications page: unread items carry an accent edge */
:root body.cc .ac-notif.is-unread { box-shadow: inset 3px 0 0 var(--cl-accent), 0 1px 2px rgba(15, 23, 42, .04) !important; }

/* tabs: the active tab chip lifts a little */
:root body.cc :is(.seg-tabs, .group-tabs, .seg-control, .segmented, .ps-tabs, .pb-tabs, .ac-tabs, .pb-filters) :is(a, button) { border-radius: 8px !important; }

/* ==========================================================================
   23. RESPONSIVE REFINEMENTS (v1.2)
   ========================================================================== */
@media (max-width: 760px) {
  /* touch targets ≥ 40px */
  :root body.cc .client-content :is(.btn, .btn-sm, .pb-btn, .ps-plan-btn, .si-icon-btn, .ac-notif-view, .dm-tab, .ps-act, .ct-chip, .ct-rule-remove, .credit-preset, .page-link, .pagination a, .pagination button, .si-seg-btn, .ps-seg-btn, .ac-chip-btn, .ax-icon-btn) { min-height: 40px !important; }
  :root body.cc .client-content :is(.si-icon-btn, .pb-btn--icon, .ct-rule-remove) { min-width: 40px !important; }
  :root body.cc .client-header :is(.icon-btn, .mobile-menu-btn) { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  :root body.cc .client-content :is(.seg-tabs, .group-tabs, .ps-tabs, .pb-tabs, .ac-tabs, .pb-filters) :is(a, button) { min-height: 38px; }
  /* tables that don't stack scroll inside their card, never the page */
  :root body.cc .client-content table:not(.is-stackable) { max-width: 100%; }
  /* sticky header is for desktop lists only */
  :root body.cc :is(.client-table, .pb-table, .sl-table, .ac-table) thead th { position: static; }
  /* notifications: text gets the full width, the action drops under it */
  :root body.cc .ac-notif { flex-wrap: wrap; }
  :root body.cc .ac-notif-main { flex: 1 1 calc(100% - 60px); }
  /* plan cards: one per row with comfortable padding */
  :root body.cc .ps-plan-grid { grid-template-columns: 1fr !important; }
  /* the services list stacks into labelled cards */
  :root body.cc .sl-table.is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root body.cc .sl-table.is-stackable, :root body.cc .sl-table.is-stackable :is(tbody, tr, td) { display: block; width: 100%; }
  :root body.cc .sl-table.is-stackable tr { padding: 12px 16px; border-bottom: 1px solid var(--cl-line-soft); }
  :root body.cc .sl-table.is-stackable td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 !important; border: 0 !important; text-align: right; }
  :root body.cc .sl-table.is-stackable td[data-label]::before { content: attr(data-label); flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--cl-ink-3); text-align: left; }
  :root body.cc .sl-table.is-stackable td:first-child { display: block; text-align: left; padding-bottom: 8px !important; }
  :root body.cc .sl-table.is-stackable td:first-child::before { display: none; }
  :root body.cc .sl-table.is-stackable td:last-child .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  :root body.cc .client-content { padding-left: 14px; padding-right: 14px; }
  :root body.cc .pb-aff-stat { flex-direction: column; align-items: flex-start; }
  :root body.cc :is(.dash-stat-value, .kpi-val) { font-size: 22px !important; }
}

/* --- 21i. Brand logo: pops in on load; the default cloud mark "uploads" now and then and a sheen crosses it;
       uploaded logos fade in and lift on hover. Sidebar, collapsed rail and the phone top bar. --- */
@keyframes cm-logo-in { 0% { opacity: 0; transform: scale(.5) rotate(-20deg); } 70% { opacity: 1; transform: scale(1.1) rotate(4deg); } 100% { transform: none; } }
/* opacity only: scaling / rotating a raster logo resamples it and makes it look blurry */
@keyframes cm-logo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-logo-name { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes cm-logo-upload { 0%, 6%, 100% { transform: none; opacity: 1; } 12% { transform: translateY(-6px); opacity: 0; } 13% { transform: translateY(6px); opacity: 0; } 20% { transform: none; opacity: 1; } }
@keyframes cm-logo-sheen { 0%, 72% { transform: translateX(-160%) skewX(-20deg); } 88%, 100% { transform: translateX(260%) skewX(-20deg); } }
@media (prefers-reduced-motion: no-preference) {
  :root body.cc :is(.client-sidebar, .client-header) .brand-icon { position: relative; overflow: hidden; transition: transform .35s var(--cl-ease); }
  :root body.cc :is(.client-sidebar, .client-header) .brand-icon:not(.has-logo) { animation: cm-logo-in .6s var(--cl-ease) .1s backwards; }
  :root body.cc :is(.client-sidebar, .client-header) .brand-icon:not(.has-logo) > svg > path:not(:first-child) { animation: cm-logo-upload 6s ease-in-out 1.4s infinite; }
  :root body.cc :is(.client-sidebar, .client-header) .brand-icon:not(.has-logo)::after {
    content: ""; position: absolute; inset: -2px auto -2px 0; width: 45%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: cm-logo-sheen 7s ease-in-out .9s infinite backwards;
  }
  /* .brand-link clips overflow (long names): room inside the clip for the tilted icon, layout unchanged */
  :root body.cc .client-sidebar .brand-link { padding: 5px; margin: -5px; }
  /* the tilt is for the vector mark only; an uploaded picture logo stays still and sharp */
  :root body.cc .client-sidebar .brand-link:hover .brand-icon:not(.has-logo) { transform: rotate(-8deg) scale(1.08); }
  :root body.cc .client-sidebar .brand-name { display: inline-block; animation: cm-logo-name .5s var(--cl-ease) .25s backwards; transition: transform .3s var(--cl-ease); }
  :root body.cc .client-sidebar .brand-link:hover .brand-name { transform: translateX(2px); }
  /* uploaded logo images (square mark, wide logo, phone top bar) */
  :root body.cc :is(.client-sidebar .brand-icon.has-logo, .client-sidebar .brand-logo-wide, .client-header .topbar-brand-mobile) img { animation: cm-logo-fade .5s ease .1s backwards; }
}

/* --- 21j. More life: scroll reveal, sidebar hover slide, wallet sheen, button shine, avatar ring,
       pulsing help / order buttons, sticky-brand shadow --- */
@keyframes cm-sheen-x { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(380%) skewX(-20deg); } }
/* same frames under a second name, so hovering restarts the sweep */
@keyframes cm-sheen-x-hover { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(380%) skewX(-20deg); } }
@keyframes cm-ring-out { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cl-accent) 45%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
@keyframes cm-title-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cm-brand-shadow { from { box-shadow: 0 0 0 transparent; } to { box-shadow: 0 8px 14px -12px rgba(15, 23, 42, .45); } }
@media (prefers-reduced-motion: no-preference) {
  /* cards below the fold rise in as they scroll into view (client-motion.js adds .cm-reveal, then .cm-in) */
  /* the load-time stagger (fill: both) would pin these visible, and it only ever played off-screen: switch it off */
  :root body.cc .cm-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  :root body.cc .cm-reveal.cm-in { opacity: 1 !important; transform: none !important; }

  /* sidebar: labels slide a touch on hover (not the current page, not the icon rail) */
  :root:not(.sb-rail) body.cc .client-sidebar :is(.nav-item > a, .nav-group-toggle) .nav-link-content { transition: transform .22s var(--cl-ease); }
  :root:not(.sb-rail) body.cc .client-sidebar :is(.nav-item:not(.active) > a, .nav-group-toggle):hover .nav-link-content { transform: translateX(3px); }

  /* wallet: a sheen crosses once after load and again on hover; the + turns */
  :root body.cc .client-sidebar .sidebar-wallet { position: relative; overflow: hidden; }
  :root body.cc .client-sidebar .sidebar-wallet::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cl-accent) 16%, transparent), transparent);
    transform: translateX(-160%) skewX(-20deg); animation: cm-sheen-x 1.1s ease-in-out 1.2s backwards;
  }
  :root body.cc .client-sidebar .sidebar-wallet:hover::after { animation: cm-sheen-x-hover .8s ease-in-out; }
  :root body.cc .client-sidebar .sidebar-wallet-add { transition: transform .3s var(--cl-ease); }
  :root body.cc .client-sidebar .sidebar-wallet:hover .sidebar-wallet-add { transform: rotate(90deg) scale(1.15); }

  /* primary buttons: a light sweep on hover (::after is the loading spinner, so the shine uses ::before) */
  :root body.cc .btn-primary { position: relative; overflow: hidden; }
  :root body.cc .btn-primary::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-160%) skewX(-20deg);
  }
  :root body.cc .btn-primary:hover::before { animation: cm-sheen-x-hover .75s ease-in-out; }

  /* top bar: greeting eases in; the avatar rings when pointed at */
  :root body.cc .client-header .topbar-title { animation: cm-title-in .5s var(--cl-ease) .1s backwards; }
  :root body.cc .client-header .user-avatar { transition: transform .25s var(--cl-ease); }
  :root body.cc .client-header .header-avatar-btn:hover .user-avatar { transform: scale(1.06); animation: cm-ring-out .9s ease-out; }

  /* help button and the phone "order" button pulse a few times after load to say "here I am" */
  :root body.cc .help-fab { animation: cm-ring-out 1.8s ease-out 2.5s 3; }
  :root body.cc .bottom-nav-cta .bottom-nav-fab { animation: cm-ring-out 1.8s ease-out 1.5s 2; }

  /* the sticky logo row casts a soft shadow once the menu scrolls under it (scroll-driven; no-op where unsupported) */
  @supports (animation-timeline: scroll()) {
    :root body.cc .client-sidebar .sidebar-brand { animation: cm-brand-shadow linear both; animation-timeline: scroll(nearest block); animation-range: 0 32px; }
  }
}
@media print { :root body.cc .cm-reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- 24. Reduced motion: icon motion fully off ---------- */
@media (prefers-reduced-motion: reduce) {
  :root body.cc svg, :root body.cc svg *, :root body.cc .cm-illus, :root body.cc .cm-dot, :root body.cc .cm-dot::after, :root body.cc .cm-live::before, :root body.cc .cm-live > i, :root body.cc .ac-msg { animation: none !important; transition: none !important; }
  :root body.cc :is(.cm-illus, .cm-hero-art) > svg { transform: none !important; }
  :root body.cc .cm-dot::after { display: none; }
  :root body.cc [data-cm-ico]:hover > svg, :root body.cc :hover > :is(.dash-stat-ico, .dash-att-ico, .ac-ico, .pb-ico, .pb-aff-stat-ico, .ps-plan-ico, .ps-tile-ico, .cpt-tile-ico, .ac-choice-ico, .sbx-plan-ico, .si-action-ico, .kpi-icon, .cm-row-ico, .pb-file-ico), :root body.cc :hover > :is(.dash-stat-ico, .pb-aff-stat-ico) svg { transform: none !important; }
}