/*
 * CMG Design System v1.0
 * Corporate identity, visual ergonomics and accessibility guardrails.
 */

body[data-theme],
body.portal-shell,
body.portal-auth-shell,
body.field-shell,
body.auth-shell,
body.marketing-shell,
body .marketing-shell,
body.catalog-marketing-page {
  --cmg-blue: var(--cmg-cyan);
  --cmg-blue-strong: #0891b2;
  --cmg-panel: var(--cmg-surface);
  --cmg-panel-alt: var(--cmg-surface-soft);
  --cmg-border: #e5e7eb;
  --cmg-border-strong: #cbd5e1;
  --cmg-text: #111827;
  --cmg-text-soft: #6b7280;
  --cmg-muted: #6b7280;
  --cmg-success: #16a34a;
  --cmg-warning: #f59e0b;
  --cmg-danger: #dc2626;
  --cmg-shadow: var(--cmg-shadow-card);
  background-color: var(--cmg-bg);
  color: var(--cmg-text);
  font-family: var(--cmg-font-ui);
  line-height: var(--cmg-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-theme="desktop"],
body[data-theme="cmg"],
.field-shell,
.portal-shell,
.portal-auth-shell,
.auth-shell {
  background:
    linear-gradient(rgba(0, 184, 217, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 184, 217, 0.035) 1px, transparent 1px),
    var(--cmg-bg);
  background-size: 32px 32px;
}

body[data-theme="desktop"] .shell,
body[data-theme="cmg"] .shell,
.field-page,
.portal-page,
.auth-wrap {
  color: var(--cmg-text);
}

body[data-theme="desktop"] h1,
body[data-theme="cmg"] h1,
.field-shell h1,
.portal-shell h1,
.auth-shell h1 {
  color: var(--cmg-text);
  font-size: clamp(28px, 2.2vw, var(--cmg-text-h1));
  letter-spacing: 0;
  line-height: var(--cmg-line-tight);
}

body[data-theme="desktop"] h2,
body[data-theme="cmg"] h2,
.field-shell h2,
.portal-shell h2,
.auth-shell h2 {
  color: var(--cmg-text);
  font-size: clamp(22px, 1.8vw, var(--cmg-text-h2));
  letter-spacing: 0;
  line-height: var(--cmg-line-tight);
}

body[data-theme="desktop"] h3,
body[data-theme="cmg"] h3,
.field-shell h3,
.portal-shell h3,
.auth-shell h3 {
  color: var(--cmg-text);
  font-size: clamp(18px, 1.45vw, var(--cmg-text-h3));
  letter-spacing: 0;
  line-height: var(--cmg-line-tight);
}

body[data-theme="desktop"] a,
body[data-theme="cmg"] a,
.field-shell a,
.portal-shell a,
.auth-shell a {
  color: var(--cmg-blue-strong);
}

body[data-theme="desktop"] .app-header,
body[data-theme="cmg"] .app-header,
.field-topbar,
.portal-topbar {
  background: linear-gradient(180deg, #ffffff 0%, #f2fbfd 100%) !important;
  border-bottom: 1px solid rgba(0, 184, 217, 0.28) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

body[data-theme="desktop"] .brand-logo,
body[data-theme="cmg"] .brand-logo,
.field-brand img,
.portal-brand img,
.marketing-brand img {
  object-fit: contain;
}

body[data-theme="desktop"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel),
body[data-theme="cmg"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel),
.field-shell :where(.field-card, .panel, .card, .hero-panel),
.portal-shell :where(.portal-card, .portal-hero, .portal-metrics article),
.auth-shell :where(.auth-card, .auth-panel, .card) {
  background: var(--cmg-surface);
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card);
  box-shadow: var(--cmg-shadow-card);
}

body[data-theme="desktop"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel):hover,
body[data-theme="cmg"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel):hover,
.portal-shell :where(.portal-card, .portal-hero, .portal-metrics article):hover {
  box-shadow: var(--cmg-shadow-hover);
  transition: box-shadow var(--cmg-motion-fast) ease, border-color var(--cmg-motion-fast) ease;
}

body[data-theme="desktop"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel) > :where(header, .panel-header, .card-header, .section-header),
body[data-theme="cmg"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel) > :where(header, .panel-header, .card-header, .section-header),
.portal-shell :where(.portal-card, .portal-hero) > :where(header, .portal-card__header) {
  background: linear-gradient(90deg, rgba(0, 184, 217, 0.08), rgba(255, 255, 255, 0.82));
  border-bottom: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card) var(--cmg-radius-card) 0 0;
}

body[data-theme="desktop"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body[data-theme="cmg"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.field-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.portal-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.portal-auth-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.auth-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid var(--cmg-border-strong);
  border-radius: var(--cmg-radius-control);
  background: var(--cmg-surface);
  color: var(--cmg-text);
  font: 500 14px/1.45 var(--cmg-font-ui);
  padding-inline: var(--cmg-input-x);
}

body[data-theme="desktop"] :where(input, select, textarea):focus,
body[data-theme="cmg"] :where(input, select, textarea):focus,
.field-shell :where(input, select, textarea):focus,
.portal-shell :where(input, select, textarea):focus,
.portal-auth-shell :where(input, select, textarea):focus,
.auth-shell :where(input, select, textarea):focus {
  border-color: var(--cmg-cyan);
  box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.16);
  outline: none;
}

body[data-theme="desktop"] :where(button, .button, .btn, .portal-button, .field-main-link),
body[data-theme="cmg"] :where(button, .button, .btn),
.field-shell :where(button, .button, .btn, .field-main-link),
.portal-shell :where(button, .button, .btn, .portal-button),
.portal-auth-shell :where(button, .button, .btn, .portal-button),
.auth-shell :where(button, .button, .btn) {
  min-height: 44px;
  border-radius: var(--cmg-radius-control);
  font-family: var(--cmg-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-theme="desktop"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]),
body[data-theme="cmg"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]),
.field-shell :where(.button-primary, .btn-primary, .field-main-link, button[type="submit"]),
.portal-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]),
.portal-auth-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]),
.auth-shell :where(.button-primary, .btn-primary, button[type="submit"]) {
  background: var(--cmg-navy);
  border-color: var(--cmg-navy);
  color: #f8fafc;
}

body[data-theme="desktop"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]):hover,
body[data-theme="cmg"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]):hover,
.field-shell :where(.button-primary, .btn-primary, .field-main-link, button[type="submit"]):hover,
.portal-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]):hover,
.portal-auth-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]):hover,
.auth-shell :where(.button-primary, .btn-primary, button[type="submit"]):hover {
  background: #172554;
  border-color: #172554;
}

body[data-theme="desktop"] :where(.pill, .badge, .tag),
body[data-theme="cmg"] :where(.pill, .badge, .tag),
.field-shell :where(.pill, .badge, .tag),
.portal-shell :where(.pill, .badge, .tag) {
  border-radius: var(--cmg-radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)):not(.calendar),
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)):not(.calendar),
.portal-shell :where(table):not(.invoice-document-lines),
.field-shell :where(table):not(.invoice-document-lines) {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--cmg-text);
  font-family: var(--cmg-font-data);
  font-size: var(--cmg-text-table);
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)) th,
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)) th,
.portal-shell :where(table) th,
.field-shell :where(table) th {
  min-height: var(--cmg-table-head-height);
  background: var(--cmg-table-head-bg);
  color: var(--cmg-slate);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  padding: var(--cmg-table-cell-y) var(--cmg-table-cell-x);
  text-transform: none;
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)) td,
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)) td,
.portal-shell :where(table) td,
.field-shell :where(table) td {
  min-height: var(--cmg-table-row-height);
  border-bottom: 1px solid var(--cmg-border);
  padding: var(--cmg-table-cell-y) var(--cmg-table-cell-x);
  vertical-align: middle;
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)) tr:hover td,
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)) tr:hover td,
.portal-shell :where(table) tr:hover td,
.field-shell :where(table) tr:hover td {
  background: var(--cmg-table-hover);
}

body[data-theme="desktop"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap),
body[data-theme="cmg"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap) {
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card);
  overflow: auto;
  box-shadow: var(--cmg-shadow-card);
}

body[data-theme="desktop"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap) thead th,
body[data-theme="cmg"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap) thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

#cmgLiveSearchPopover,
.global-search__results,
.assistant-autocomplete,
.inventory-item-autocomplete {
  border: 1px solid var(--cmg-border-strong) !important;
  border-radius: var(--cmg-radius-card) !important;
  background: var(--cmg-surface) !important;
  box-shadow: var(--cmg-shadow-hover) !important;
  overflow: auto !important;
}

#cmgLiveSearchPopover .global-search__item,
.global-search__results .global-search__item,
.assistant-autocomplete__item,
.assistant-autocomplete__option,
.inventory-item-autocomplete__item {
  min-height: 44px;
  border-radius: var(--cmg-radius-control) !important;
  color: var(--cmg-text) !important;
  display: grid;
  gap: 2px;
  padding: 10px 12px !important;
}

#cmgLiveSearchPopover .global-search__item:hover,
#cmgLiveSearchPopover .global-search__item.is-active,
.global-search__results .global-search__item:hover,
.assistant-autocomplete__item:hover,
.assistant-autocomplete__item.is-active,
.assistant-autocomplete__option:hover,
.inventory-item-autocomplete__item:hover,
.inventory-item-autocomplete__item[aria-selected="true"] {
  background: var(--cmg-table-selected) !important;
}

#cmgLiveSearchPopover .global-search__group-title,
.global-search__results .global-search__group-title,
.assistant-autocomplete__title,
.inventory-item-autocomplete__item strong {
  color: var(--cmg-navy) !important;
  font-size: 13px;
  letter-spacing: 0;
}

#cmgLiveSearchPopover .global-search__item-meta,
.global-search__results .global-search__item-meta,
.assistant-autocomplete__meta {
  color: var(--cmg-muted) !important;
  font-size: 12px;
}

.status-paid,
[data-status="paid"],
[data-payment-state="paid"] {
  --ui-status-color: var(--cmg-success);
  --ui-status-bg: #dcfce7;
}

.status-partial,
.status-partial-paid,
[data-status="partial"],
[data-payment-state="partial"] {
  --ui-status-color: var(--cmg-warning);
  --ui-status-bg: #fef3c7;
}

.status-overdue,
[data-status="overdue"],
[data-payment-state="overdue"] {
  --ui-status-color: var(--cmg-error);
  --ui-status-bg: #fee2e2;
}

.status-paid,
.status-partial,
.status-partial-paid,
.status-overdue,
[data-status="paid"],
[data-status="partial"],
[data-status="overdue"],
[data-payment-state] {
  background: var(--ui-status-bg);
  color: var(--ui-status-color);
  border-radius: var(--cmg-radius-pill);
  font-weight: 800;
}

body.theme-dark,
body[data-theme="dark"],
body[data-color-scheme="dark"],
html[data-theme="dark"] body {
  color-scheme: dark;
  --cmg-bg: var(--cmg-dark-bg);
  --cmg-surface: var(--cmg-dark-card);
  --cmg-surface-soft: #182235;
  --cmg-text: var(--cmg-dark-text);
  --cmg-muted: var(--cmg-dark-muted);
  --cmg-border: var(--cmg-dark-border);
  --cmg-border-strong: rgba(255, 255, 255, 0.14);
  --cmg-table-head-bg: #182235;
  --cmg-table-hover: rgba(0, 184, 217, 0.08);
  background: var(--cmg-dark-bg);
  color: var(--cmg-dark-text);
}

body.theme-dark :where(.app-header, .field-topbar, .portal-topbar),
body[data-theme="dark"] :where(.app-header, .field-topbar, .portal-topbar),
body[data-color-scheme="dark"] :where(.app-header, .field-topbar, .portal-topbar),
html[data-theme="dark"] body :where(.app-header, .field-topbar, .portal-topbar) {
  background: linear-gradient(180deg, #101827 0%, #0b1220 100%) !important;
  border-bottom-color: var(--cmg-dark-border) !important;
}

@media (max-width: 768px) {
  body.is-mobile-next,
  .field-shell,
  .portal-shell {
    --cmg-panel-x: 16px;
    --cmg-panel-y: 16px;
    --cmg-grid-gap: 12px;
    --cmg-text-body: 15px;
    font-size: 15px;
  }

  body.is-mobile-next h1,
  .field-shell h1,
  .portal-shell h1 {
    font-size: 24px !important;
    line-height: 1.18;
  }

  body.is-mobile-next h2,
  .field-shell h2,
  .portal-shell h2 {
    font-size: 20px !important;
  }

  body.is-mobile-next :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel),
  .field-shell :where(.field-card, .panel, .card, .hero-panel),
  .portal-shell :where(.portal-card, .portal-hero, .portal-metrics article) {
    border-radius: var(--cmg-radius-card);
    padding: 16px;
  }

  body.is-mobile-next :where(button, .button, .btn),
  .field-shell :where(button, .button, .btn),
  .portal-shell :where(button, .button, .btn) {
    min-height: 44px;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  body.is-mobile-next,
  .field-shell,
  .portal-shell {
    --cmg-panel-x: 20px;
    --cmg-panel-y: 20px;
    --cmg-grid-gap: 16px;
  }
}

@media print {
  body {
    background: #ffffff !important;
  }

  body :where(.app-header, .mobile-topbar, .sidebar, .bottom-nav, .portal-topbar) {
    display: none !important;
  }
}

/*
 * CMG Corporate Identity Extension
 * Quiet premium brand treatment for platform surfaces.
 */

:root {
  --cmg-brand-navy: #0F172A;
  --cmg-brand-slate: #334155;
  --cmg-brand-cyan: #00B8D9;
  --cmg-brand-violet: #5B5BD6;
  --cmg-brand-ice: #F8FAFC;
  --cmg-brand-line: #D8E8F0;
  --cmg-brand-dark-bg: #0B1220;
  --cmg-brand-dark-card: #121A29;
  --cmg-brand-mark-size: 44px;
  --cmg-brand-wordmark-width: 132px;
}

body[data-theme],
body.portal-shell,
body.portal-auth-shell,
body.field-shell,
body.auth-shell,
body.marketing-shell,
body .marketing-shell,
body.catalog-marketing-page {
  --cmg-blue: var(--cmg-brand-cyan);
  --cmg-blue-strong: #0787A3;
  --cmg-link: #075985;
}

.app-brand,
.field-brand,
.portal-brand,
.marketing-brand,
.kti-brand {
  letter-spacing: 0;
}

.app-brand__logo,
.marketing-brand img {
  width: var(--cmg-brand-wordmark-width) !important;
  max-width: var(--cmg-brand-wordmark-width) !important;
  height: auto !important;
  object-fit: contain !important;
}

.brand-logo,
.mobile-topbar__logo,
.field-brand img,
.portal-brand img,
.kti-brand img {
  width: var(--cmg-brand-mark-size) !important;
  height: var(--cmg-brand-mark-size) !important;
  max-width: var(--cmg-brand-mark-size) !important;
  max-height: var(--cmg-brand-mark-size) !important;
  object-fit: contain !important;
}

.app-brand__meta strong,
.portal-brand span,
.field-brand strong {
  color: var(--cmg-brand-navy);
  font-weight: 800;
  letter-spacing: 0;
}

body[data-theme="desktop"] .app-header,
body[data-theme="cmg"] .app-header,
.field-topbar,
.portal-topbar {
  background:
    linear-gradient(90deg, rgba(248, 250, 252, .98), rgba(236, 253, 255, .96)) !important;
  border-bottom-color: rgba(0, 184, 217, .24) !important;
}

body[data-theme="desktop"] .app-header__ai-desk,
body[data-theme="cmg"] .app-header__ai-desk {
  border-color: rgba(0, 184, 217, .34);
  background: rgba(255, 255, 255, .82);
  color: var(--cmg-brand-navy);
}

body[data-theme="desktop"] .header-nav__link,
body[data-theme="cmg"] .header-nav__link {
  min-height: 40px;
  border-radius: 10px;
  color: var(--cmg-brand-slate);
  font-weight: 750;
}

body[data-theme="desktop"] .header-nav__link.is-active,
body[data-theme="cmg"] .header-nav__link.is-active {
  border-color: rgba(0, 184, 217, .42);
  background: rgba(0, 184, 217, .1);
  color: var(--cmg-brand-navy);
  box-shadow: inset 0 -2px 0 var(--cmg-brand-cyan);
}

.marketing-shell {
  --mk-bg: var(--cmg-brand-dark-bg);
  --mk-text: #D8DEE8;
  --mk-muted: #94A3B8;
  --mk-accent: var(--cmg-brand-cyan);
  --mk-warm: #E9C46A;
  color: var(--mk-text);
  font-family: var(--cmg-font-ui) !important;
}

body:not(.catalog-marketing-page) .marketing-shell {
  background: transparent !important;
  color: #D8DEE8 !important;
}

body:not(.catalog-marketing-page) .marketing-brand img {
  width: var(--cmg-brand-wordmark-width) !important;
  max-width: var(--cmg-brand-wordmark-width) !important;
  height: auto !important;
  object-fit: contain !important;
}

body:not(.catalog-marketing-page) {
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 184, 217, .12), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(91, 91, 214, .1), transparent 24%),
    linear-gradient(180deg, #0B1220 0%, #0D1725 52%, #0B1220 100%) !important;
}

body:not(.catalog-marketing-page) .marketing-header {
  background: rgba(18, 26, 41, .84) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(2, 8, 18, .28) !important;
}

body:not(.catalog-marketing-page) .hero-poster {
  min-height: auto !important;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 64px) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background:
    linear-gradient(135deg, rgba(18, 26, 41, .92), rgba(15, 23, 42, .78)),
    radial-gradient(circle at 18% 20%, rgba(0, 184, 217, .13), transparent 32%) !important;
}

body:not(.catalog-marketing-page) .hero-poster h1 {
  max-width: 720px;
  color: #F8FAFC !important;
  font-size: clamp(2.05rem, 3.4vw, 3.25rem) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
}

body:not(.catalog-marketing-page) .hero-copy {
  max-width: 680px;
  color: #B8C4D4 !important;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

.hero-kicker,
.section-kicker,
.capability-card span,
.integration-pill,
.planner-badge,
.planner-tile__eyebrow {
  color: var(--cmg-brand-cyan) !important;
  letter-spacing: .08em !important;
  font-weight: 850 !important;
}

.marketing-button {
  min-height: 42px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.marketing-button--primary {
  background: linear-gradient(135deg, var(--cmg-brand-cyan), #68E1F2) !important;
  color: #06131F !important;
  box-shadow: 0 14px 32px rgba(0, 184, 217, .18) !important;
}

.marketing-button--ghost {
  border-color: rgba(216, 222, 232, .18) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #D8DEE8 !important;
}

.capability-card,
.commerce-card,
.integration-band__item,
.demo-panel,
.field-panel,
.planner-panel,
.hero-caption {
  border-color: rgba(255, 255, 255, .08) !important;
  background: rgba(18, 26, 41, .74) !important;
  box-shadow: 0 18px 48px rgba(2, 8, 18, .24) !important;
}

.capability-card h3,
.commerce-card strong,
.integration-band__item strong,
.workflow-copy h2,
.planner-copy h2,
.demo-panel h2 {
  color: #F8FAFC !important;
  letter-spacing: 0 !important;
}

.capability-card p,
.commerce-card p,
.integration-band__item p,
.planner-copy p,
.demo-panel__copy p,
.field-panel p,
.workflow-step p {
  color: #AAB8C8 !important;
  line-height: 1.55 !important;
}

.public-language-switch label {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(18, 26, 41, .88) !important;
}

.cmg-brand-spec,
.brand-system-card,
.identity-card {
  background: var(--cmg-surface);
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card);
  box-shadow: var(--cmg-shadow-card);
}

.cmg-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(0, 184, 217, .24);
  border-radius: var(--cmg-radius-pill);
  background: rgba(0, 184, 217, .08);
  color: var(--cmg-brand-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

body.theme-dark .app-brand__meta strong,
body[data-theme="dark"] .app-brand__meta strong,
body[data-color-scheme="dark"] .app-brand__meta strong,
html[data-theme="dark"] body .app-brand__meta strong {
  color: #D8DEE8;
}

body.theme-dark .cmg-brand-chip,
body[data-theme="dark"] .cmg-brand-chip,
body[data-color-scheme="dark"] .cmg-brand-chip,
html[data-theme="dark"] body .cmg-brand-chip {
  border-color: rgba(0, 184, 217, .28);
  background: rgba(0, 184, 217, .12);
  color: #D8DEE8;
}

@media (max-width: 768px) {
  :root {
    --cmg-brand-mark-size: 38px;
    --cmg-brand-wordmark-width: 112px;
  }

  body:not(.catalog-marketing-page) .marketing-header {
    width: min(100% - 24px, 720px) !important;
    border-radius: 14px !important;
  }

  body:not(.catalog-marketing-page) .hero-poster h1 {
    font-size: clamp(1.9rem, 8vw, 2.45rem) !important;
    line-height: 1.12 !important;
  }

  .marketing-button {
    min-height: 44px !important;
  }
}