/*
 * LITREVO R50 — reference typography and content-page design system.
 * Business dashboards and the global header/sidebar deliberately retain their
 * previous design; these overrides style the remaining page content only.
 */

body.app-body.ui-reference-light:not(.page-dashboard) {
  --glass-navy: #061d42;
  --glass-navy-soft: #0a3976;
  --glass-blue: #0b65c8;
  --glass-royal: #0c1f81;
  --glass-gold: #efbd22;
  --glass-gold-deep: #bb8200;
  --glass-gold-soft: #fff5c9;
  --glass-ink: #0a294f;
  --glass-copy: #263f62;
  --glass-muted: #667892;
  --glass-line: rgba(161, 177, 197, .42);
  --glass-line-soft: rgba(185, 198, 214, .3);
  --glass-card: rgba(255, 255, 255, .82);
  --glass-card-strong: rgba(255, 255, 255, .94);
  --glass-canvas: #f5f7f6;
  --glass-shadow: 0 18px 48px rgba(7, 37, 77, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
  --glass-shadow-hover: 0 24px 58px rgba(7, 37, 77, .14), inset 0 1px 0 rgba(255, 255, 255, .98);
  --glass-radius: 22px;
}

body.app-body.ui-reference-light:not(.page-dashboard) {
  color: var(--glass-ink);
  background: var(--glass-canvas);
}

body.app-body.ui-reference-light,
body.app-body.ui-reference-light :where(a,span,strong,label,button,input,select,textarea,table,dl,dt,dd,option,time) {
  font-family: "Poppins", Arial, sans-serif !important;
}

body.app-body.ui-reference-light :where(p,small,.form-hint,.panel-head p,.settings-section-head p) {
  font-family: "Inter", Arial, sans-serif !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content {
  position: relative;
  min-height: calc(100vh - var(--topbar-height, 76px));
  padding: 28px 30px 48px !important;
  color: var(--glass-copy);
  background:
    radial-gradient(circle at 4% 2%, rgba(239, 189, 34, .12), transparent 300px),
    radial-gradient(circle at 98% 4%, rgba(34, 133, 211, .12), transparent 390px),
    linear-gradient(135deg, rgba(255, 253, 244, .94), rgba(242, 247, 250, .96) 48%, rgba(242, 249, 247, .96)) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image: radial-gradient(rgba(13, 66, 119, .42) .7px, transparent .8px);
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 360px);
  mask-image: linear-gradient(to bottom, #000, transparent 360px);
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1540px;
}

body.app-body.ui-reference-light:not(.page-dashboard) :where(h1,h2,h3,h4) {
  font-family: "Poppins", Arial, sans-serif !important;
  color: var(--glass-navy) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) :where(p,small,.form-hint) {
  color: var(--glass-muted);
}

body.app-body.ui-reference-light:not(.page-dashboard) :focus-visible {
  outline: 3px solid rgba(239, 189, 34, .42);
  outline-offset: 2px;
}

/* Page introductions use a light glass card instead of route-specific banners. */
body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar {
  position: relative;
  min-height: 112px !important;
  margin-bottom: 22px !important;
  padding: 24px 26px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 24px !important;
  color: var(--glass-ink) !important;
  background:
    radial-gradient(circle at 94% -45%, rgba(44, 132, 210, .17), transparent 245px),
    linear-gradient(118deg, rgba(255, 255, 255, .93), rgba(255, 252, 239, .82) 55%, rgba(240, 248, 252, .82)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar::before,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  border: 0 !important;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, var(--glass-navy), var(--glass-blue) 64%, var(--glass-gold)) !important;
  box-shadow: none !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar::after,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 24px;
  bottom: auto;
  left: auto;
  width: 128px;
  height: 68px;
  border: 0 !important;
  opacity: .24;
  background: radial-gradient(circle, rgba(8, 57, 111, .52) 1px, transparent 1.2px) 0 0 / 13px 13px !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy {
  position: relative;
  z-index: 2;
  gap: 17px !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-icon,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-icon {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--glass-navy), #0b569e) !important;
  box-shadow: 0 13px 27px rgba(6, 42, 87, .2), inset 0 -3px 0 var(--glass-gold) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy h1,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy h1 {
  color: var(--glass-navy) !important;
  -webkit-text-fill-color: var(--glass-navy) !important;
  font-size: clamp(27px, 2.35vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy p,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy p {
  max-width: 760px;
  margin-top: 7px !important;
  color: var(--glass-muted) !important;
  -webkit-text-fill-color: var(--glass-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-actions,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-actions {
  position: relative;
  z-index: 2;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-actions .btn,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-actions .btn {
  border-color: rgba(138, 157, 180, .42) !important;
  color: var(--glass-navy) !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 9px 22px rgba(8, 44, 86, .09) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-actions .btn-primary,
body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-actions .btn-primary {
  border-color: var(--glass-navy) !important;
  color: #fff !important;
  background: linear-gradient(112deg, var(--glass-navy), var(--glass-navy-soft)) !important;
}

/* Shared glass surfaces across both applications. */
body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .panel,.table-panel,.toolbar-card,.settings-section,.support-card,.usage-card,.stat-card,
  .automation-card,.auto-reply-card,.quick-reply-card,.workflow-card,.integration-market-card,
  .channel-market-card,.suite-card,.product-card,.price-card,.v9-price-card,.widget-card,.ai-agent-card,
  .connection-card,.voice-card,.voice-quick-card,.voice-contact-card,.ops-card,.choice-card,.plan-card,
  .chub-table-card,.tpl-table-card,.tpl-library-col,.lcp-table-card,.crm-column,.rcs-form-card,.rcs-side-card,
  .rcs-build-card,.rcs-preview-card,.platform-provider-card,.mc-panel,.mc-rate-panel,.mc-provision-panel,
  .mc-queue-panel,.r15-customer-panel,.r15-identity-panel,.r15-invoice-panel,.r15-subscription-panel,
  .r16-ledger-panel,.r18-ledger-panel,.r18-readiness-panel,.r18-subscriptions-panel,.r19-config-panel,
  .r19-health-panel,.r19-approval-panel,.r20-category-card,.r20-rate-form-panel,.r20-history-panel,
  .r21-conversation-panel,.r21-queue-panel,.r22-settings-panel,.r22-form-section,.r22-social-section,
  .r24-control-card,.r24-tax-card,.r24-offer-card,.rb-depth-card,.rb-metric-card,.rb-subscription-card,
  .rb-wallet-card,.rb-invoice-panel,.revenue-action-panel,.revenue-playbook-card,.ai-knowledge-panel
) {
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: var(--glass-radius) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(248, 251, 253, .69)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: inset 0 3px 0 var(--glass-royal), var(--glass-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .panel,.settings-section,.support-card,.automation-card,.auto-reply-card,.quick-reply-card,
  .workflow-card,.integration-market-card,.channel-market-card,.suite-card,.product-card,.price-card,
  .widget-card,.ai-agent-card,.voice-card,.ops-card,.platform-provider-card,.r20-category-card
):hover {
  border-color: rgba(239, 189, 34, .52) !important;
  box-shadow: inset 0 3px 0 var(--glass-gold), var(--glass-shadow-hover) !important;
}

body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) :is(
  .panel,.table-panel,.toolbar-card,.settings-section,.support-card,.usage-card,.stat-card,.suite-card,
  .integration-market-card,.channel-market-card,.automation-card,.quick-reply-card,.auto-reply-card,
  .workflow-card,.product-card,.price-card,.v9-price-card,.widget-card,.ai-agent-card
) {
  --biz-card-start: rgba(255, 255, 255, .9) !important;
  --biz-card-end: rgba(248, 251, 253, .69) !important;
  --biz-card-border: rgba(255, 255, 255, .9) !important;
  border-color: rgba(255, 255, 255, .9) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(248, 251, 253, .69)) !important;
  box-shadow: inset 0 3px 0 var(--glass-royal), var(--glass-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-head,.settings-section-head,.voice-card-head,.rcs-card-head) {
  min-height: 74px;
  padding: 19px 21px !important;
  border-bottom: 1px solid var(--glass-line-soft) !important;
  background: linear-gradient(100deg, rgba(255, 253, 244, .72), rgba(247, 251, 254, .68)) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-head,.settings-section-head,.voice-card-head,.rcs-card-head) h2 {
  color: var(--glass-navy) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-head,.settings-section-head,.voice-card-head,.rcs-card-head) p {
  margin-top: 5px;
  color: var(--glass-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-pad,.panel-body,.settings-section-body,.voice-card-pad) {
  padding: 21px !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .settings-section-foot {
  padding: 16px 21px !important;
  border-top: 1px solid var(--glass-line-soft) !important;
  background: rgba(255, 253, 246, .68) !important;
}

/* Hero modules are white-glass, with navy and gold providing hierarchy. */
body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .billing-hero,.commerce-hero,.suite-hero,.workspace-welcome,.ai-agent-hero,.optimizer-hero,
  .voice-hero,.ops-hero,.pricing-hero,.platform-provider-hero,.country-pricing-hero,.revenue-hero,
  .mc-hero,.r12-feature-hero,.r13-plans-hero,.r15-directory-hero,.r15-customer-hero,
  .r16-invoice-hero,.r18-payments-hero,.r19-meta-hero,.r20-rates-hero,.r21-support-hero,
  .r22-settings-hero,.r24-commercial-hero,.v10-connect-hero,.v9-plan-detail-hero
) {
  position: relative;
  isolation: isolate;
  min-height: 180px;
  padding: 28px 30px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 26px !important;
  color: var(--glass-copy) !important;
  background:
    radial-gradient(circle at 91% 7%, rgba(20, 112, 187, .16), transparent 240px),
    linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(255, 249, 224, .71) 58%, rgba(238, 248, 252, .77)) !important;
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .billing-hero,.commerce-hero,.suite-hero,.workspace-welcome,.ai-agent-hero,.optimizer-hero,
  .voice-hero,.ops-hero,.pricing-hero,.platform-provider-hero,.country-pricing-hero,.revenue-hero,
  .mc-hero,.r12-feature-hero,.r13-plans-hero,.r15-directory-hero,.r15-customer-hero,
  .r16-invoice-hero,.r18-payments-hero,.r19-meta-hero,.r20-rates-hero,.r21-support-hero,
  .r22-settings-hero,.r24-commercial-hero,.v10-connect-hero,.v9-plan-detail-hero
)::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -85px;
  bottom: -135px;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(9, 66, 121, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(9, 66, 121, .03), 0 0 0 84px rgba(239, 189, 34, .025);
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .billing-hero,.commerce-hero,.suite-hero,.workspace-welcome,.ai-agent-hero,.optimizer-hero,
  .voice-hero,.ops-hero,.pricing-hero,.platform-provider-hero,.country-pricing-hero,.revenue-hero,
  .mc-hero,.r12-feature-hero,.r13-plans-hero,.r15-directory-hero,.r15-customer-hero,
  .r16-invoice-hero,.r18-payments-hero,.r19-meta-hero,.r20-rates-hero,.r21-support-hero,
  .r22-settings-hero,.r24-commercial-hero,.v10-connect-hero,.v9-plan-detail-hero
) :is(h1,h2,h3,h4,strong) {
  color: var(--glass-navy) !important;
  -webkit-text-fill-color: var(--glass-navy) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .billing-hero,.commerce-hero,.suite-hero,.workspace-welcome,.ai-agent-hero,.optimizer-hero,
  .voice-hero,.ops-hero,.pricing-hero,.platform-provider-hero,.country-pricing-hero,.revenue-hero,
  .mc-hero,.r12-feature-hero,.r13-plans-hero,.r15-directory-hero,.r15-customer-hero,
  .r16-invoice-hero,.r18-payments-hero,.r19-meta-hero,.r20-rates-hero,.r21-support-hero,
  .r22-settings-hero,.r24-commercial-hero,.v10-connect-hero,.v9-plan-detail-hero
) :is(p,small,span:not(.status-badge)) {
  color: var(--glass-muted) !important;
  -webkit-text-fill-color: var(--glass-muted) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.eyebrow,.section-kicker,.master-dashboard-kicker) {
  color: var(--glass-gold-deep) !important;
  -webkit-text-fill-color: var(--glass-gold-deep) !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}

/* Inputs, buttons and tabs are intentionally larger and touch friendly. */
body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(154, 174, 198, .58) !important;
  border-radius: 12px !important;
  color: var(--glass-ink) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: inset 0 1px 2px rgba(7, 37, 77, .025) !important;
  font-size: 14px !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content textarea { min-height: 112px; }

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(input,select,textarea):focus {
  border-color: var(--glass-royal) !important;
  outline: none !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(12, 31, 129, .12) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.form-label,.form-group>label) {
  color: var(--glass-copy) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .btn {
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .btn-primary {
  border-color: var(--glass-royal) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(112deg, var(--glass-royal), #173ca8) !important;
  box-shadow: 0 10px 24px rgba(6, 40, 84, .2) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .btn-primary:hover {
  border-color: var(--glass-gold) !important;
  color: var(--glass-navy) !important;
  -webkit-text-fill-color: var(--glass-navy) !important;
  background: linear-gradient(105deg, #fff7cc, var(--glass-gold)) !important;
  box-shadow: 0 13px 28px rgba(173, 119, 0, .18) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .btn-secondary,
body.app-body.ui-reference-light:not(.page-dashboard) .filter-button,
body.app-body.ui-reference-light:not(.page-dashboard) .icon-button {
  border-color: rgba(155, 176, 199, .52) !important;
  color: var(--glass-navy-soft) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 7px 18px rgba(7, 38, 79, .06) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .tpl-tabs,.lcp-tabs,.voice-tabs,.r21-status-tabs,.lcp-picker-tabs,.ltb-language-tabs,.inbox-tabs
) {
  min-height: 52px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 10px 26px rgba(7, 37, 77, .06) !important;
  scrollbar-width: none;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.tpl-tab,.lcp-tab,.inbox-tab) {
  border-radius: 10px !important;
  color: var(--glass-muted) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.tpl-tab.is-active,.lcp-tab.active,.inbox-tab.active) {
  border-color: transparent !important;
  color: var(--glass-navy) !important;
  background: linear-gradient(100deg, #fff9d9, #fff) !important;
  box-shadow: inset 0 -3px var(--glass-royal), 0 7px 16px rgba(7, 37, 77, .07) !important;
}

/* Data views remain dense enough for work while gaining clear row hierarchy. */
body.app-body.ui-reference-light:not(.page-dashboard) .toolbar-card,
body.app-body.ui-reference-light:not(.page-dashboard) .chub-toolbar,
body.app-body.ui-reference-light:not(.page-dashboard) .lcp-toolbar,
body.app-body.ui-reference-light:not(.page-dashboard) .r15-directory-toolbar,
body.app-body.ui-reference-light:not(.page-dashboard) .r16-invoice-toolbar {
  min-height: 66px;
  padding: 13px 15px !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 13px 34px rgba(7, 37, 77, .075) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(.table-panel,.data-table-wrap,.chub-table-wrap,.tpl-table-wrap,.lcp-table-scroll,.r18-table-scroll,.r20-table-scroll,.mc-table-wrap,.voice-table-wrap) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.data-table,.chub-table,.tpl-table,.lcp-table,.mc-table,.voice-table,.country-rate-table,.india-rate-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.data-table,.chub-table,.tpl-table,.lcp-table,.mc-table,.voice-table,.country-rate-table,.india-rate-table) th {
  height: 52px;
  padding: 12px 15px !important;
  border-bottom: 1px solid rgba(157, 177, 199, .34) !important;
  color: #385477 !important;
  background: linear-gradient(100deg, rgba(255, 249, 220, .72), rgba(237, 246, 251, .72)) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.data-table,.chub-table,.tpl-table,.lcp-table,.mc-table,.voice-table,.country-rate-table,.india-rate-table) td {
  padding: 14px 15px !important;
  border-bottom: 1px solid rgba(183, 197, 214, .28) !important;
  color: var(--glass-copy) !important;
  background: rgba(255, 255, 255, .58) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.data-table,.chub-table,.tpl-table,.lcp-table,.mc-table,.voice-table) tbody tr:hover td {
  background: rgba(255, 248, 210, .48) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .table-primary strong { font-size: 13px !important; }
body.app-body.ui-reference-light:not(.page-dashboard) .table-primary span { font-size: 11px !important; }

body.app-body.ui-reference-light:not(.page-dashboard) .status-badge,
body.app-body.ui-reference-light:not(.page-dashboard) :is(.ref-status-chip,.lcp-status,.tpl-status,.r13-plan-status,.r15-status,.r16-invoice-status,.r20-status,.r21-status-chip,.rcs-state-badge) {
  min-height: 27px;
  border: 1px solid rgba(129, 150, 174, .16);
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .notice-banner,
body.app-body.ui-reference-light:not(.page-dashboard) .flash {
  min-height: 70px;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 11px 28px rgba(7, 37, 77, .065) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .notice-banner strong { font-size: 14px !important; }
body.app-body.ui-reference-light:not(.page-dashboard) .notice-banner p { font-size: 12px !important; line-height: 1.5; }

body.app-body.ui-reference-light:not(.page-dashboard) .empty-state,
body.app-body.ui-reference-light:not(.page-dashboard) .lcb-empty-state,
body.app-body.ui-reference-light:not(.page-dashboard) .voice-table-empty,
body.app-body.ui-reference-light:not(.page-dashboard) .mc-table-empty {
  border-radius: 20px;
  color: var(--glass-muted);
}

body.app-body.ui-reference-light:not(.page-dashboard) .empty-icon {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(145deg, var(--glass-navy), #0b619e) !important;
  box-shadow: 0 12px 25px rgba(7, 42, 86, .18), inset 0 -3px var(--glass-gold);
}

/* Settings: stable side navigation on desktop, horizontal navigation on touch layouts. */
body.app-body.ui-reference-light:not(.page-dashboard) .settings-layout {
  align-items: start;
  gap: 22px !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .settings-nav {
  position: sticky;
  top: calc(var(--topbar-height, 76px) + 18px);
  padding: 9px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .settings-nav a {
  min-height: 44px;
  border-radius: 11px !important;
  color: var(--glass-copy) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .settings-nav a:hover {
  color: var(--glass-navy) !important;
  background: rgba(255, 246, 201, .55) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .settings-nav a.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(112deg, var(--glass-navy), var(--glass-navy-soft)) !important;
  box-shadow: inset 4px 0 var(--glass-gold), 0 8px 18px rgba(7, 39, 82, .17) !important;
}

/* Dialogs and popovers inherit the same finish and fit short mobile viewports. */
body.app-body.ui-reference-light:not(.page-dashboard) dialog,
body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-card,.ci-modal-dialog,.lcb-library-dialog,.lcb-template-dialog,.lcb-test-dialog,.lcp-launch-dialog,.lcp-picker-dialog,.lcp-rcs-dialog,.tpl-action-dialog) {
  max-height: calc(100dvh - 28px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: 0 35px 95px rgba(4, 27, 64, .28) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) dialog::backdrop {
  background: rgba(5, 25, 54, .55) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-head,.tpl-action-dialog-head) {
  padding: 20px 22px !important;
  border-bottom: 1px solid var(--glass-line-soft) !important;
  background: linear-gradient(105deg, rgba(255, 249, 221, .76), rgba(241, 248, 252, .72)) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-head,.tpl-action-dialog-head) h2 { font-size: 21px !important; }
body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-body,.tpl-action-dialog-body) { padding: 22px !important; }
body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-foot,.tpl-action-dialog-foot) {
  padding: 15px 22px 20px !important;
  border-top: 1px solid var(--glass-line-soft) !important;
  background: rgba(255, 253, 246, .78) !important;
}

/* Contacts, templates and campaigns no longer retain the old pastel/purple layer. */
body.app-body.ui-reference-light.page-contacts .chub-toolbar,
body.app-body.ui-reference-light.page-templates :is(.tpl-tabs,.tpl-library-col,.tpl-table-card),
body.app-body.ui-reference-light.page-campaigns :is(.lcp-toolbar,.lcp-tabs,.lcp-table-card) {
  border-color: rgba(255, 255, 255, .9) !important;
  background: rgba(255, 255, 255, .8) !important;
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .crm-column {
  border-color: rgba(255, 255, 255, .88) !important;
  background: rgba(255, 255, 255, .72) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .crm-card {
  border-color: rgba(174, 190, 209, .36) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 8px 22px rgba(7, 37, 77, .065) !important;
}

/* Inbox gets the same frame, while its functional three-pane geometry is preserved. */
body.app-body.ui-reference-light.page-inbox .page-content {
  padding: 18px 20px 28px !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-inbox-shell,.inbox-shell) {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-list-pane,.ci-chat-pane,.ci-details-pane,.inbox-list-pane,.inbox-chat-pane,.contact-pane) {
  border-color: rgba(175, 191, 210, .34) !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-inbox-head,.ci-chat-head,.ci-details-head,.inbox-pane-head,.chat-header) {
  background: rgba(255, 255, 255, .91) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.app-body.ui-reference-light.page-inbox :is(.ci-message-list,.message-stream) {
  background-color: rgba(244, 248, 249, .88) !important;
  background-image: radial-gradient(rgba(10, 76, 132, .13) .7px, transparent .8px) !important;
  background-size: 18px 18px !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-message-bubble,.message-bubble) {
  border-color: rgba(171, 188, 208, .34) !important;
  border-radius: 16px 16px 16px 5px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 7px 18px rgba(7, 37, 77, .055) !important;
}

/* R50: retained for design history only; dashboards deliberately keep the pre-R49 design. */
@media (width < 0px) {
/* Business and Master dashboards now share the same white-glass home language. */
body.app-body.ui-reference-light.page-dashboard .reference-business-dashboard {
  gap: 22px;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding: 34px 30px 28px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 92% 1%, rgba(18, 112, 188, .16), transparent 315px),
    linear-gradient(118deg, rgba(255, 255, 255, .94), rgba(255, 250, 228, .78) 56%, rgba(239, 248, 252, .78)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  right: -165px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(8, 60, 117, .11);
  border-radius: 50%;
  opacity: 1;
  background: transparent !important;
  box-shadow: 0 0 0 55px rgba(8, 60, 117, .025), 0 0 0 110px rgba(239, 189, 34, .02) !important;
  transform: none !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 35px;
  bottom: 24px;
  width: 175px;
  height: 90px;
  border: 0 !important;
  opacity: .24;
  background: radial-gradient(circle, rgba(8, 60, 117, .65) 1px, transparent 1.2px) 0 0 / 14px 14px !important;
  transform: none !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head {
  max-width: 900px;
  margin: 0 0 28px;
  padding: 0 4px;
  text-align: left;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head h1 {
  margin-top: 17px;
  color: var(--glass-navy) !important;
  -webkit-text-fill-color: var(--glass-navy) !important;
  font-size: clamp(34px, 3.15vw, 50px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  white-space: normal !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head h1 em {
  color: var(--glass-gold-deep) !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(105deg, #b77c00, #e7ae0b 55%, #f6cd43) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head p {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--glass-muted) !important;
  -webkit-text-fill-color: var(--glass-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-status-grid {
  position: relative;
  z-index: 2;
  gap: 16px !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-status-card,
body.app-body.ui-reference-light.business-colorful.page-dashboard .ref-business-status-showcase .ref-status-card:nth-child(n) {
  min-height: 225px !important;
  padding: 22px 20px !important;
  border: 1px solid rgba(255, 255, 255, .95) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(245, 250, 252, .7)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 16px 38px rgba(7, 37, 77, .105), inset 0 1px 0 #fff !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-status-card:hover {
  border-color: rgba(239, 189, 34, .55) !important;
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-status-card-head small {
  color: var(--glass-navy) !important;
  -webkit-text-fill-color: var(--glass-navy) !important;
  font-size: 18px !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-status-card-head strong {
  color: var(--glass-copy) !important;
  -webkit-text-fill-color: var(--glass-copy) !important;
  font-size: 13px !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-status-card-head span:not(.ref-channel-icon) {
  color: var(--glass-muted) !important;
  -webkit-text-fill-color: var(--glass-muted) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-status-card-foot > a,
body.app-body.ui-reference-light.page-dashboard .ref-status-card-foot.single > a {
  min-height: 41px;
  border: 1px solid var(--glass-navy) !important;
  border-radius: 11px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(112deg, var(--glass-navy), var(--glass-navy-soft)) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-business-kpi-grid { gap: 15px !important; }

body.app-body.ui-reference-light.page-dashboard .ref-mini-kpi,
body.app-body.ui-reference-light.business-colorful.page-dashboard .ref-mini-kpi:nth-child(n),
body.app-body.ui-reference-light.page-dashboard .ref-dashboard-panel {
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .89), rgba(247, 251, 253, .68)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-mini-kpi { min-height: 132px; padding: 19px 17px !important; }
body.app-body.ui-reference-light.page-dashboard .ref-mini-kpi small { color: var(--glass-muted) !important; -webkit-text-fill-color: var(--glass-muted) !important; font-size: 12px !important; }
body.app-body.ui-reference-light.page-dashboard .ref-mini-kpi strong { color: var(--glass-navy) !important; -webkit-text-fill-color: var(--glass-navy) !important; font-size: 27px !important; }
body.app-body.ui-reference-light.page-dashboard .ref-business-main-grid { gap: 16px !important; }
body.app-body.ui-reference-light.page-dashboard .ref-business-main-grid > .ref-dashboard-panel { height: auto !important; min-height: 340px !important; }
body.app-body.ui-reference-light.page-dashboard .ref-panel-head h2 { color: var(--glass-navy) !important; -webkit-text-fill-color: var(--glass-navy) !important; font-size: 19px !important; }
body.app-body.ui-reference-light.page-dashboard .ref-panel-head > a { color: var(--glass-blue) !important; -webkit-text-fill-color: var(--glass-blue) !important; }

body.app-body.ui-reference-light.page-dashboard .ref-explore-panel,
body.app-body.ui-reference-light.page-dashboard .master-explore-panel {
  padding: 25px !important;
  border: 1px solid rgba(255, 255, 255, .93) !important;
  border-radius: 25px !important;
  background: linear-gradient(118deg, rgba(255, 255, 255, .9), rgba(255, 249, 220, .71), rgba(239, 248, 252, .72)) !important;
  box-shadow: var(--glass-shadow) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-explore-panel > h2,
body.app-body.ui-reference-light.page-dashboard .master-explore-panel > h2 {
  color: var(--glass-navy) !important;
  -webkit-text-fill-color: var(--glass-navy) !important;
}

body.app-body.ui-reference-light.page-dashboard .ref-explore-grid > a,
body.app-body.ui-reference-light.page-dashboard .ref-action-grid > a {
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 17px !important;
  color: var(--glass-copy) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 10px 24px rgba(7, 37, 77, .075) !important;
}
}

/* Desktop: preserve rich multi-column views. */
@media (min-width: 1281px) {
  body.app-body.ui-reference-light:not(.page-dashboard) .page-content { padding-inline: 32px !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .stat-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .analytics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.app-body.ui-reference-light.page-dashboard.glass-dashboard-opt-in .ref-business-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Tablet: two-column cards, scrollable tables, and compact introductions. */
@media (min-width: 769px) and (max-width: 1280px) {
  body.app-body.ui-reference-light:not(.page-dashboard) .page-content { padding: 23px 22px 40px !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .stat-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .analytics-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .campaign-summary-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .crm-head-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .usage-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .suite-card-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .integration-market-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .channel-market-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .product-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .ai-agent-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .voice-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.app-body.ui-reference-light.page-dashboard.glass-dashboard-opt-in .ref-business-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.app-body.ui-reference-light.page-dashboard.glass-dashboard-opt-in .ref-business-main-grid,
  body.app-body.ui-reference-light.page-dashboard.glass-dashboard-opt-in .master-dashboard-operations-grid { grid-template-columns: 1fr !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .page-titlebar-actions { max-width: 42%; }
}

/* Mobile: one readable content column with touch-safe controls. */
@media (max-width: 768px) {
  body.app-body.ui-reference-light:not(.page-dashboard) .page-content { padding: 15px 12px 28px !important; }
  body.app-body.ui-reference-light.page-inbox .page-content { padding: 10px 8px 18px !important; }

  body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar,
  body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding: 18px 16px !important;
    border-radius: 19px !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy,
  body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-icon,
  body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-icon {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 14px !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy h1,
  body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy h1 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy p,
  body.app-body.ui-reference-light.business-colorful:not(.page-dashboard):not(.page-inbox) .page-titlebar-copy p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-titlebar-actions {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-titlebar-actions .btn { width: 100%; }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
    .stat-grid,.analytics-grid,.campaign-summary-grid,.crm-head-grid,.usage-grid,.automation-grid,
    .integration-grid,.integration-market-grid,.channel-market-grid,.suite-card-grid,.product-grid,
    .pricing-grid,.ai-agent-grid,.ai-studio-grid,.voice-grid,.voice-metrics,.voice-quick-grid,.ops-grid,
    .developer-grid,.api-reference-grid,.support-grid,.support-health-grid,.rcs-build-grid,.rcs-form-grid,
    .r13-plan-grid,.r15-customer-command-grid,.r15-identity-grid,.r18-readiness-grid,.r19-config-grid,
    .r19-operations-grid,.r20-category-grid,.r24-control-grid,.rb-metric-grid,.rb-plan-grid,.revenue-playbook-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-grid.cols-2,
  body.app-body.ui-reference-light:not(.page-dashboard) .page-grid.cols-3,
  body.app-body.ui-reference-light:not(.page-dashboard) .form-row,
  body.app-body.ui-reference-light:not(.page-dashboard) .form-row.cols-3,
  body.app-body.ui-reference-light:not(.page-dashboard) .checkbox-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .choice-grid,
  body.app-body.ui-reference-light:not(.page-dashboard) .assignment-choice-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .toolbar-card,
  body.app-body.ui-reference-light:not(.page-dashboard) .chub-toolbar,
  body.app-body.ui-reference-light:not(.page-dashboard) .lcp-toolbar,
  body.app-body.ui-reference-light:not(.page-dashboard) .r15-directory-toolbar,
  body.app-body.ui-reference-light:not(.page-dashboard) .r16-invoice-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) :is(.toolbar-left,.toolbar-right,.chub-toolbar-form,.tpl-toolbar-left,.tpl-toolbar-right) {
    width: 100% !important;
    flex-wrap: wrap;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .search-field { width: 100% !important; }

  body.app-body.ui-reference-light:not(.page-dashboard) .settings-layout,
  body.app-body.ui-reference-light:not(.page-dashboard) .settings-commercial-layout,
  body.app-body.ui-reference-light:not(.page-dashboard) .rcs-settings-layout,
  body.app-body.ui-reference-light:not(.page-dashboard) .optimizer-layout,
  body.app-body.ui-reference-light:not(.page-dashboard) .ltb-layout,
  body.app-body.ui-reference-light:not(.page-dashboard) .tcb-layout,
  body.app-body.ui-reference-light:not(.page-dashboard) .lcp-picker-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .settings-nav {
    position: static;
    display: flex !important;
    gap: 5px;
    padding: 6px !important;
    overflow-x: auto;
    border-radius: 15px !important;
    scrollbar-width: none;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .settings-nav a {
    min-height: 40px;
    flex: 0 0 auto;
    padding-inline: 13px !important;
    white-space: nowrap;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-head,.settings-section-head,.voice-card-head,.rcs-card-head) {
    min-height: 0;
    padding: 17px !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-pad,.panel-body,.settings-section-body,.voice-card-pad) {
    padding: 17px !important;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .settings-section-foot,
  body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-foot,.tpl-action-dialog-foot) {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  body.app-body.ui-reference-light:not(.page-dashboard) .settings-section-foot .btn,
  body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-foot,.tpl-action-dialog-foot) .btn { width: 100%; }

  body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
    .billing-hero,.commerce-hero,.suite-hero,.workspace-welcome,.ai-agent-hero,.optimizer-hero,
    .voice-hero,.ops-hero,.pricing-hero,.platform-provider-hero,.country-pricing-hero,.revenue-hero,
    .mc-hero,.r12-feature-hero,.r13-plans-hero,.r15-directory-hero,.r15-customer-hero,
    .r16-invoice-hero,.r18-payments-hero,.r19-meta-hero,.r20-rates-hero,.r21-support-hero,
    .r22-settings-hero,.r24-commercial-hero,.v10-connect-hero,.v9-plan-detail-hero
  ) {
    grid-template-columns: 1fr !important;
    min-height: 0;
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  @media (width < 0px) {
  body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase {
    padding: 24px 15px 15px !important;
    border-radius: 23px !important;
  }

  body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head {
    margin-bottom: 20px;
    padding: 0 4px;
  }

  body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head h1 {
    margin-top: 14px;
    font-size: clamp(29px, 9vw, 39px) !important;
  }

  body.app-body.ui-reference-light.page-dashboard .ref-business-status-showcase-head p { font-size: 13px !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-business-status-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-status-card { min-height: 205px !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-business-kpi-grid { grid-template-columns: 1fr !important; gap: 11px !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-mini-kpi { min-height: 120px; }
  body.app-body.ui-reference-light.page-dashboard .ref-business-main-grid,
  body.app-body.ui-reference-light.page-dashboard .master-dashboard-main-grid,
  body.app-body.ui-reference-light.page-dashboard .master-dashboard-operations-grid { grid-template-columns: 1fr !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-business-main-grid > .ref-dashboard-panel { min-height: 325px !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.app-body.ui-reference-light.page-dashboard .ref-explore-grid { grid-template-columns: 1fr !important; }
  }

  body.app-body.ui-reference-light.page-inbox :is(.ci-inbox-shell,.inbox-shell) { border-radius: 16px !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) dialog { width: calc(100% - 18px); max-height: calc(100dvh - 18px); border-radius: 18px !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-head,.dialog-body,.dialog-foot,.tpl-action-dialog-head,.tpl-action-dialog-body,.tpl-action-dialog-foot) { padding-inline: 17px !important; }
}

@media (max-width: 480px) {
  body.app-body.ui-reference-light:not(.page-dashboard) .page-content { padding-inline: 9px !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .page-titlebar-copy p { display: block !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .btn { min-height: 46px; }
  body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px !important; }
  body.app-body.ui-reference-light.page-dashboard.glass-dashboard-opt-in .ref-action-grid { grid-template-columns: 1fr !important; }
  body.app-body.ui-reference-light.page-dashboard.glass-dashboard-opt-in .ref-business-status-showcase-head h1 { font-size: 30px !important; }
}

/* R50 — measured reference-page typography and priority workspace finish. */
body.app-body.ui-reference-light:not(.page-dashboard) img.brand-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 22px;
  object-fit: contain;
  vertical-align: middle;
}

body.app-body.ui-reference-light:not(.page-dashboard) img.brand-icon-whatsapp {
  padding: 3px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 5px 12px rgba(37, 211, 102, .2);
}

body.app-body.ui-reference-light:not(.page-dashboard) img.brand-icon-instagram {
  padding: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 5px 12px rgba(225, 48, 108, .16);
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .panel,.settings-section,.support-card,.suite-card,.integration-market-card,.channel-market-card,
  .automation-card,.quick-reply-card,.auto-reply-card,.workflow-card,.product-card,.widget-card,.ai-agent-card
) > p {
  color: rgba(6, 31, 70, .7) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.panel-head h2,.settings-section-head h2,.voice-card-head h2,.rcs-card-head h2) {
  font-weight: 900 !important;
}

/* Template library and builder. */
body.app-body.ui-reference-light.page-templates .tpl-page {
  gap: 20px !important;
  color: var(--glass-ink) !important;
}

body.app-body.ui-reference-light.page-templates .tpl-tabs {
  min-height: 61px !important;
  border: 1px solid rgba(152, 173, 198, .42) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: inset 0 3px 0 var(--glass-royal), 0 14px 34px rgba(7, 37, 77, .07) !important;
}

body.app-body.ui-reference-light.page-templates .tpl-tab {
  min-width: 220px !important;
  height: 59px !important;
  color: rgba(6, 31, 70, .68) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.app-body.ui-reference-light.page-templates .tpl-tab.is-active {
  color: var(--glass-royal) !important;
  background: linear-gradient(100deg, rgba(255, 249, 221, .78), rgba(241, 247, 252, .8)) !important;
  box-shadow: inset 0 -3px var(--glass-royal) !important;
}

body.app-body.ui-reference-light.page-templates :is(.tpl-toolbar,.tpl-library-tools) {
  color: var(--glass-copy) !important;
}

body.app-body.ui-reference-light.page-templates :is(.tpl-search,.tpl-sync-btn,.tpl-filter-btn) {
  min-height: 48px !important;
  border: 1px solid rgba(153, 174, 199, .46) !important;
  border-radius: 11px !important;
  color: var(--glass-copy) !important;
  background: rgba(255, 255, 255, .88) !important;
}

body.app-body.ui-reference-light.page-templates :is(.tpl-library-col,.tpl-table-card,.tcb-step,.tcb-preview) {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(247, 250, 252, .73)) !important;
  box-shadow: inset 0 3px 0 var(--glass-royal), var(--glass-shadow) !important;
}

body.app-body.ui-reference-light.page-templates .tpl-library-head {
  min-height: 61px;
  padding: 15px 16px !important;
  border-bottom: 1px solid rgba(176, 192, 211, .3) !important;
  background: linear-gradient(100deg, rgba(255, 249, 220, .7), rgba(240, 247, 252, .7)) !important;
}

body.app-body.ui-reference-light.page-templates .tpl-library-head h3 {
  color: var(--glass-navy) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body.app-body.ui-reference-light.page-templates .tpl-card {
  overflow: hidden;
  border: 1px solid rgba(155, 176, 201, .38) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 11px 26px rgba(7, 37, 77, .075) !important;
}

body.app-body.ui-reference-light.page-templates .tpl-card:hover {
  border-color: rgba(12, 31, 129, .52) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 36px rgba(7, 37, 77, .13) !important;
}

body.app-body.ui-reference-light.page-templates .tpl-card-preview {
  background:
    linear-gradient(135deg, rgba(255, 250, 228, .82), rgba(233, 244, 252, .86)),
    #fff !important;
}

body.app-body.ui-reference-light.page-templates .tpl-card-preview :is(strong,h3) {
  color: var(--glass-navy) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

body.app-body.ui-reference-light.page-templates .tpl-card-preview p {
  color: rgba(6, 31, 70, .7) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

body.app-body.ui-reference-light.page-templates :is(.tcb-step-head,.tcb-preview-head) {
  min-height: 72px !important;
  border-bottom: 1px solid rgba(168, 186, 207, .34) !important;
  background: linear-gradient(100deg, rgba(255, 249, 221, .72), rgba(238, 247, 252, .74)) !important;
}

body.app-body.ui-reference-light.page-templates .tcb-step-title {
  color: var(--glass-navy) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body.app-body.ui-reference-light.page-templates .tcb-step-number {
  color: #fff !important;
  background: var(--glass-royal) !important;
  box-shadow: inset 0 -3px var(--glass-gold) !important;
}

body.app-body.ui-reference-light.page-templates .tcb-preview-head strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--glass-navy) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* Campaign index, campaign dialogs and creation workspaces. */
body.app-body.ui-reference-light.page-campaigns :is(.lcp-toolbar,.lcp-tabs,.lcp-table-card) {
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: inset 0 3px 0 var(--glass-royal), var(--glass-shadow) !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-toolbar { padding: 15px !important; }

body.app-body.ui-reference-light.page-campaigns :is(.lcp-search,.lcp-filter-trigger) {
  min-height: 46px !important;
  border: 1px solid rgba(151, 173, 199, .48) !important;
  border-radius: 11px !important;
  color: var(--glass-copy) !important;
  background: rgba(255, 255, 255, .9) !important;
  font-size: 13px !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-filter-trigger > img.brand-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

body.app-body.ui-reference-light.page-campaigns .lcp-tab {
  min-height: 54px !important;
  color: rgba(6, 31, 70, .68) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-tab.active {
  color: var(--glass-royal) !important;
  background: linear-gradient(100deg, rgba(255, 249, 221, .76), rgba(240, 247, 252, .78)) !important;
  box-shadow: inset 0 -3px var(--glass-royal) !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-create-whatsapp {
  border-color: #159c4f !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(110deg, #128c4a, #25d366) !important;
  box-shadow: 0 11px 24px rgba(37, 211, 102, .2) !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-whatsapp-brand-icon {
  width: 29px !important;
  height: 29px !important;
  display: grid !important;
  place-items: center;
  padding: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .2) !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-whatsapp-brand-icon img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

body.app-body.ui-reference-light.page-campaigns :is(.lcp-launch-dialog,.lcp-picker-dialog,.lcp-rcs-dialog),
body.app-body.ui-reference-light:not(.page-dashboard) :is(.lcb-library-dialog,.lcb-template-dialog,.lcb-test-dialog) {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: inset 0 3px 0 var(--glass-royal), 0 32px 90px rgba(5, 28, 67, .28) !important;
}

body.app-body.ui-reference-light.page-campaigns :is(.lcp-launch-dialog,.lcp-picker-dialog) h2,
body.app-body.ui-reference-light:not(.page-dashboard) :is(.lcb-library-dialog,.lcb-template-dialog,.lcb-test-dialog) h2 {
  color: var(--glass-navy) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(.builder-context-channel-icon,.lcb-template-mark,.lcb-preview-empty) > img.brand-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
}

/* Inbox: retain the functional three-pane geometry but apply the reference finish. */
body.app-body.ui-reference-light.page-inbox :is(.premium-inbox-shell,.inbox-shell) {
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .91) !important;
  box-shadow: inset 0 3px 0 var(--glass-royal), 0 20px 52px rgba(7, 37, 77, .11) !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-list-header,.premium-chat-header,.ci-details-heading,.ci-card-heading) {
  border-color: rgba(166, 184, 205, .34) !important;
  background: linear-gradient(100deg, rgba(255, 249, 221, .64), rgba(239, 247, 252, .72)) !important;
}

body.app-body.ui-reference-light.page-inbox :is(.conversation-row,.ci-detail-card,.ci-notes-card,.ci-tags-card,.ci-history-card,.ci-profile-card) {
  border-color: rgba(168, 187, 208, .32) !important;
  background: rgba(255, 255, 255, .84) !important;
}

body.app-body.ui-reference-light.page-inbox .conversation-row.active {
  color: var(--glass-navy) !important;
  background: linear-gradient(100deg, rgba(255, 249, 221, .7), rgba(237, 246, 252, .82)) !important;
  box-shadow: inset 4px 0 var(--glass-royal) !important;
}

body.app-body.ui-reference-light.page-inbox :is(.conversation-title strong,.chat-contact strong,.ci-card-heading h3) {
  color: var(--glass-navy) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 800 !important;
}

body.app-body.ui-reference-light.page-inbox :is(.conversation-preview span,.chat-contact span,.ci-detail-card p,.ci-notes-card p) {
  color: rgba(6, 31, 70, .62) !important;
  font-family: "Inter", Arial, sans-serif !important;
}

body.app-body.ui-reference-light.page-inbox :is(.message-bubble,.ci-message-action-card) {
  color: rgba(6, 31, 70, .78) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.58 !important;
}

body.app-body.ui-reference-light.page-inbox .outbound .message-bubble {
  border-color: rgba(31, 165, 94, .25) !important;
  background: rgba(228, 248, 237, .94) !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-call-option,.pi-empty-actions .btn) img.brand-icon-whatsapp {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
}

@media (max-width: 900px) {
  body.app-body.ui-reference-light.page-templates .tpl-tab { min-width: 180px !important; }
  body.app-body.ui-reference-light.page-templates .tcb-layout { grid-template-columns: 1fr !important; }
  body.app-body.ui-reference-light.page-templates .tcb-preview { position: relative !important; top: 0 !important; }
  body.app-body.ui-reference-light.page-campaigns .lcp-toolbar { align-items: stretch !important; }
}

@media (max-width: 680px) {
  body.app-body.ui-reference-light.page-templates :is(.tpl-library-col,.tpl-table-card,.tcb-step,.tcb-preview),
  body.app-body.ui-reference-light.page-campaigns :is(.lcp-toolbar,.lcp-tabs,.lcp-table-card) {
    border-radius: 15px !important;
  }
  body.app-body.ui-reference-light.page-templates .tpl-tab { min-width: 155px !important; font-size: 12px !important; }
  body.app-body.ui-reference-light.page-templates :is(.tcb-grid,.tcb-button-fields,.tcb-button-fields.three) { grid-template-columns: 1fr !important; }
  body.app-body.ui-reference-light.page-campaigns .lcp-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
  body.app-body.ui-reference-light.page-campaigns .lcp-filter { flex: 0 0 auto; }
  body.app-body.ui-reference-light.page-inbox :is(.premium-inbox-shell,.inbox-shell) { border-radius: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-body.ui-reference-light:not(.page-dashboard) *,
  body.app-body.ui-reference-light:not(.page-dashboard) *::before,
  body.app-body.ui-reference-light:not(.page-dashboard) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}